Déclencher un événement de double-clic à partir d'un élément WPF ListView à l'aide de MVVM

Dans une application WPF utilisant MVVM, j'ai un contrôle utilisateur avec un élément de liste. Au moment de l'exécution, il utilisera la liaison de données pour remplir la vue de liste avec une collection d'objets.

Quelle est la manière correcte d'attacher un événement de double-clic aux éléments de la vue de liste de sorte que lorsqu'un élément de la vue de liste est double-cliqué, un événement correspondant dans le modèle de vue est déclenché et comporte une référence à l'élément sur lequel l'utilisateur clique?

Comment cela peut-il être fait d'une manière MVVM propre, c'est-à-dire sans code derrière dans la vue?

S'il vous plaît, le code derrière n'est pas du tout une mauvaise chose. Malheureusement, de nombreux membres de la communauté WPF se sont trompés.

MVVM n'est pas un modèle pour éliminer le code derrière. Il s'agit de séparer la partie vue (apparence, animations, etc.) de la partie logique (workflow). De plus, vous pouvez tester unitaire la partie logique.

Je connais suffisamment de scénarios dans lesquels vous devez écrire du code, car la liaison de données n'est pas une solution à tout. Dans votre scénario, je gérerais l'événement DoubleClick dans le code derrière le fichier et déléguerais cet appel au ViewModel.

Des exemples d'applications qui utilisent le code derrière tout en respectant la séparation MVVM peuvent être trouvés ici:

Cadre d'application WPF (WAF) - http://waf.codeplex.com

Je peux faire fonctionner cela avec .NET 4.5. Semble simple et aucun tiers ou code derrière nécessaire.

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

J'aime utiliser les comportements et commandes de commande attachés . Marlon Grech a une très bonne implémentation des comportements de commande attachés. En utilisant ceux-ci, nous pourrions alors attribuer un style à la propriété ItemContainerStyle de ListView qui définira la commande pour chaque ListViewItem.

Ici, nous définissons la commande à déclencher sur l'événement MouseDoubleClick, et le CommandParameter, sera l'objet de données sur lequel nous cliquons. Ici, je voyage dans l'arborescence visuelle pour obtenir la commande que j'utilise, mais vous pouvez tout aussi facilement créer des commandes à l'échelle de l'application.

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

Pour les commandes, vous pouvez soit implémenter directement une ICommand , soit utiliser certains des helpers tels que ceux fournis dans MVVM Toolkit .

J'ai trouvé un moyen très simple et propre de le faire avec les déclencheurs d'événements du SDK Blend. Clean MVVM, réutilisable et sans code-behind.

Vous avez probablement déjà quelque chose comme ça:

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

Incluez maintenant un ControlTemplate pour le ListViewItem comme celui-ci si vous n'en utilisez pas déjà un:

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

Le GridViewRowPresenter sera la racine visuelle de tous les éléments "à l'intérieur" constituant un élément de ligne de liste. Nous pourrions maintenant y insérer un déclencheur pour rechercher les événements routés MouseDoubleClick et appeler une commande via InvokeCommandAction comme ceci:

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

Si vous avez des éléments visuels "au-dessus" du GridRowPresenter (probablement en commençant par une grille), vous pouvez également y placer le Trigger.

Malheureusement, les événements MouseDoubleClick ne sont pas générés à partir de chaque élément visuel (ils proviennent de Controls, mais pas de FrameworkElements par exemple). Une solution de contournement consiste à dériver une classe de EventTrigger et à rechercher MouseButtonEventArgs avec un ClickCount de 2. Cela filtre efficacement tous les non-MouseButtonEvents et tous les MoseButtonEvents avec un 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);
        }
    }
}

Maintenant, nous pouvons écrire ceci ('h' est l'espace de noms de la classe d'assistance ci-dessus):

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

Je me rends compte que cette discussion date d'un an, mais avec .NET 4, y a-t-il des réflexions sur cette solution? Je suis tout à fait d'accord que le but de MVVM n'est PAS d'éliminer un code derrière un fichier. Je suis également très convaincu que ce n'est pas parce que quelque chose est compliqué que c'est mieux. Voici ce que j'ai mis dans le code derrière:

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

Vous pouvez utiliser la fonction Action de Caliburn pour mapper des événements à des méthodes sur votre ViewModel. En supposant que vous ayez une ItemActivatedméthode sur votre ViewModel, le XAML correspondant ressemblerait à ceci:

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

Pour plus de détails, vous pouvez consulter la documentation et les exemples de Caliburn.

Je trouve plus simple de lier la commande lorsque la vue est créée:

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

Dans mon cas, cela BindAndShowressemble à ceci (updatecontrols + avalondock):

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

Bien que l'approche devrait fonctionner avec la méthode que vous avez pour ouvrir de nouvelles vues.

J'ai vu la solution de rushui avec les InuptBindings, mais je ne pouvais toujours pas atteindre la zone de ListViewItem où il n'y avait pas de texte - même après avoir défini l'arrière-plan sur transparent, je l'ai donc résolu en utilisant différents modèles.

Ce modèle est utilisé lorsque le ListViewItem a été sélectionné et est actif:

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

Ce modèle est utilisé lorsque le ListViewItem a été sélectionné et est inactif:

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

Il s'agit du style par défaut utilisé pour 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>

Ce que je n'aime pas, c'est la répétition du TextBlock et sa liaison de texte, je ne sais pas que je peux me déplacer en déclarant cela dans un seul endroit.

J'espère que ça aidera quelqu'un!

J'ai réussi à faire cette fonctionnalité avec le framework .Net 4.7 en utilisant la bibliothèque d'interactivité, tout d'abord assurez-vous de déclarer l'espace de noms dans le fichier XAML

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

Ensuite, définissez le déclencheur d'événement avec son InvokeCommandAction respectif dans le ListView comme ci-dessous.

Vue:

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

L'adaptation du code ci-dessus devrait suffire à faire fonctionner l'événement de double-clic sur votre ViewModel, mais je vous ai ajouté la classe Model and View Model de mon exemple afin que vous puissiez avoir une idée complète.

Modèle:

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

    public string DevelopedBy { get; set; }
}

Voir le modèle:

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

Au cas où vous auriez besoin de l'implémentation de la classe DelegateCommand .

Voici un comportement qui fait cela à la fois sur ListBoxet 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
}

Voici la classe d'extension utilisée pour trouver le parent.

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

Usage:

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>