如何使用 ICommand 实现 DockPanel 或图像点击？答案

【问题标题】：How to Implement DockPanel or Image click using ICommand?如何使用 ICommand 实现 DockPanel 或图像点击？
【发布时间】：2013-11-16 18:05:35
【问题描述】：

在我开始之前，这里有一点背景。我开始在 WPF 中创建我的应用程序，就像在 WinForms 中编程一样。显然，这完全是在绕过WPF的强大。所以现在我已经阅读了有关 WPF 和 MVVM 框架的更多信息，我开始调整我的应用程序以在模型 - 视图 - 视图模型方式下工作。

在此之前，我曾经在我的 Window 中进行了代码隐藏，只是处理了 MouseDown RoutedEvents，然后继续并提示一个窗口进行签名。我的 DockPanel 和 Image 似乎没有 Command。

如何以 MVVM 方式执行此操作？ RoutedEvents 适合这种情况吗？

【问题讨论】：

您可以使用行为或附加属性，在那里您可以注册事件并调用命令
不要用行为和其他东西使整个事情复杂化，而是将所有 UI 元素放在 Button 的 ControlTemplate 中并使用它的 Command。
@HighCore Ahh ...所以我基本上会保持我的停靠面板的外观但使用按钮的命令属性？我认为这就是我要走的路...随时将其发布为答案

标签： wpf vb.net image mvvm dockpanel

【解决方案1】：

不要用行为和其他东西使整个事情复杂化，而是将所有 UI 元素放在按钮的 ControlTemplate 中并使用它的命令：

<Button Command="{Binding YourCommand}">
   <Button.Template>
      <ControlTemplate TargetType="Button">
          <DockPanel>
             <Image/>
             <!-- Whatever -->
          </DockPanel>
      </ControlTemplate>
   </Button.Template>
</Button>

【讨论】：

【解决方案2】：

实现图片点击：

编写一个扩展System.Windows.Control.Image的类。
创建RoutedEvent和RoutedEventHandler方便鼠标点击事件。
覆盖 OnMouseLeftButtonDown

在我的示例中，我评估了点击次数，因为不知道如何更好地做到这一点

public class ImageHelper : Image
    {
        public static readonly RoutedEvent MouseLeftButtonClick =
            EventManager.RegisterRoutedEvent(
                "MouseLeftButtonClick",
                RoutingStrategy.Bubble,
                typeof(RoutedEventHandler),
                typeof(ImageHelper));

        public event RoutedEventHandler MouseLeftButtonClickEvent
        {
            add
            {
                AddHandler(MouseLeftButtonClick, value);
            }
            remove
            {
                RemoveHandler(MouseLeftButtonClick, value);
            }
        }

        protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
        {
            if (e.ClickCount == 1)
            {
                RaiseEvent(new MouseLeftButtonClickEventArgs(
                    MouseLeftButtonClick, this));
            }
            base.OnMouseLeftButtonDown(e);
        }

        public class MouseLeftButtonClickEventArgs : RoutedEventArgs
        {
            public MouseLeftButtonClickEventArgs(RoutedEvent routedEvent, object source)
                : base(routedEvent, source)
            {
               // some code.....
            }
        }
    }

XAML：

<local:ImageHelper>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonClickEvent">
                    <i:InvokeCommandAction Command="{Binding Path=MyCommand}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
 </local:ImageHelper>

【讨论】：

我明白了...感谢您的回答，不过似乎有点多。我试试看

【解决方案3】：

您可以使用Blend SDK 附带的交互触发器。

步骤 -

添加对程序集System.Windows.Interactivity的引用。
在 XAML 文件中添加对应的命名空间

xmlns:interactivity="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

你可以像例子一样使用它-

<StackPanel>
   <interactivity:Interaction.Triggers>
      <interactivity:EventTrigger EventName="MouseDown">
        <interactivity:InvokeCommandAction Command="{Binding CloseCommand}"/>
      </interactivity:EventTrigger>
   </interactivity:Interaction.Triggers>            
</StackPanel>

这里 CloseCommand 在您的 ViewModel 类中。

【讨论】：

感谢您的回答，我会对此进行更多研究。