I am trying to handle a RoutedEvent from a UserControl I built by hooking it up to a command using Interaction.Triggers. The following works--it calls the AddingNewThingCommand:
<WrapPanel>
<local:MyCustomUserControl Header="MyHeader1"
ItemsSource="{Binding List1}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="AddingNewThing">
<prism:InvokeCommandAction Command="{Binding DataContext.AddingNewThingCommand, ElementName=rootViewElement}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</local:MyCustomUserControl >
<local:MyCustomUserControl Header="MyHeader2"
ItemsSource="{Binding List2}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="AddingNewThing">
<prism:InvokeCommandAction Command="{Binding DataContext.AddingNewThingCommand, ElementName=rootViewElement}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</local:MyCustomUserControl >
</WrapPanel>
Now I actually have a lot of these user control instances in this wrap panel, so I would prefer to move the interaction triggers to the parent element -- the WrapPanel. The following does not work:
<WrapPanel>
<i:Interaction.Triggers>
<!-- Also tried local:MyCustomUserControl.AddingNewThing -->
<i:EventTrigger EventName="MyCustomUserControl.AddingNewThing">
<prism:InvokeCommandAction Command="{Binding DataContext.AddingNewThingCommand, ElementName=rootViewElement}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<local:MyCustomUserControl Header="MyHeader1"
ItemsSource="{Binding List1}"/>
<local:MyCustomUserControl Header="MyHeader2"
ItemsSource="{Binding List2}"/>
</WrapPanel>
Does EventTrigger work with bubbling events?
My RoutedEvent:
public static readonly RoutedEvent AddingNewThingEvent = EventManager.RegisterRoutedEvent(
"AddingNewThing", RoutingStrategy.Bubble, typeof(RoutedEventHandler), typeof(MyCustomUserControl));
public event RoutedEventHandler AddingNewThing
{
add { AddHandler(AddingNewThingEvent, value); }
remove { RemoveHandler(AddingNewThingEvent, value); }
}
Normally, the routed event system permits handlers for any routed event to be attached to any UIElement or ContentElement. That's how the routed events work.
However, the System.Windows.Interactivity.EventTrigger is not a part of the visual tree and therefore cannot participate in this routed event dispatching. The EventTrigger subscribes directly to the CLR event with given EventName (using Reflection: Type.GetEvent).
The event source object will be determined using the following order:
If SourceObject property of the EventTrigger is set, try to get that object. If it's not null, use it.
If SourceName of the EventTrigger is set, get the object using a named objects resolver.
Otherwise, use the associated object the EventTrigger is directly attached to.
The EventName has to be a simple event name. Fully qualified event names (i.e. Type.EventName) are not supported. This is in contrast with System.Windows.EventTrigger, where you can specify the fully qualified routed event name in the RoutedEvent property.
So in short, you cannot simplify your WrapPanel in that way.
Maybe you could use an ItemsControl with a WrapPanel as ItemsPanel and define a DataTemplate containing your MyCustomUserControl with the EventTriggers.
Related
How do I bind the sorting command of my datagrid to view model?
Below is my XAML Code
<DataGrid ItemsSource="{Binding ViewModels}"
CanUserSortColumns="True"
Sorting="{Binding ViewModel_SortingCommand}">
</DataGrid>
Below is the ViewModel implemented that cause the error in binding
ViewModel_SortingCommand = new DelegateCommand<DataGridSortingEventArgs>(ViewModel_Sorting;
public void ViewModel_Sorting(DataGridSortingEventArgs args)
{
// Error on binding
}
Since Sorting is an event, you cannot bind it directly, but you can use an EventTrigger.
<DataGrid ItemsSource="{Binding ViewModels}"
CanUserSortColumns="True">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Sorting">
<i:InvokeCommandAction Command="{Binding ViewModel_SortingCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</DataGrid>
If you use the legacy blend behaviors shipped with Blend, use this namespace:
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
If you use the new Microsoft.Xaml.Behaviors.Wpf Nuget package, use this namespace:
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
If you need to process the event args in your command, set PassEventArgsToCommand to True:
<b:InvokeCommandAction Command="{Binding FavContextMenuEditCmd}" PassEventArgsToCommand="True"/>
Also note, that there is an EventArgsParameterPath property to specify a property in the event args that should be passed to the command and an EventArgsConverter property to use a converter. These are useful to avoid passing UI related types like event args to your view model.
Passing a DataGridSortingEventArgs to a view model breaks the MVVM pattern.
You should either perform the sorting in the view/control or, if you are really interested in the sort order in the context of the view model, sort the actual source collection that the view binds to. In general, the view model isn't interested in or aware of how the user sorts, groups or filter the data in the view.
Either way, the view model should not depend on a DataGridSortingEventArgs or anything else that is related to the DataGrid control in the view.
I have a code similar to the one below and a boolean property, in the viewmodel, that I would like to use to control the Loaded event. As an example, if property is false, do not trigger this event. If there was an IsEnabled property in xaml, it would have been easy to bind the boolean property to. In the case of an event, how to accomplish this task?
<i:Interaction.Triggers>
<i:EventTrigger EventName="Loaded">
<cmd:EventToCommand Command="{Binding Mode=OneWay, Path=LoadedCommand}"
PassEventArgsToCommand="True" />
</i:EventTrigger>
You can use CanExecute and RaiseCanExecuteChanged methods
of your DelegateCommand in your view model to check the value
and effectively disable the DelegateCommand when needed.
You can also handle the event in the code behind of the view. Your
view model is already the data context of the view so accessing it
from code behind for this purpose is fine and therefore you can
check the boolean property from your view model and cancel the event
as needed.
I'm new to WPF but I manage to advance slowly towards writing my first serious project. I'm not sure I use the correct terms so please bear with me.
I implemented a set of ItemsControl (User Controls). The item source is a collection of items. Each item holds much data including it's own ID. I would like the User Control to change a property when the mouse hovers over another control outside this set of ItemsControl.
To complicate things the other control is also an element of another set of ItemsControl.
I already managed to store the ID of the hovered-over control in a top-level property (In the top DataContext) but I can't find a way to bind to it from within the element buried inside the DataTemplate.
Here's a screenshot:
In this example the user hovers over channel 14 - as a result, bottom axes X and Z should highlight (I chose them arbitrarily - according to data stored in the database).
I'd be grateful for any idea. Examples will be most welcome!
Assuming that:
1) You are using the MVVM design pattern.
2) That there is an underlying ViewModel for each of the items in your ItemsControl.
Then what you need to do is handle the MouseEnter and MouseLeave events in your view and have them trigger Commands in your view model. Then have those ViewModels update properties in your other ViewModels to have them highlight the appropriate items in the other ItemsControl.
<UserControl x:Class="ClassName"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WPF4">
<i:Interaction.Triggers>
<!-- this will call the associated commands on your viewmodel when the mouse enters/leaves the corresponding view in your itemscontrol, from there you can create the viewmodel functionality you'd like-->
<i:EventTrigger EventName="MouseEnter">
<i:InvokeCommandAction Command="{Binding MouseEnterCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<i:InvokeCommandAction Command="{Binding MouseLeaveCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid Height="10" Width="10">
<!--the content of your usercontrol-->
</Grid>
</UserControl>
Once you get the correct commands notifying your viewmodel that the mouse is hovering over it (or left it). You can manage the state of your viewmodels to create the affects you are looking for.
I really like the Blend SDK for stuff like this.
Since you mentioned you have the hovered-over ID setting in a property, you could start with a PropertyChangedTrigger at the root level. Next, you will probably want to invoke a command (rather than just a method), since your action includes a parameter (the ID). Use InvokeCommandAction for this. You can trigger a command either on the view or the view-model. If you want to trigger it on the view, then you'll probably want to use ElementName as the binding.
Here's an example.
<UserControl>
<i:Interaction.Triggers>
<!-- When "SelectedID" changes, invoke the "SelectedIDChangedCommand" on the
element "AxesAndButtons". Pass the value of "SelectedID" as the
command parameter -->
<ei:PropertyChangedTrigger Binding="{Binding SelectedID}">
<i:InvokeCommandAction CommandParameter="{Binding SelectedID}"
Command="{Binding ElementName=AxesAndButtons,Path=SelectedIDChangedCommand}" />
</ei:PropertyChangedTrigger>
<i:Interaction.Triggers>
<my:AxesAndButtonsControl x:Name="AxesAndButtons">
</my:AxesAndButtonsControl>
</UserControl>
I have assumed that ID property that gets changed is called "SelectedID" (and is a property of the root data context). Also, that your target user control has a defined ICommand "SelectedIDChangedCommand" dependency property that performs the update. That is, something like this:
public class AxesAndButtonsControl : UserControl
{
public static readonly DependencyProperty SelectedIDChangedCommand = DependencyProperty.Register("SelectedIDChangedCommand",
typeof(ICommand),
typeof(AxesAndButtonsControl),
new PropertyMetadata(null));
public AxesAndButtonsControl()
{
SelectedIDChangedCommand = new DelegateCommand(id => {
// highlight "X" and "Z" or whatever
});
}
}
Edit I just noticed that maybe you haven't bound the MouseOver event to update the SelectedID property yet. If that's the case, then you should be able to use an EventTrigger along with a ChangePropertyAction (in a FindAncestor or ElementName binding) to update it. Something like this:
<DataTemplate>
<Grid>
<i:Interaction.Triggers>
<!-- When "MouseEnter" gets triggered, set the property "SelectedID" on the
data context of the closest "UserControl" parent to the value of "ItemID"
in the current data context -->
<i:EventTrigger EventName="MouseEnter">
<ei:ChangePropertyAction Value="{Binding ItemID}"
TargetObject="{Binding RelativeSource={RelativeSource AncestorType=UserControl},Path=DataContext}"
PropertyName="SelectedID" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Grid>
</DataTemplate>
How can a command on a ViewModel be invoked by a specific event of a button, such as MouseDoubleClick?
You can use the EventTrigger in the System.Windows.Interactivity namespace, which is part of the so-called Prism framework. If you're just getting started with MVVM, don't care too much for Prism by now, but keep it in mind for later. Anyway, you can steel the EventTrigger
It works like this:
Reference the assembly System.Windows.Interactivity.dll
In XAML, reference the namespace:
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
Then in your Button or any other control, add a EventTrigger like this:
<Button Content="Button">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<i:InvokeCommandAction Command="{Binding CommandToBindTo}"
CommandParameter="{Binding CommandParameterToBindTo}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
This way, you bind your event to a Command on your DataContext.
Remark
To clarify the usage, here's a kind of real life example including the ViewModel. The fictional requirement is to allow the user to select an item in a list and then perform a command which takes the selected item as a parameter:
<ListBox x:Name="ItemsList" ItemsSource="{Binding Items}" />
<Button Content="Do something with selected item">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseDoubleClick">
<i:InvokeCommandAction Command="{Binding DoSomethingCommand}"
CommandParameter="{Binding SelectedItem,
ElementName=ItemsList}" />
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
And that would be the ViewModel. Note how the parameter to the command is used, in the example with a generic version of a DelegateCommand object as you get it in every MVVM framework (sometimes RelayCommand). This class takes the type of the required parameter as a generic parameter (here ItemViewModel) and requires a method which takes an according parameter (here ExecuteDoSomethingWithItem(ItemViewModel ...)). The rest is WPF magic: The oject to which the CommandParameter property is bound in your XAML will be passed through as the parameter in your Execute(...) function.
public class ViewModel
{
ObservableCollection<ItemViewModel> Items { get; set; }
public ICommand DoSomethingCommand
{
get
{
return _doSomethingCommand ??
(_doSomethingCommand = new DelegateCommand<ItemViewModel>(ExecuteDoSomethingWithItem));
}
}
private DelegateCommand<ItemViewModel> _doSomethingCommand;
private void ExecuteDoSomethingWithItem(ItemViewModel itemToDoSomethingWith)
{
// Do something
}
public ViewModel()
{
Items = new ObservableCollection<ItemViewModel>();
// Fill the collection
}
}
Have fun with learning MVVM, it's worth it.
you can use attached command behaviors
=> http://geekswithblogs.net/HouseOfBilz/archive/2009/08/21/adventures-in-mvvm-ndash-generalized-command-behavior-attachments.aspx
You need to do a lot of pluming yourself if you going to use Command and Event Binding from out of the box WPF. You can gain a lot of just using existing framework such as MVVM Light Toolkit, or Cliburn Micro that already provide command and even binding.
I have two nested Grid (FrameworkElement) items in my application.
<UserControl xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity">
<Grid x:name="OuterGrid">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<i:InvokeCommandAction x:Name="TheOuterCommand" Command="{Binding OuterCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid x:name="InnerGrid">
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonDown">
<i:InvokeCommandAction x:Name="TheInnerCommand" Command="{Binding InnerCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</Grid>
</Grid>
</UserControl>
Each of the InvokeCommands is attached to a DelegateCommand (from the Prism libraries) in the viewmodel.
OuterCommand = new DelegateCommand(OuterCommandMethod, e => true);
InnerCommand = new DelegateCommand(InnerCommandMethod, e => true);
At the moment, the EventTrigger on InnerGrid also triggers the event on the OuterGrid due to the MouseLeftButtonEvent not being handled at the InnerGrid level.
Is there a way I can notify the EventTrigger that it is handled and it should not bubble up to the OuterGrid?
At the moment, all I can think to do is have a wrapper FrameworkElement around the InnerGrid that uses an event on the XAML code-behind to set the event to handled. Does anyone have any other ideas?
---- Edit ----
In the end, I have included MVVM Light in my application and replaced InvokeCommandAction with RelayCommand. This is now working as I intended. I'll mark Bryant's answer as the winner for giving me the suggestion.
We have extended EventTrigger by adding dependency property called IsInner and then we always set a static flag in the inner EventTrigger. The outer EventTrigger unsets the flag and returns if the flag was set. That is extremely easy to write and works well.
Your best bet would be to pass the event args to the Command and then mark the event handled using the event args. You can do this by following this example here.