Disparando um evento de clique duplo de um item WPF ListView usando MVVM

Em um aplicativo WPF usando MVVM, eu tenho um controle de usuário com um item de exibição de lista. Em tempo de execução, ele usará databinding para preencher o listview com uma coleção de objetos.

Qual é a maneira correta de anexar um evento de clique duplo aos itens na visualização em lista para que, quando um item na visualização em lista for clicado duas vezes, um evento correspondente no modelo de visualização seja disparado e tenha uma referência ao item clicado?

Como isso pode ser feito de uma forma MVVM limpa, ou seja, sem código atrás no View?

Por favor, code behind não é uma coisa ruim. Infelizmente, muitas pessoas na comunidade WPF entenderam isso errado.

MVVM não é um padrão para eliminar o código por trás. É para separar a parte da visualização (aparência, animações, etc.) da parte lógica (fluxo de trabalho). Além disso, você pode testar a unidade da parte lógica.

Eu conheço cenários suficientes em que você precisa escrever código porque a vinculação de dados não é uma solução para tudo. Em seu cenário, eu lidaria com o evento da DoubleClick no arquivo code behind e delegaria esta chamada ao ViewModel.

Aplicativos de exemplo que usam code behind e ainda cumprem a separação MVVM podem ser encontrados aqui:

WPF Application Framework (WAF) - http://waf.codeplex.com

Consigo fazer isso funcionar com o .NET 4.5. Parece simples e nenhum terceiro ou código é necessário.

<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>

Eu gosto de usar comportamentos e comandos de comando anexados . Marlon Grech tem uma implementação muito boa do Attached Command Behaviors. Usando isso, poderíamos atribuir um estilo à propriedade ItemContainerStyle do ListView que definirá o comando para cada ListViewItem.

Aqui definimos o comando a ser disparado no evento MouseDoubleClick, e o CommandParameter, será o objeto de dados no qual clicaremos. Aqui estou subindo na árvore visual para obter o comando que estou usando, mas você poderia facilmente criar comandos para todo o aplicativo.

<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>

Para os comandos, você pode implementar um ICommand diretamente ou usar alguns dos ajudantes como aqueles que vêm no MVVM Toolkit .

Eu descobri uma maneira muito fácil e limpa de fazer isso com os gatilhos de eventos do Blend SDK. MVVM limpo, reutilizável e sem code-behind.

Você provavelmente já tem algo assim:

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

Agora inclua um ControlTemplate para ListViewItem como este se você ainda não usa um:

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

O GridViewRowPresenter será a raiz visual de todos os elementos "internos" que constituem um elemento de linha da lista. Agora poderíamos inserir um gatilho lá para procurar eventos roteados MouseDoubleClick e chamar um comando por meio de InvokeCommandAction como este:

<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>

Se você tiver elementos visuais "acima" do GridRowPresenter (provavelmente começando com uma grade), você também pode colocar o Trigger lá.

Infelizmente, os eventos MouseDoubleClick não são gerados a partir de todos os elementos visuais (eles são de Controls, mas não de FrameworkElements, por exemplo). Uma solução alternativa é derivar uma classe de EventTrigger e procurar MouseButtonEventArgs com ClickCount de 2. Isso filtra efetivamente todos os não-MouseButtonEvents e todos os MoseButtonEvents com 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);
        }
    }
}

Agora podemos escrever isso ('h' é o namespace da classe auxiliar acima):

<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>

Sei que essa discussão já existe há um ano, mas com o .NET 4, há alguma ideia sobre essa solução? Eu concordo totalmente que o objetivo do MVVM NÃO é eliminar um arquivo code-behind. Também sinto fortemente que só porque algo é complicado, não significa que seja melhor. Aqui está o que coloquei no código por trás:

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

Você pode usar o recurso Action do Caliburn para mapear eventos para métodos em seu ViewModel. Supondo que você tenha um ItemActivatedmétodo em seu ViewModel, o XAML correspondente seria semelhante a:

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

Para obter mais detalhes, você pode examinar a documentação e as amostras do Caliburn.

Estou achando mais simples vincular o comando quando a visualização é criada:

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

No meu caso se BindAndShowparece com isto (updatecontrols + avalondock):

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

Embora a abordagem deva funcionar com qualquer método que você tenha para abrir novas visualizações.

Eu vi a solução do rushui com o InuptBindings, mas ainda não consegui acertar a área do ListViewItem onde não havia texto - mesmo depois de definir o fundo como transparente, então resolvi usando diferentes modelos.

Este modelo é para quando o ListViewItem foi selecionado e está ativo:

<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>

Este modelo é para quando o ListViewItem foi selecionado e está inativo:

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

Este é o estilo padrão usado para 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>

O que eu não gosto é a repetição do TextBlock e sua vinculação de texto, não sei se posso declarar isso em apenas um local.

Espero que isso ajude alguém!

Consigo fazer essa funcionalidade com a estrutura .Net 4.7 usando a biblioteca de interatividade, antes de mais nada, certifique-se de declarar o namespace no arquivo XAML

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

Em seguida, defina o Event Trigger com seu respectivo InvokeCommandAction dentro do ListView como abaixo.

Visão:

<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>

Adaptar o código acima deve ser o suficiente para fazer o evento de clique duplo funcionar em seu ViewModel, no entanto, adicionei a você a classe Model e a classe View Model do meu exemplo para que você tenha uma ideia completa.

Modelo:

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

    public string DevelopedBy { get; set; }
}

Ver modelo:

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
            }
        }
}

Caso você precise da implementação da classe DelegateCommand .

Aqui está um comportamento que faz isso em ambos ListBoxe 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
}

Aqui está a classe de extensão usada para localizar o pai.

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);
    }
}

Uso:

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>