Click and Double Click on ListView items

Sometimes in WPF the easiest things seem to be the hardest to obtain… if you want to get them the clean way.

The ListView object is a great, flexible control available in WPF and gives you something more than the old, good ListBox. In particular, the ListView is able to render items in “grid mode” using the View property.

The View property can be instantiated with a GridView object in which we can create the needed “columns”, bound to the fields we want to show.

A little step back: we want to be MVVM as much as possible so, no code-behind or event handlers – our UI is showing data coming from a list of items:

Name and Surname are the information we want to show and since we want the item itself to be able handle its selection, we also add to it a Command (a RelayCommand actually). To be able to connect an Event to a Command we are going to use an EventToCommand implementation: a lot of implementation can be found around, the MVVM Light Toolkit is a good choice. Also, we are going to use the Windows Interactivity library (adds System.Windows.Interactivity to the references of your project) – note that we could use the InvokeCommandAction of the Interactivity library, but since we want to react to the double click, we also need the parameter of the event.

Let’s now change a bit the ListViewItem style; I’m not writing everything here but the whole XAML can be seen here:




<Style TargetType="{x:Type ListViewItem}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="ListViewItem">
        <Grid x:Name="LayoutRoot">
          <!-- [cut] -->
          <GridViewRowPresenter x:Name="gvrp" />
          <i:Interaction.Triggers>
            <i:EventTrigger EventName="MouseDown">
              <ionCtk:EventToCommand Command="{Binding CmdClick}" PassEventArgsToCommand="True"/>
            </i:EventTrigger>
          </i:Interaction.Triggers>
        </Grid>
        <!-- [cut] -->
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

the useful part is PassEventArgsToCommand: we’ll receive a MouseButtonEventArgs in our command execute function:

private void CmdClickExecute(object param)
{
  MouseButtonEventArgs args = param as MouseButtonEventArgs;
  if (args != null && args.LeftButton == MouseButtonState.Pressed && args.ClickCount == 2)
  {
     MessageBox.Show(Name + " was double clicked.");
  }
}

so that we can react only on double click.

The ListView will automatically use the ListViewItem style if we don’t give the Style a key; in this case Items and SelectedItems are dependency property of the ViewModel we are using for the ListView:

<ListView ItemsSource="{Binding Items, Mode=TwoWay}" SelectedItem="{Binding SelectedItem}" SelectionMode="Single">
  <ListView.View>
    <GridView>
      <GridViewColumn Width="100" DisplayMemberBinding="{Binding Path=Name}" Header="Name" />
      <GridViewColumn Width="100" DisplayMemberBinding="{Binding Path=Surname}" Header="Surname" />
    </GridView>
  </ListView.View>
</ListView>

once wired the event and the command, we can simply select an item or double click it:

Leave a Reply Cancel reply