Events Interactivity in WPF MVVM


In our last Article we have learned to create a sample application using WPF MVVM pattern including Inotify properties, Relay commands,Button click events.

In this article , we will learn how to fire other events in MVVM, for example if we need to  fire double mouse click in WPF, we just need to create a new event handle on doublemouse click event but in MVVM it is not the case, because we cannot dorectly write the code for events in .cs  form.So we  need to use the RelayCommands for these events also, same as we have use dfor signle button click. So if  we bind a command of button to a relay command, by default it would call a Singleleftmouseclick, but what we need to bind that command to doublemouseleftclick.

So for handling these types of events in MVVM we use :System.Windows.Interactivity;
Lets see how to use that:

Step 1: Just add a button control in MainWindow.xaml .
Step 2: Add reference  "System.Windows.Interactivity" to solution explorer=>references as shown in below image.



Step 3: Now add the namespace for interactivity assembly in MainWindow.xaml and Xaml should look like as below:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Grid>

        <TextBlock Text="{Binding GetText,UpdateSourceTrigger=PropertyChanged}" Width="100" Height="100"  VerticalAlignment="Center"/>
        <Button
                            IsDefault="True"
                            Content="Change Text" Width="100" Height="100" VerticalAlignment="Bottom"
                            >

        </Button>
    </Grid>
</Window>

Step 4: Lets create the triggerfor mouse double click as below:

In between the opening and closing tags of button add the trigger:

 <Button
                            IsDefault="True"
                            Content="Change Text" Width="100" Height="100" VerticalAlignment="Bottom"
                           >
         
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseDoubleClick">
                    <i:InvokeCommandAction Command="{Binding ChangeTextCommand}"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>

        </Button>

Event Name should be same the event to want to fire, and Command should be bind to the Relay command in ViewModel  which use want to excute when event occurs.

Note For RelayCommand please read our previous article : link

So now lets try running the application and see text should get changed on MousedoubleClick  as shown in the below Images:

Before double Click:






After Double Click:


So this how we handle the events and we can use same approach for handling events of any control.
In our next articles we will learn how DataGrid, itemControls,Combobox and many more control works in MVVM.

Thank you.



Comments

Post a Comment

Popular Posts

How to position controls using Canvas control in WPF using MVVM

Image
The best way to position different controls using Canvas in MVVM is using ItemsControl.We need to bind ItemsControl with the list of controls and using Canvas control as the ItemsTemplate.Lets understand it in more details using an example. Step 1: Add an ItemsControl in MainWindow. Step 2: Lets create a list containing the different heights, width,top and left poistions for the controls and this list we will be using as the ItemsSource to bind the ItemsControl. Step 3: Lets Create a class under ViewModel folder only named as “ControlDetails”, Class should look like: namespace WpfApplication1.ViewModel {   public class ControlDetails     {         public double Height         {             get;             set;         }         public double Width         {             get;             set;         }         public double Top         {             get;             set;         }         public double Left         {             get;             set;      
Read more

Change font and size in visual studio

Image
Visual studio comes with feature to customize font and size. Let us see how we can change the font and size in visual studio. We can do that by going to        tools -->  options                                                                                                                                 Below is the screenshot for reference: Under environment tab select Font and color section.         environment --> font and color                                                                                                         Below is the screenshot for reference Save changes after selecting your desired font and size.
Read more

DataGrid in WPF MVVM

Image
DataGrid in MVVM As we know datagrid plays a vital role in displaying data in our apllications. In this article we will get to know how to bind a datagrid in WPF MVVM. Step 1: Lets add a DataGrid Control in Main Window as below: <Window x:Class="WpfApplication1.MainWindow"         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"         xmlns:local="clr-namespace:WpfApplication1" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"         mc:Ignorable="d"         Title="MainWindow" Height="350" Width="525">     <Grid>         <Grid.RowDefinitions>             <RowDefinition Heig
Read more