通过WPF中的命令绑定使整个用户控件可单击

Posted 2023-01-26

我想让整个用户控件响应触摸/点击事件。并且，我想通过绑定到命令的视图模型来实现它。

我试图使用户控件的ENTIRE内容可单击，但我不知道绑定命令的位置。我知道如何将按钮绑定到命令，但实际上，我希望整个控件都是一个按钮。

这是用户控件的内容

<Grid x:Name="gridContent1" Margin="5,0,20,0">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="6*" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="2*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions >
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <Label Grid.Row="0" Grid.Column="0" Content="Binding ShortName"  />
    <Label Grid.Row="0" Grid.Column="1" Content="Binding Value" ContentStringFormat="0.000"/>
    <Label Grid.Row="0" Grid.Column="2" Content="Binding UnitOfMeasurement"  />
    <Image Grid.Row="0" Grid.Column="3" Source="Binding TrendDirection, Converter=StaticResource converterTrendDirection" Style="StaticResource TrendImage" Width="48" Height="32" HorizontalAlignment="Right" />
</Grid>

这是控件列表一旦绑定到数据就会看起来像。

我试图让用户点击控件并转到测量的详细信息图表视图。

视图模型已经定义了一个命令，所以我想绑定它。

答案

这是使用行为和/或触发器的好方案。以下是使用Blend和BlendSDK for WPF制作的简单示例：

用户控件：

<UserControl x:Class="BehaviorSample.MyUserControl"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:BehaviorSample"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid Background="Red"/>
</UserControl>

视图模型：

使用System.Windows;

namespace BehaviorSample

    public class MyViewModel
    
        public void SomeMethod() => MessageBox.Show("Hi there!");
    

主窗口xaml：

<Window
        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:BehaviorSample"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MyViewModel/>
    </Window.DataContext>
    <Grid>
        <local:MyUserControl/>
    </Grid>
</Window>

然后我们需要将以下命名空间添加到我们的主窗口xaml：

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

我们改变我们的标记如下：

  <Grid>
        <local:MyUserControl>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <ei:CallMethodAction MethodName="SomeMethod" TargetObject="Binding Mode=OneWay"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </local:MyUserControl>
    </Grid>

这里我们使用CallMethodAction操作，但您可以根据需要使用自定义行为。

请注意，您可以手动编写标记，但您可能希望尝试使用Blend，因为这样更容易。

编辑有几个第三方解决方案实现一个事件来命令行为，如MvvmLight，Devexpress WPF等。但如果你不想添加额外的依赖项，显示的解决方案一定很好

编辑。使用MvvmLight EventToCommand触发操作

主窗口xaml

<Window
    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:BehaviorSample"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Platform"
    x:Class="BehaviorSample.MainWindow"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:MyViewModel />
    </Window.DataContext>
    <Grid>
        <local:MyUserControl>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseLeftButtonDown">
                    <!--<ei:CallMethodAction MethodName="SomeMethod" TargetObject="Binding Mode=OneWay" />-->
                    <cmd:EventToCommand Command="Binding Mode=OneWay, Path=SomeCommand" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </local:MyUserControl>
    </Grid>
</Window>

注意我们添加了以下命名空间：

 xmlns:cmd="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Platform"

在我们的viewmodel中：

public class MyViewModel

    //public void SomeMethod() => MessageBox.Show("Hi there!");

    public RelayCommand SomeCommand => new RelayCommand(() => MessageBox.Show("Hi there!"));