MVVM kullanarak bir WPF ListView öğesinden çift tıklama olayını tetikleme

Question 1

MVVM kullanan bir WPF uygulamasında, listview öğesi olan bir kullanıcı denetimim var. Çalışma zamanında, liste görünümünü bir nesne koleksiyonuyla doldurmak için veri bağlamayı kullanır.

Liste görünümündeki öğelere çift tıklama olayı eklemenin doğru yolu nedir, böylece liste görünümündeki bir öğe çift tıklandığında, görünüm modelinde karşılık gelen bir olay tetiklenir ve tıklanan öğeye bir referansı olur?

Temiz bir MVVM yöntemiyle, yani Görünümde kod olmadan nasıl yapılabilir?

Question 2

Lütfen, arkasındaki kod kötü bir şey değildir. Ne yazık ki, WPF topluluğundaki pek çok kişi bunu yanlış anladı.

MVVM, arkasındaki kodu ortadan kaldıracak bir model değildir. Görünüm bölümünü (görünüm, animasyonlar, vb.) Mantık bölümünden (iş akışı) ayırmaktır. Ayrıca, mantık bölümünü birim test edebilirsiniz.

Veri bağlama her şeye bir çözüm olmadığı için arkasına kod yazmanız gereken yeterince senaryo biliyorum. Senaryonuzda, dosyanın arkasındaki kodda DoubleClick olayını idare eder ve bu çağrıyı ViewModel'e devrederdim.

Arkasındaki kodu kullanan ve yine de MVVM ayrımını gerçekleştiren örnek uygulamalar burada bulunabilir:

WPF Uygulama Çerçevesi (WAF) - http://waf.codeplex.com

Question 3

Bunu .NET 4.5 ile çalıştırabiliyorum. Basit görünüyor ve arkasında üçüncü taraf veya kod gerekli değil.

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

Question 4

Ekli Komut Davranışları ve Komutları kullanmayı seviyorum . Marlon Grech , Ekli Komut Davranışları'nın çok iyi bir uygulamasına sahiptir. Bunları kullanarak, ListView'ın ItemContainerStyle özelliğine her ListViewItem için komutu ayarlayacak bir stil atayabiliriz .

Burada MouseDoubleClick olayında çalıştırılacak komutu belirledik ve CommandParameter, tıkladığımız veri nesnesi olacaktır. Burada kullandığım komutu almak için görsel ağaçta yukarı çıkıyorum, ancak aynı şekilde uygulama çapında komutlar da oluşturabilirsiniz.

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

Komutlar için, doğrudan bir ICommand uygulayabilir veya MVVM Toolkit ile gelenler gibi bazı yardımcıları kullanabilirsiniz .

Question 5

Blend SDK Event tetikleyicileri ile bunu yapmanın çok kolay ve temiz bir yolunu buldum. Temiz MVVM, yeniden kullanılabilir ve arka planda kod yok.

Muhtemelen zaten böyle bir şeye sahipsiniz:

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

Zaten kullanmıyorsanız şimdi ListViewItem için bunun gibi bir ControlTemplate ekleyin:

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

GridViewRowPresenter, bir liste satırı öğesini oluşturan "içindeki" tüm öğelerin görsel kökü olacaktır. Şimdi MouseDoubleClick yönlendirilmiş olayları aramak için oraya bir tetikleyici ekleyebilir ve InvokeCommandAction aracılığıyla şu şekilde bir komut çağırabiliriz:

<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'ın "üstünde" görsel öğeleriniz varsa (olasılıkla bir ızgarayla başlayarak) Tetikleyiciyi oraya da koyabilirsiniz.

Ne yazık ki MouseDoubleClick olayları her görsel öğeden oluşturulmaz (bunlar Denetimlerden, ancak örneğin FrameworkElements'ten değil). Bir geçici çözüm, EventTrigger'dan bir sınıf türetmek ve ClickCount 2 olan MouseButtonEventArgs'ı aramaktır. Bu, bir ClickCount! = 2 ile MouseButtonEvents olmayan ve tüm MoseButtonEvents etkin bir şekilde filtreler.

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

Şimdi bunu yazabiliriz ('h' yukarıdaki yardımcı sınıfın Ad Alanıdır):

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

Question 6

Bu tartışmanın bir yaşında olduğunun farkındayım, ancak .NET 4 ile bu çözüm hakkında herhangi bir düşünceniz var mı? MVVM'nin amacının dosyanın arkasındaki bir kodu ortadan kaldırmak OLMADIĞINA kesinlikle katılıyorum. Ayrıca bir şeyin karmaşık olmasının daha iyi olduğu anlamına gelmediğini de çok kuvvetli hissediyorum. İşte kodun arkasına koyduğum şey:

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

Question 7

ViewModel'inizdeki olayları yöntemlerle eşlemek için Caliburn'un Eylem özelliğini kullanabilirsiniz. ItemActivatedÜzerinde bir yönteminiz olduğunu varsayarsak ViewModel, karşılık gelen XAML şöyle görünür:

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

Daha fazla ayrıntı için Caliburn'un belgelerini ve örneklerini inceleyebilirsiniz.

Question 8

Görünüm oluşturulduğunda komutu bağlamayı daha kolay buluyorum:

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

Benim durumumda BindAndShowşöyle görünüyor (updatecontrols + avalondock):

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

Yine de yaklaşım, yeni görüşler açmak için sahip olduğunuz yöntemle çalışmalıdır.

Question 9

Rushui'den çözümü gördüm ile ancak ListViewItem alanında metnin olmadığı alana hala ulaşamadım - arka planı şeffaf olarak ayarladıktan sonra bile, bu yüzden farklı şablonlar kullanarak çözdüm.

Bu şablon, ListViewItem seçildiğinde ve etkin olduğunda kullanılır:

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

Bu şablon, ListViewItem seçildiğinde ve etkin olmadığında kullanılır:

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

Bu, ListViewItem için kullanılan Varsayılan stildir:

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

Sevmediğim şey, TextBlock'un tekrarlanması ve metin bağlaması, II'nin bunu sadece tek bir yerde ilan ederek etrafta dolaşabileceğini bilmiyorum.

Umarım bu birine yardımcı olur!

Question 10

Bu işlevselliği.

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

Ardından, ListView içindeki ilgili InvokeCommandAction ile Olay Tetikleyicisini aşağıdaki gibi ayarlayın.

Görünüm:

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

Yukarıdaki kodu uyarlamak, çift tıklama olayının ViewModel'inizde çalışması için yeterli olacaktır, ancak size tüm fikre sahip olabilmeniz için örneğimden Model ve Model Görüntüle sınıfını ekledim.

Model:

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

    public string DevelopedBy { get; set; }
}

Modeli Görüntü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
            }
        }
}

DelegateCommand sınıfının uygulanmasına ihtiyacınız olması durumunda .

Question 11

İşte hem ListBoxve hem de bunu başaran bir davranış 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
}

Üst öğeyi bulmak için kullanılan uzantı sınıfı burada.

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

Kullanım:

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>