Selector DoubleClick Behaviour calling ViewModel ICommand

The other day I was at work and needed to use a WPF ListView (Selector) to call a ICommand in a ViewModel. Now we want to be good and use nice design approaches, so I thought about using the attached command capabilities of my Cinch MVVM framework. But then I thought ah I only want to call the ICommand when the user actually double clicks an Item in the ListView (Selector) and not when the double click anywhere else, like say a header, which the ListView certainly has.

So without further ado I set to work and came up with the following attached Behaviour DP

   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Windows;
   4:  using System.Windows.Controls.Primitives;
   5:  using System.Windows.Input;
   6:  using System.Windows.Controls;
   7:   
   8:  namespace ListViewDoubleCLick
   9:  {
  10:      /// <summary>
  11:      /// Selector MouseDoubleClick calling ViewModel ICommand  
  12:      /// </summary>
  13:      public static class SelectorDoubleClickCommandBehavior
  14:      {
  15:          #region Attached DPs
  16:          #region HandleDoubleClick
  17:   
  18:          /// <summary>
  19:          /// HandleDoubleClick Attached Dependency Property
  20:          /// </summary>
  21:          public static readonly DependencyProperty 
  22:              HandleDoubleClickProperty =
  23:              DependencyProperty.RegisterAttached(
  24:              "HandleDoubleClick", 
  25:              typeof(bool), 
  26:              typeof(SelectorDoubleClickCommandBehavior),
  27:                  new FrameworkPropertyMetadata(false,
  28:                      new PropertyChangedCallback(
  29:                          OnHandleDoubleClickChanged)));
  30:   
  31:          /// <summary>
  32:          /// Gets the HandleDoubleClick property.  
  33:          /// </summary>
  34:          public static bool GetHandleDoubleClick(DependencyObject d)
  35:          {
  36:              return (bool)d.GetValue(HandleDoubleClickProperty);
  37:          }
  38:   
  39:          /// <summary>
  40:          /// Sets the HandleDoubleClick property. 
  41:          /// </summary>
  42:          public static void SetHandleDoubleClick(DependencyObject d, 
  43:              bool value)
  44:          {
  45:              d.SetValue(HandleDoubleClickProperty, value);
  46:          }
  47:   
  48:          /// <summary>
  49:          /// Hooks up a weak event against the source Selectors 
  50:          /// MouseDoubleClick if the Selector has asked for 
  51:          /// the HandleDoubleClick to be handled
  52:          /// 
  53:          /// If the source Selector has expressed an interest 
  54:          /// in not having its MouseDoubleClick handled 
  55:          /// the internal reference
  56:          /// </summary>
  57:          private static void OnHandleDoubleClickChanged(
  58:              DependencyObject d,
  59:              DependencyPropertyChangedEventArgs e)
  60:          {
  61:              Selector selector = d as Selector;
  62:   
  63:   
  64:              if (selector != null)
  65:              {
  66:                  if ((bool)e.NewValue)
  67:                  {
  68:                      selector.MouseDoubleClick -= OnMouseDoubleClick;
  69: 
  70: 
  71: 
  72: 

73: selector.MouseDoubleClick += OnMouseDoubleClick;

  74:                  }
  75:              }
  76:          }
  77:          #endregion
  78:   
  79:          #region TheCommandToRun
  80:   
  81:          /// <summary>
  82:          /// TheCommandToRun : The actual ICommand to run
  83:          /// </summary>
  84:          public static readonly DependencyProperty TheCommandToRunProperty =
  85:              DependencyProperty.RegisterAttached(
  86:                  "TheCommandToRun",
  87:                  typeof(ICommand),
  88:                  typeof(SelectorDoubleClickCommandBehavior),
  89:                  new FrameworkPropertyMetadata((ICommand)null));
  90:   
  91:          /// <summary>
  92:          /// Gets the TheCommandToRun property.  
  93:          /// </summary>
  94:          public static ICommand GetTheCommandToRun(DependencyObject d)
  95:          {
  96:              return (ICommand)d.GetValue(TheCommandToRunProperty);
  97:          }
  98:   
  99:          /// <summary>
 100:          /// Sets the TheCommandToRun property.  
 101:          /// </summary>
 102:          public static void SetTheCommandToRun(DependencyObject d, 
 103:              ICommand value)
 104:          {
 105:              d.SetValue(TheCommandToRunProperty, value);
 106:          }
 107:          #endregion
 108:          #endregion
 109:   
 110:          #region Private Methods
 111:   
 112:   
 113:          /// <summary>
 114:          /// Handle Selector.MouseDoubleClick but will 
 115:          /// only fire the associated ViewModel command 
 116:          /// if the MouseDoubleClick occurred over an actual
 117:          /// ItemsControl item. This is nessecary as if we 
 118:          /// are using a ListView we may have clicked the 
 119:          /// headers which are not items, so do not want the
 120:          /// associated ViewModel command to be run
 121:          /// </summary>
 122:          private static void OnMouseDoubleClick(object sender, 
 123:              MouseButtonEventArgs e)
 124:          {
 125:              //Get the ItemsControl and then get the item, and 
 126:              //check there is an actual item, as if we are using 
 127:              //a ListView we may have clicked the
 128:              //headers which are not items
 129:              ItemsControl listView = sender as ItemsControl;
 130:              DependencyObject originalSender = 
 131:                  e.OriginalSource as DependencyObject;
 132:              if (listView == null || originalSender == null) return;
 133:   
 134:              DependencyObject container = 
 135:                  ItemsControl.ContainerFromElement
 136:                  (sender as ItemsControl, 
 137:                  e.OriginalSource as DependencyObject);
 138:   
 139:              if (container == null || 
 140:                  container == DependencyProperty.UnsetValue) return;
 141:   
 142:              // found a container, now find the item.
 143:              object activatedItem = 
 144:                  listView.ItemContainerGenerator.
 145:                      ItemFromContainer(container);
 146:   
 147:              if (activatedItem != null)
 148:              {
 149:                  ICommand command = 
 150:                      (ICommand)(sender as DependencyObject).
 151:                      GetValue(TheCommandToRunProperty);
 152:   
 153:                  if (command != null)
 154:                  {
 155:                      if (command.CanExecute(null))
 156:                          command.Execute(null);
 157:                  }                
 158:              }
 159:          }
 160:          #endregion
 161:      }
 162:   
 163:  }

 

