Question

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

我正在尝试使用户控件的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>

这是控件列表在绑定到数据后的样子。

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

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

Answer 1

这是使用行为和/或触发器的好方案。以下是使用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>

viewmodel：

使用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">  <cmd:EventToCommand Command="{Binding Mode=OneWay, Path=SomeCommand}" /> </i:EventTrigger> </i:Interaction.Triggers> </local:MyUserControl> </Grid> </Window>

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

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

在我们的视图模型中：

public class MyViewModel { //public void SomeMethod() => MessageBox.Show("Hi there!"); public RelayCommand SomeCommand => new RelayCommand(() => MessageBox.Show("Hi there!")); }

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

1 个答案: