Запуск события двойного щелчка из элемента WPF ListView с использованием MVVM

В приложении WPF с использованием MVVM у меня есть пользовательский элемент управления с элементом списка. Во время выполнения он будет использовать привязку данных для заполнения списка объектов коллекцией объектов.

Как правильно прикрепить событие двойного щелчка к элементам в представлении списка, чтобы при двойном щелчке по элементу в представлении списка запускалось соответствующее событие в модели представления и содержало ссылку на выбранный элемент?

Как это можно сделать с помощью чистого MVVM, т.е. без кода в представлении?

Пожалуйста, код позади - это совсем не плохо. К сожалению, довольно много людей в сообществе WPF ошибались.

MVVM - это не шаблон для устранения кода. Он предназначен для отделения части представления (внешний вид, анимация и т. Д.) От логической части (рабочего процесса). Кроме того, вы можете выполнить модульное тестирование логической части.

Я знаю достаточно сценариев, в которых вам нужно писать код, потому что привязка данных не является решением всего. В вашем сценарии я бы обработал событие DoubleClick в коде файла и делегировал бы этот вызов ViewModel.

Примеры приложений, которые используют программный код и по-прежнему выполняют разделение MVVM, можно найти здесь:

Платформа приложений WPF (WAF) - http://waf.codeplex.com

Я могу заставить это работать с .NET 4.5. Кажется прямолинейным, и никакой третьей стороны или кода не требуется.

<ListView ItemsSource="{Binding Data}">
        <ListView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal"/>
            </ItemsPanelTemplate>
        </ListView.ItemsPanel>
        <ListView.ItemTemplate>
            <DataTemplate>
                <Grid Margin="2">
                    <Grid.InputBindings>
                        <MouseBinding Gesture="LeftDoubleClick" Command="{Binding ShowDetailCommand}"/>
                    </Grid.InputBindings>
                    <Grid.RowDefinitions>
                        <RowDefinition/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <Image Source="..\images\48.png" Width="48" Height="48"/>
                    <TextBlock Grid.Row="1" Text="{Binding Name}" />
                </Grid>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>

Мне нравится использовать присоединенные командные поведения и команды. У Марлона Греча очень хорошая реализация прикрепленного командного поведения. Используя их, мы могли бы затем назначить стиль свойству ListView ItemContainerStyle, которое будет устанавливать команду для каждого ListViewItem.

Здесь мы устанавливаем команду, которая будет запускаться при событии MouseDoubleClick, а CommandParameter будет объектом данных, на который мы нажимаем. Здесь я поднимаюсь вверх по визуальному дереву, чтобы получить команду, которую использую, но вы можете так же легко создавать команды для всего приложения.

<Style x:Key="Local_OpenEntityStyle"
       TargetType="{x:Type ListViewItem}">
    <Setter Property="acb:CommandBehavior.Event"
            Value="MouseDoubleClick" />
    <Setter Property="acb:CommandBehavior.Command"
            Value="{Binding ElementName=uiEntityListDisplay, Path=DataContext.OpenEntityCommand}" />
    <Setter Property="acb:CommandBehavior.CommandParameter"
            Value="{Binding}" />
</Style>

Для команд вы можете либо реализовать ICommand напрямую, либо использовать некоторые вспомогательные средства , подобные тем, которые входят в набор инструментов MVVM .

Я нашел очень простой и понятный способ сделать это с помощью триггеров событий Blend SDK. Чистый MVVM, многоразовый и без кода программной части.

У вас наверняка уже есть что-то вроде этого:

<Style x:Key="MyListStyle" TargetType="{x:Type ListViewItem}">

Теперь включите ControlTemplate для ListViewItem, как это, если вы его еще не используете:

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type ListViewItem}">
      <GridViewRowPresenter Content="{TemplateBinding Content}"
                            Columns="{TemplateBinding GridView.ColumnCollection}" />
    </ControlTemplate>
  </Setter.Value>
 </Setter>

GridViewRowPresenter будет визуальным корнем всех элементов «внутри», составляющих элемент строки списка. Теперь мы могли бы вставить туда триггер для поиска перенаправленных событий MouseDoubleClick и вызвать команду через InvokeCommandAction следующим образом:

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type ListViewItem}">
      <GridViewRowPresenter Content="{TemplateBinding Content}"
                            Columns="{TemplateBinding GridView.ColumnCollection}">
        <i:Interaction.Triggers>
          <i:EventTrigger EventName="MouseDoubleClick">
            <i:InvokeCommandAction Command="{Binding DoubleClickCommand}" />
          </i:EventTrigger>
        </i:Interaction.Triggers>
      </GridViewRowPresenter>
    </ControlTemplate>
  </Setter.Value>
 </Setter>

Если у вас есть визуальные элементы «над» GridRowPresenter (возможно, начиная с сетки), вы также можете поместить туда триггер.

К сожалению, события MouseDoubleClick не генерируются для каждого визуального элемента (например, они происходят из Controls, но не из FrameworkElements). Обходной путь - создать класс из EventTrigger и искать MouseButtonEventArgs с ClickCount, равным 2. Это эффективно отфильтровывает все события, отличные от MouseButtonEvents, и все MoseButtonEvents с ClickCount! = 2.

class DoubleClickEventTrigger : EventTrigger
{
    protected override void OnEvent(EventArgs eventArgs)
    {
        var e = eventArgs as MouseButtonEventArgs;
        if (e == null)
        {
            return;
        }
        if (e.ClickCount == 2)
        {
            base.OnEvent(eventArgs);
        }
    }
}

Теперь мы можем написать это ('h' - это пространство имен вспомогательного класса выше):

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="{x:Type ListViewItem}">
      <GridViewRowPresenter Content="{TemplateBinding Content}"
                            Columns="{TemplateBinding GridView.ColumnCollection}">
        <i:Interaction.Triggers>
          <h:DoubleClickEventTrigger EventName="MouseDown">
            <i:InvokeCommandAction Command="{Binding DoubleClickCommand}" />
          </h:DoubleClickEventTrigger>
        </i:Interaction.Triggers>
      </GridViewRowPresenter>
    </ControlTemplate>
  </Setter.Value>
 </Setter>

Я понимаю, что этому обсуждению год, но есть ли какие-нибудь мысли по поводу этого решения с .NET 4? Я абсолютно согласен с тем, что цель MVVM НЕ в том, чтобы устранить код за файлом. Я также очень твердо уверен, что то, что что-то сложно, не означает, что это лучше. Вот что я вставил в код:

    private void ButtonClick(object sender, RoutedEventArgs e)
    {
        dynamic viewModel = DataContext;
        viewModel.ButtonClick(sender, e);
    }

Вы можете использовать функцию Action Caliburn для сопоставления событий с методами вашей ViewModel. Предполагая, что у вас есть ItemActivatedметод ViewModel, соответствующий XAML будет выглядеть так:

<ListView x:Name="list" 
   Message.Attach="[Event MouseDoubleClick] = [Action ItemActivated(list.SelectedItem)]" >

Для получения дополнительной информации вы можете изучить документацию и образцы Caliburn.

Я считаю, что проще связать команду при создании представления:

var r = new MyView();
r.MouseDoubleClick += (s, ev) => ViewModel.MyCommand.Execute(null);
BindAndShow(r, ViewModel);

В моем случае это BindAndShowвыглядит так (updatecontrols + avalondock):

private void BindAndShow(DockableContent view, object viewModel)
{
    view.DataContext = ForView.Wrap(viewModel);
    view.ShowAsDocument(dockManager);
    view.Focus();
}

Хотя этот подход должен работать с любым методом открытия новых представлений.

Видел решение от рушуи с InuptBindings, но я все еще не мог попасть в область ListViewItem, где не было текста - даже после установки прозрачного фона, поэтому я решил это, используя разные шаблоны.

Этот шаблон предназначен для случаев, когда ListViewItem выбран и активен:

<ControlTemplate x:Key="SelectedActiveTemplate" TargetType="{x:Type ListViewItem}">
   <Border Background="LightBlue" HorizontalAlignment="Stretch">
   <!-- Bind the double click to a command in the parent view model -->
      <Border.InputBindings>
         <MouseBinding Gesture="LeftDoubleClick" 
                       Command="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}, Path=DataContext.ItemSelectedCommand}"
                       CommandParameter="{Binding}" />
      </Border.InputBindings>
      <TextBlock Text="{Binding TextToShow}" />
   </Border>
</ControlTemplate>

Этот шаблон предназначен для случаев, когда ListViewItem выбран и неактивен:

<ControlTemplate x:Key="SelectedInactiveTemplate" TargetType="{x:Type ListViewItem}">
   <Border Background="Lavender" HorizontalAlignment="Stretch">
      <TextBlock Text="{Binding TextToShow}" />
   </Border>
</ControlTemplate>

Это стиль по умолчанию, используемый для ListViewItem:

<Style TargetType="{x:Type ListViewItem}">
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate>
            <Border HorizontalAlignment="Stretch">
               <TextBlock Text="{Binding TextToShow}" />
            </Border>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
   <Style.Triggers>
      <MultiTrigger>
         <MultiTrigger.Conditions>
            <Condition Property="IsSelected" Value="True" />
            <Condition Property="Selector.IsSelectionActive" Value="True" />
         </MultiTrigger.Conditions>
         <Setter Property="Template" Value="{StaticResource SelectedActiveTemplate}" />
      </MultiTrigger>
      <MultiTrigger>
         <MultiTrigger.Conditions>
            <Condition Property="IsSelected" Value="True" />
            <Condition Property="Selector.IsSelectionActive" Value="False" />
         </MultiTrigger.Conditions>
         <Setter Property="Template" Value="{StaticResource SelectedInactiveTemplate}" />
      </MultiTrigger>
   </Style.Triggers>
