WPF Bound ListView Double Click event

Question

I'm new to WPF so please forgive any of the below that doesn't make sense...

I've set up a view model, which is bound to a WPF List view data template. The source objects (belonging to a class called BrowserItem) are in an ObservableCollection, and I use a CollectionViewSource which diplays them in the ListView - after several headaches this works really well.

I thought the simplest part would be the handling when a user double clicks on something, but I was wrong.

The Event attached to the ListView returns the TextBlock control rather than the BrowserItem source object that was clicked on.

Can anyone point me to a simple way of obtaining the original item (BrowserItem) when the control is clicked on - I've seen several ways of doing this, but they all seem very complex to my simple mind.

A simple example would be great.

This is the XAML for the list view if its of use:

           <ListView Name="ViewList"
                  ItemsSource="{Binding GroupItems}">
            <ListView.ItemTemplate>
                <DataTemplate>

                    <StackPanel Orientation="Horizontal">
                        <Expander>
                            <Expander.Style>
                                <Style>
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Path=Children.Count}"
                                                     Value="0">
                                            <Setter Property="Expander.Visibility"
                                                    Value="Collapsed" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>
                            </Expander.Style>
                            <ListBox ItemsSource="{Binding Children}" />
                        </Expander>
                        
                        <TextBlock Text="{Binding Name}">

                            <TextBlock.Style>

                                <Style TargetType="{x:Type TextBlock}">
                                    <Style.Triggers>
                                        <DataTrigger Binding="{Binding Active}"
                                                     Value="true">
                                            <Setter Property="Background"
                                                    Value="YellowGreen" />
                                        </DataTrigger>
                                    </Style.Triggers>
                                </Style>

                            </TextBlock.Style>
                        </TextBlock>
                    </StackPanel>

                 </DataTemplate>
            </ListView.ItemTemplate>

            <ListView.GroupStyle>
                <GroupStyle>
                    <GroupStyle.ContainerStyle>
                        <Style TargetType="{x:Type GroupItem}">
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate>
                                        <Expander>
                                            <Expander.Header>
                                                <TextBlock Text="{Binding Name}" />
                                            </Expander.Header>
                                            <ItemsPresenter />
                                        </Expander>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </GroupStyle.ContainerStyle>
                </GroupStyle>
            </ListView.GroupStyle>

        </ListView>

Thanks.

Answer 1

You can use EventSetter to add MouseDoubleClick event to listview like below:

<ListView ItemsSource="{Binding Source}" SelectedItem="{Binding SelectedModel, Mode=TwoWay}">
        <!--<Behaviors:Interaction.Triggers>
            <Behaviors:EventTrigger EventName="MouseDoubleClick">
                <Behaviors:InvokeCommandAction Command="{Binding DataContext.Command, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}" />
            </Behaviors:EventTrigger>
        </Behaviors:Interaction.Triggers>-->
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <EventSetter Event="MouseDoubleClick" Handler="ListViewItem_MouseDoubleClick" />
            </Style>
        </ListView.ItemContainerStyle>
        <ListView.ItemTemplate>
            <DataTemplate DataType="{x:Type local:Model}">
                <TextBlock Text="{Binding Age}" />
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

In this way you just handle it in code behand , not in ViewModel.

If you want handle it in viewmodel, you need one class like this:

public class EventToCommand
{
    public static string GetEventName(DependencyObject obj)
    {
        return (string)obj.GetValue(EventNameProperty);
    }

    public static void SetEventName(DependencyObject obj, string value)
    {
        obj.SetValue(EventNameProperty, value);
    }

    public static readonly DependencyProperty EventNameProperty =
        DependencyProperty.RegisterAttached("EventName", typeof(string), typeof(EventToCommand), new PropertyMetadata("", OnEventNameChanged));

    public static void OnEventNameChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
       
    }

    public static ICommand GetCommand(DependencyObject obj)
    {
        return (ICommand)obj.GetValue(CommandProperty);
    }

    public static void SetCommand(DependencyObject obj, ICommand value)
    {
        obj.SetValue(CommandProperty, value);
    }

    public static readonly DependencyProperty CommandProperty =
        DependencyProperty.RegisterAttached("Command", typeof(ICommand), typeof(EventToCommand), new PropertyMetadata(OnCommandChanged));


    public static void OnCommandChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var element = d as FrameworkElement;
        EventInfo eventInfo =  d.GetType().GetEvent(GetEventName(d));
        var eventHandlerMethodInfo = typeof(EventToCommand).GetMethod("Invoke", BindingFlags.Static | BindingFlags.Public);
        eventInfo.AddEventHandler(d, Delegate.CreateDelegate(eventInfo.EventHandlerType, eventHandlerMethodInfo));
        
    }
    public static void Invoke(object sender,EventArgs e)
    {
        var command = GetCommand(sender as FrameworkElement);
        command.Execute(e);
    }

}

And use class EventToCommand like this:

 <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="local:EventToCommand.EventName" Value="MouseDoubleClick" />
                <Setter Property="local:EventToCommand.Command" Value="{Binding DataContext.Command, RelativeSource={RelativeSource AncestorType={x:Type ListView}}}" />
            </Style>
        </ListView.ItemContainerStyle>