Where we would use this in XAML as follows:

   1:  <Window x:Class="ListViewDoubleCLick.Window1"
   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:      xmlns:local="clr-namespace:ListViewDoubleCLick"
   5:      xmlns:interactivity="clr-       namespace:Microsoft.Expression.Interactivity;
   6:         assembly=Microsoft.Expression.Interactivity" 
   7:      Title="Window1" Height="600" Width="800" 
   8:      WindowStartupLocation="CenterScreen">
   9:      <Grid>
  10:   
  11:          <TabControl>
  12:              <TabItem Header="Attached DP Approach">
  13:                  <ListView ItemsSource="{Binding People}"
  14:                    IsSynchronizedWithCurrentItem="True"
  15:                    local:NaiveSelectorDoubleClickCommandBehavior.HandleDoubleClick="true"
  16:                    local:NaiveSelectorDoubleClickCommandBehavior.TheCommandToRun=
  17:                            "{Binding Path=DoItCommand}" >
  18:   
  19:                      <ListView.View>
  20:                          <GridView>
  21:                              <GridViewColumn Header="FirstName"
  22:                                      DisplayMemberBinding="{Binding FirstName}"
  23:                                      Width="80" />
  24:                              <GridViewColumn Header="LastName" 
  25:                                      DisplayMemberBinding="{Binding LastName}"  
  26:                                      Width="80"/>
  27:                          </GridView>
  28:                      </ListView.View>
  29:                  </ListView>
  30:              </TabItem>
  31:          </TabControl>
  32:      </Grid>
  33:   
  34:  </Window>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Or we could get really fancy and use the Blend 3 Microsoft.Expression.Interactivity.Dll which would look something like this :

   1:  using System;
   2:  using System.Collections.Generic;
   3:  using System.Windows;
   4:  using System.Windows.Controls.Primitives;
   5:  using System.Windows.Input;
   6:  using System.Windows.Controls;
   7:  using Microsoft.Expression.Interactivity;
   8:  using System.ComponentModel;
   9:   
  10:  namespace ListViewDoubleCLick
  11:  {
  12:      /// <summary>
  13:      /// Selector MouseDoubleClick calling ViewModel ICommand Behavior
  14:      /// using Blend3 Microsoft.Expression.Interactivity Dll
  15:      /// </summary>
  16:      public class InteractionsSelectorDoubleClickCommandAction :
  17:          TargetedTriggerAction<FrameworkElement>,
  18:          ICommandSource
  19:      {
  20:          #region DPs
  21:   
  22:          #region Command DP
  23:          /// <summary>
  24:          /// The actual Command to fire when the 
  25:          /// EventTrigger occurs, thus firing this 
  26:          /// InteractionsSelectorDoubleClickCommandAction
  27:          /// </summary>
  28:          [Category("Command Properties")]
  29:          public ICommand Command
  30:          {
  31:              get { return (ICommand)GetValue(CommandProperty); }
  32:              set { SetValue(CommandProperty, value); }
  33:          }
  34:   
  35:          public static readonly DependencyProperty CommandProperty =
  36:              DependencyProperty.Register(
  37:                  "Command", typeof(ICommand),
  38:                      typeof(InteractionsSelectorDoubleClickCommandAction),
  39:                      new PropertyMetadata(
  40:                          (ICommand)null, OnCommandChanged));
  41:   
  42:          private static void OnCommandChanged(DependencyObject d,
  43:              DependencyPropertyChangedEventArgs e)
  44:          {
  45:              var action = 
  46:                  (InteractionsSelectorDoubleClickCommandAction)d;
  47:              action.OnCommandChanged((ICommand)e.OldValue, 
  48:                  (ICommand)e.NewValue);
  49:          }
  50:   
  51:          #region Command implementation
  52:   
  53:          /// <summary>
  54:          /// This is a strong reference to the Command.
  55:          /// CanExecuteChanged event handler. 
  56:          /// The commanding system uses a weak 
  57:          /// reference and if we don't enforce a 
  58:          /// strong reference then the event 
  59:          /// handler will be gc'ed.
  60:          /// </summary>
  61:          private EventHandler CanExecuteChangedHandler;
  62:   
  63:   
  64:   
  65:          private void OnCommandChanged(ICommand oldCommand, 
  66:              ICommand newCommand)
  67:          {
  68:              if (oldCommand != null)
  69:                  UnhookCommand(oldCommand);
  70:              if (newCommand != null)
  71:                  HookCommand(newCommand);
  72:          }
  73:   
  74:          private void UnhookCommand(ICommand command)
  75:          {
  76:              command.CanExecuteChanged -= 
  77:                  CanExecuteChangedHandler;
  78:              UpdateCanExecute();
  79:          }
  80:   
  81:          private void HookCommand(ICommand command)
  82:          {
  83:              // Save a strong reference to the 
  84:              // Command.CanExecuteChanged event handler. 
  85:              // The commanding system uses a weak 
  86:              // reference and if we don't save a strong 
  87:              // reference then the event handler will be gc'ed.
  88:              CanExecuteChangedHandler = 
  89:                  new EventHandler(OnCanExecuteChanged);
  90:              command.CanExecuteChanged 
  91:                  += CanExecuteChangedHandler;
  92:              UpdateCanExecute();
  93:          }
  94:   
  95:          private void OnCanExecuteChanged(object sender, 
  96:              EventArgs e)
  97:          {
  98:              UpdateCanExecute();
  99:          }
 100:   
 101:          private void UpdateCanExecute()
 102:          {
 103:              if (Command != null)
 104:              {
 105:                  RoutedCommand command = 
 106:                       Command as RoutedCommand;
 107:                  if (command != null)
 108:                      IsEnabled = 
 109:                          command.CanExecute(
 110:                           CommandParameter, CommandTarget);
 111:                  else
 112:                      IsEnabled = 
 113:                          Command.CanExecute(CommandParameter);
 114:                  if (Target != null && SyncOwnerIsEnabled)
 115:                      Target.IsEnabled = IsEnabled;
 116:              }
 117:          }
 118:   
 119:          #endregion
 120:   
 121:   
 122:          #endregion
 123:   
 124:          #region CommandParameter DP
 125:          /// <summary>
 126:          /// For consistency with the Wpf Command pattern
 127:          /// </summary>
 128:          [Category("Command Properties")]
 129:          public object CommandParameter
 130:          {
 131:              get { return (object)GetValue(
 132:                  CommandParameterProperty); }
 133:              set { SetValue(CommandParameterProperty, value); }
 134:          }
 135:   
 136:          public static readonly DependencyProperty 
 137:              CommandParameterProperty =
 138:              DependencyProperty.Register(
 139:                  "CommandParameter", typeof(object), 
 140:                      typeof(InteractionsSelectorDoubleClickCommandAction),
 141:                          new PropertyMetadata());
 142:          #endregion
 143:   
 144:          #region CommandTarget DP
 145:          /// <summary>
 146:          /// For consistency with the Wpf Command pattern
 147:          /// </summary>
 148:          [Category("Command Properties")]
 149:          public IInputElement CommandTarget
 150:          {
 151:              get { return (IInputElement)GetValue(
 152:                  CommandTargetProperty); }
 153:              set { SetValue(CommandTargetProperty, value); }
 154:          }
 155:   
 156:          public static readonly DependencyProperty 
 157:              CommandTargetProperty =
 158:              DependencyProperty.Register(
 159:                  "CommandTarget", typeof(IInputElement), 
 160:                      typeof(InteractionsSelectorDoubleClickCommandAction),
 161:                          new PropertyMetadata());
 162:          #endregion
 163:   
 164:          #region SyncOwnerIsEnabled DP
 165:          /// <summary>
 166:          /// Allows the user to specify that the 
 167:          /// owner element should be 
 168:          /// enabled/disabled whenever the 
 169:          /// action is enabled/disabled.
 170:          /// </summary>
 171:          [Category("Command Properties")]
 172:          public bool SyncOwnerIsEnabled
 173:          {
 174:              get { return (bool)GetValue(SyncOwnerIsEnabledProperty); }
 175:              set { SetValue(SyncOwnerIsEnabledProperty, value); }
 176:          }
 177:   
 178:          /// <summary>
 179:          /// When SyncOwnerIsEnabled is true 
 180:          /// then changing 
 181:          /// InteractionsSelectorDoubleClickCommandAction.
 182:          /// IsEnabled 
 183:          /// will automatically update the owner 
 184:          /// (Target) IsEnabled property.
 185:          /// </summary>
 186:          public static readonly DependencyProperty 
 187:              SyncOwnerIsEnabledProperty =
 188:              DependencyProperty.Register(
 189:                  "SyncOwnerIsEnabled", typeof(bool), 
 190:                      typeof(InteractionsSelectorDoubleClickCommandAction),
 191:                      new PropertyMetadata());
 192:          #endregion
 193:   
 194:          #endregion
 195:   
 196:          #region Overrides
 197:          /// <summary>
 198:          /// On attached hook up our own MouseDoubleClick so we
 199:          /// can check we actually double click an item
 200:          /// </summary>
 201:          protected override void OnAttached()
 202:          {
 203:              base.OnAttached();
 204:              Selector s = this.AssociatedObject as Selector;
 205:              if (s != null)
 206:              {
 207:                  s.MouseDoubleClick += OnMouseDoubleClick;
 208:              }
 209:          }
 210:   
 211:          /// <summary>
 212:          /// On attached unhook the previously 
 213:          /// hooked MouseDoubleClick handler
 214:          /// </summary>
 215:          protected override void OnDetaching()
 216:          {
 217:              base.OnDetaching();
 218:              Selector s = this.AssociatedObject as Selector;
 219:              if (s != null)
 220:              {
 221:                  s.MouseDoubleClick -= OnMouseDoubleClick;
 222:              }
 223:          }
 224:   
 225:          //Must at least implement abstract member invoke
 226:          protected override void Invoke(object parameter)
 227:          {
 228:              //The logic for this is done in the OnMouseDoubleClick
 229:              //as we only wanto fire command if we are actually on an
 230:              //Item in the Selector. If the Selector is a ListView we
 231:              //may have headers so will not want to fire associated
 232:              //Command when a header is double clicked
 233:          }
 234:          #endregion
 235:   
 236:          #region Private Methods
 237:   
 238:          /// <summary>
 239:          /// Handle Selector.MouseDoubleClick but will 
 240:          /// only fire the associated ViewModel command 
 241:          /// if the MouseDoubleClick occurred over an actual
 242:          /// ItemsControl item. This is nessecary as if we 
 243:          /// are using a ListView we may have clicked the 
 244:          /// headers which are not items, so do not want the
 245:          /// associated ViewModel command to be run
 246:          /// </summary>
 247:          private static void OnMouseDoubleClick(object sender,
 248:              MouseButtonEventArgs e)
 249:          {
 250:              //Get the ItemsControl and then get the item, and 
 251:              //check there is an actual item, as if we are using 
 252:              //a ListView we may have clicked the
 253:              //headers which are not items
 254:              ItemsControl listView = sender as ItemsControl;
 255:              DependencyObject originalSender =
 256:                  e.OriginalSource as DependencyObject;
 257:              if (listView == null || originalSender == null) return;
 258:   
 259:              DependencyObject container =
 260:                  ItemsControl.ContainerFromElement
 261:                  (sender as ItemsControl,
 262:                  e.OriginalSource as DependencyObject);
 263:   
 264:              if (container == null ||
 265:                  container == DependencyProperty.UnsetValue) return;
 266:   
 267:              // found a container, now find the item.
 268:              object activatedItem =
 269:                  listView.ItemContainerGenerator.
 270:                      ItemFromContainer(container);
 271:   
 272:              if (activatedItem != null)
 273:              {
 274:                  ICommand command =
 275:                      (ICommand)(sender as DependencyObject).
 276:                      GetValue(TheCommandToRunProperty);
 277:   
 278:                  if (command != null)
 279:                  {
 280:                      if (command.CanExecute(null))
 281:                          command.Execute(null);
 282:                  }
 283:              }
 284:          }
 285:   
 286:          #endregion
 287:      }
 288:   
 289:  }

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Which we could use from XAML as follows:

   1:  <Window x:Class="ListViewDoubleCLick.Window1"
   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
   4:      xmlns:local="clr-namespace:ListViewDoubleCLick"
   5:      xmlns:interactivity="clr-namespace:Microsoft.Expression.Interactivity;assembly=Microsoft.Expression.Interactivity" 
   6:      Title="Window1" Height="600" Width="800" 
   7:      WindowStartupLocation="CenterScreen">
   8:      <Grid>
   9:   
  10:          <TabControl>
  11:               <TabItem Header="Using Blend3 Interactivity Dll" >
  12:                  <ListView ItemsSource="{Binding People}" 
  13:                    IsSynchronizedWithCurrentItem="True">
  14:   
  15:                      <interactivity:Interaction.Triggers>
  16:                          <interactivity:EventTrigger EventName="MouseDoubleClick">
  17:                              <local:InteractionsSelectorDoubleClickCommandAction 
  18:                                  Command="{Binding DoItCommand}" 
  19:                                  SyncOwnerIsEnabled="True" />
  20:                          </interactivity:EventTrigger>
  21:                      </interactivity:Interaction.Triggers>
  22:   
  23:                      <ListView.View>
  24:                          <GridView>
  25:                              <GridViewColumn Header="FirstName"
  26:                                      DisplayMemberBinding="{Binding FirstName}"
  27:                                      Width="80" />
  28:                              <GridViewColumn Header="LastName" 
  29:                                      DisplayMemberBinding="{Binding LastName}"  
  30:                                      Width="80"/>
  31:                          </GridView>
  32:                      </ListView.View>
  33:                  </ListView>
  34:              </TabItem>
  35:          </TabControl>
  36:          
  37:   
  38:   
  39:      </Grid>
  40:   
  41:  </Window>
 
As usual here is a small demo project:  

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

http://sachabarber.net/wp-content/uploads/2009/09/listviewdoubleclick.zip

About these ads

9 thoughts on “Selector DoubleClick Behaviour calling ViewModel ICommand

  1. Johnny Q says:

    How can one do a proper clean-up when using Interactivity? In your example, for instance, the OnDetaching() method is unhooking the MouseDoubleClick event handler, but this method is never hit. It would be if we remove the Interaction.Triggers from the control. But when to do this so that we don’t brake MVVM?

  2. sacha says:

    Just do this in the attached method then

    selector.MouseDoubleClick -= OnMouseDoubleClick; selector.MouseDoubleClick += OnMouseDoubleClick;

  3. Johnny Q says:

    What if we use some heavy objects and want to dispose them? My real problem is how do we get the OnDetaching() method to be called when a control is no longer used.

  4. Johnny

    You will have to take that argument to Microsoft that is not something I can help with.

    I was suprised to hear you say OnDetaching() never got called, must admit I never checked. But anyway you should not be looking to Dispose anything, what would you be Disposing, I dont get you.

    Attached Behviours should never try and dispose anything, they should just hook/unhook into the events I feel.

  5. vamsi says:

    Hi Sacha,
    This was the exact solution I was looking for. Thanks a lot for the solution.

    Here I ran into a problem where I use a list item viewmodel so I dont get the collection. To get the selected item as the parameter to my command handler,I have changed you code a bit at line no 156 .

    if (command != null)

    154: {
    155: if (command.CanExecute(null))
    156: command.Execute(activatedItem);
    157: }

    will this effect the functionality in any way.

    Thanks in Advance.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s