Handling Data Grid Mouse Double Click event in View Model Silverlight 4

Problem:

During building an application i came across a requirement in which double click on data grid row will populate row will open a pop up window. I was amazed later when i came to know that silverlight data grid does not support mouse double click event, i browsed it and thankfully i found a handful material on this topic.

Solution:

I found more than one solutions for that issue but as any great programmer would do, i go for the easiest one :)
This solution requires us to get the data grid MouseLeftButtonUp event and transform it to double click event by doing a bit of coding. The tutorial i found was doing this process in code behind, i need it in view model so i need to make some changes. You can also find that tutorial on below link
http://anupshah-wpfandsilverlight.blogspot.com/2012/05/datagrid-double-click-event-in.html
This tutorial was very simple and efficient, thanks to the guy who wrote it !

Required References:

Below image will show the references you need to add into your silverlight project in order to correctly executes the code.

GalaSoft is silverlight toolkit, you can easily install it by searching it on Google.
Microsoft.Expression.Interactions: It is the core reference required for this project, unfortunately in order to obtain this assembly you need to install ExpressionBlend  only then it will appear under .Net assemblies.
Your xaml file should include below lines:


XAML File:

...................................................
Add your view model in your xaml.

<UserControl.Resources>
        <Local:vmDoubleClick x:Key="ViewModel" />
    </UserControl.Resources>

.....................
.....................
.....................

Just before the closing tag of Data grid place below code:

 <i:Interaction.Triggers>
                
                <i:EventTrigger EventName="MouseLeftButtonUp">
                    <ei:CallMethodAction MethodName="dg_MouseLeftButtonUp"
                                         TargetObject="{Binding Source={StaticResource ViewModel}}" />
                </i:EventTrigger>

</i:Interaction.Triggers>

Your View Model:

Inside your view model place that method you mention in your xaml file.

 #region double click on datagrid

        /// <summary>
        /// fires when mouse left button up occur on data grid
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public void dg_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
        {
            UIElement element = sender as UIElement;
            DateTime FirstClickTime = DateTime.Now;

            TimeSpan span = FirstClickTime - LastClicktime;

            if (span.TotalMilliseconds > 300 || FirstClickDone == false)
            {
                //  means it is the first click
                FirstClickPosition = e.GetPosition(element);
                FirstClickDone = true;
                LastClicktime = DateTime.Now;
            }

            //  second click
            else
            {
                SecondClickPosition = e.GetPosition(element);

                // valid double click
                if (Math.Abs(FirstClickPosition.X - SecondClickPosition.X) < 4 && Math.Abs(FirstClickPosition.Y - SecondClickPosition.Y) < 4)
                {
                    MessageBox.Show("double click took place", "Info", MessageBoxButton.OK);
                }

                //  mouse moves before double click occurs
                else
                {
                    FirstClickDone = false;
                }
            }
        }

        #endregion

If you double click on the grid, you will get something like below:



Hope it will help you guys as it helps me!



Popular Posts