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/Source/Prism/Commands/DelegateCommand.cs

命令对MVVM应用程序非常重要，所以你可能已经知道了。您可以参考以下博客文章，了解有关如何使用MVVM中的命令处理事件的更多信息：https://blog.magnusmontin.net/2013/06/30/handling-events-in-an-mvvm-wpf-application/