C＃ - 在多个UIELEMENT类型集合上单击事件

Question

我正在画布中显示不同类型（矩形和图像）的UI元素的集合。两者都源自UIELEMENT类型。

<ItemsControl ItemsSource="{Binding UiElementsCollection}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas HorizontalAlignment="Left" VerticalAlignment="Top">
            </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

一切都很好，但是我想将事件触发到鼠标事件 - 当我单击/将特定元素拖到画布上时，我想接收此对象（矩形或图像）。我想这样做MVVM模式。我该怎么做？

Answer 1

您可以实现一个附加的行为，该行为可以将源集合中所有UIELEMENTS的PreviewMouseleftButtondown连接到视图模型的命令：

public class MyBehavior
{
    public static readonly DependencyProperty MouseLeftButtonDownCommandProperty
        = DependencyProperty.RegisterAttached("MouseLeftButtonDownCommand",
            typeof(ICommand), typeof(MyBehavior), new FrameworkPropertyMetadata(new PropertyChangedCallback(OnMouseLeftButtonDownCommandPropertyChanged)));
    public static void SetMouseLeftButtonDownCommand(UIElement element, ICommand value)
    {
        element.SetValue(MouseLeftButtonDownCommandProperty, value);
    }
    public static ICommand GetMouseLeftButtonDownCommand(UIElement element)
    {
        return (ICommand)element.GetValue(MouseLeftButtonDownCommandProperty);
    }
    private static void OnMouseLeftButtonDownCommandPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        UIElement element = d as UIElement;
        element.PreviewMouseLeftButtonDown += Element_MouseLeftButtonDown;
    }
    private static void Element_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
    {
        UIElement element = sender as UIElement;
        ICommand command = GetMouseLeftButtonDownCommand(element);
        if (command != null)
            command.Execute(element);
    }
}

查看：

<Window x:Class="WpfApplication1.Window6"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="Window6" Height="300" Width="300">
    <Window.DataContext>
        <local:ViewModel />
    </Window.DataContext>
    <Grid>
        <ItemsControl ItemsSource="{Binding UiElementsCollection}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas HorizontalAlignment="Left" VerticalAlignment="Top">
                    </Canvas>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Setter Property="local:MyBehavior.MouseLeftButtonDownCommand" 
                            Value="{Binding DataContext.TheCommand, RelativeSource={RelativeSource AncestorType=Window}}" />
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
    </Grid>
</Window>

查看模型：

public class ViewModel
{
    public ObservableCollection<UIElement> UiElementsCollection { get; } = new ObservableCollection<UIElement>()
        {
            new Button { Content = "btn" },
            new Border { Background = Brushes.Yellow, Width = 10, Height = 10 }
        };
    public ICommand TheCommand { get; } = new DelegateCommand<UIElement>(element =>
    {
        MessageBox.Show(element.GetType().ToString());
    });
}

您显然需要实现ICommand接口。delegatecommand类可在Prism中获得：https：//github.com/prismlibrary/prism/blob/master/master/source/prism/commands/delegatecommand.cs

命令对于MVVM应用程序非常重要，因此您可能已经知道了。您可以参考以下博客文章，以获取有关如何使用MVVM中命令处理事件的更多信息/