</Style>

Что мне не нравится, так это повторение TextBlock и его привязки к тексту, я не знаю, я могу обойтись без объявления этого только в одном месте.

Я надеюсь, что это поможет кому-то!

Мне удалось реализовать эту функциональность с помощью .Net 4.7 framework с помощью библиотеки интерактивности, прежде всего убедитесь, что объявили пространство имен в файле XAML

xmlns: i = "http://schemas.microsoft.com/expression/2010/interactivity"

Затем установите Event Trigger с его соответствующим InvokeCommandAction внутри ListView, как показано ниже.

Посмотреть:

<ListView x:Name="lv" IsSynchronizedWithCurrentItem="True" 
          ItemsSource="{Binding Path=AppsSource}"  >
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseDoubleClick">
            <i:InvokeCommandAction CommandParameter="{Binding ElementName=lv, Path=SelectedItem}"
                                   Command="{Binding OnOpenLinkCommand}"/>
        </i:EventTrigger>
    </i:Interaction.Triggers>
    <ListView.View>
        <GridView>
            <GridViewColumn Header="Name" DisplayMemberBinding="{Binding Name}" />
            <GridViewColumn Header="Developed By" DisplayMemberBinding="{Binding DevelopedBy}" />
        </GridView>
    </ListView.View>
</ListView>

Адаптации приведенного выше кода должно быть достаточно, чтобы событие двойного щелчка работало на вашей ViewModel, однако я добавил вам класс Model и View Model из моего примера, чтобы вы могли иметь полное представление.

Модель:

public class ApplicationModel
{
    public string Name { get; set; }

    public string DevelopedBy { get; set; }
}

Просмотреть модель:

public class AppListVM : BaseVM
{
        public AppListVM()
        {
            _onOpenLinkCommand = new DelegateCommand(OnOpenLink);
            _appsSource = new ObservableCollection<ApplicationModel>();
            _appsSource.Add(new ApplicationModel("TEST", "Luis"));
            _appsSource.Add(new ApplicationModel("PROD", "Laurent"));
        }

        private ObservableCollection<ApplicationModel> _appsSource = null;

        public ObservableCollection<ApplicationModel> AppsSource
        {
            get => _appsSource;
            set => SetProperty(ref _appsSource, value, nameof(AppsSource));
        }

        private readonly DelegateCommand _onOpenLinkCommand = null;

        public ICommand OnOpenLinkCommand => _onOpenLinkCommand;

        private void OnOpenLink(object commandParameter)
        {
            ApplicationModel app = commandParameter as ApplicationModel;

            if (app != null)
            {
                //Your code here
            }
        }
}

Если вам нужна реализация класса DelegateCommand .

Вот поведение, которое выполняется на обоих ListBoxи ListView.

public class ItemDoubleClickBehavior : Behavior<ListBox>
{
    #region Properties
    MouseButtonEventHandler Handler;
    #endregion

    #region Methods

    protected override void OnAttached()
    {
        base.OnAttached();

        AssociatedObject.PreviewMouseDoubleClick += Handler = (s, e) =>
        {
            e.Handled = true;
            if (!(e.OriginalSource is DependencyObject source)) return;

            ListBoxItem sourceItem = source is ListBoxItem ? (ListBoxItem)source : 
                source.FindParent<ListBoxItem>();

            if (sourceItem == null) return;

            foreach (var binding in AssociatedObject.InputBindings.OfType<MouseBinding>())
            {
                if (binding.MouseAction != MouseAction.LeftDoubleClick) continue;

                ICommand command = binding.Command;
                object parameter = binding.CommandParameter;

                if (command.CanExecute(parameter))
                    command.Execute(parameter);
            }
        };
    }

    protected override void OnDetaching()
    {
        base.OnDetaching();
        AssociatedObject.PreviewMouseDoubleClick -= Handler;
    }

    #endregion
}

Вот класс расширения, используемый для поиска родителя.

public static class UIHelper
{
    public static T FindParent<T>(this DependencyObject child, bool debug = false) where T : DependencyObject
    {
        DependencyObject parentObject = VisualTreeHelper.GetParent(child);

        //we've reached the end of the tree
        if (parentObject == null) return null;

        //check if the parent matches the type we're looking for
        if (parentObject is T parent)
            return parent;
        else
            return FindParent<T>(parentObject);
    }
}

Использование:

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
xmlns:coreBehaviors="{{Your Behavior Namespace}}"


<ListView AllowDrop="True" ItemsSource="{Binding Data}">
    <i:Interaction.Behaviors>
       <coreBehaviors:ItemDoubleClickBehavior/>
    </i:Interaction.Behaviors>

    <ListBox.InputBindings>
       <MouseBinding MouseAction="LeftDoubleClick" Command="{Binding YourCommand}"/>
    </ListBox.InputBindings>
</ListView>