WPF:用户控件的命令和命令参数

Question

我正在创建一个自定义的 UserControl 并希望 UC 有一个 Command 就像 Button 一样。我是 WPF 新手。

这是我到目前为止没有任何运气的尝试:

WelcomeView.xaml

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="150"/>
    </Grid.RowDefinitions>

    <Controls:SignedButton Grid.Row="1" VerticalAlignment="Top" Width="245" Height="45" Foreground="#FFFFFF" 
                           LeftSign="+" Text="Add an account" TextSize="20" 
                           ButtonBackground="#3A5795" HoverBackground="#C41AD7" HoverOpacity="1"
                           Command="{x:Static Infrastructure:ApplicationCommands.NavigateCommand}" 
                           CommandParameter="{x:Type Views:AddAccountView}"/>
</Grid>

SignedButton.xaml.cs

public partial class SignedButton : UserControl
{

    public static DependencyProperty ButtonBackgroundProperty =
        DependencyProperty.Register("ButtonBackground", typeof (string), typeof (SignedButton));

    public static DependencyProperty CommandParameterProperty =
        DependencyProperty.Register("CommandParameter", typeof (object), typeof (SignedButton));

    public static DependencyProperty CommandProperty =
        DependencyProperty.Register("Command", typeof (ICommand), typeof (SignedButton));

    public static DependencyProperty HoverBackgroundProperty =
        DependencyProperty.Register("HoverBackground", typeof (string), typeof (SignedButton));

    public static DependencyProperty HoverOpacityProperty =
        DependencyProperty.Register("HoverOpacity", typeof (double), typeof (SignedButton));

    public static DependencyProperty LeftSignProperty =
        DependencyProperty.Register("LeftSign", typeof (string), typeof (SignedButton));

    public static DependencyProperty RightSignProperty =
        DependencyProperty.Register("RightSign", typeof (string), typeof (SignedButton));

    public static DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof (string), typeof (SignedButton));

    public static DependencyProperty TextSizeProperty =
        DependencyProperty.Register("TextSize", typeof (double), typeof (SignedButton));

    public SignedButton()
    {
        InitializeComponent();
    }

    public string ButtonBackground
    {
        get { return (string) GetValue(ButtonBackgroundProperty); }
        set { SetValue(ButtonBackgroundProperty, value); }
    }

    public ICommand Command
    {
        get { return (ICommand) GetValue(CommandProperty); }
        set { SetValue(CommandProperty, value); }
    }

    public object CommandParameter
    {
        get { return GetValue(CommandParameterProperty); }
        set { SetValue(CommandParameterProperty, value); }
    }

    public string HoverBackground
    {
        get { return (string) GetValue(HoverBackgroundProperty); }
        set { SetValue(HoverBackgroundProperty, value); }
    }

    public double HoverOpacity
    {
        get { return (double) GetValue(HoverOpacityProperty); }
        set { SetValue(HoverOpacityProperty, value); }
    }

    public string LeftSign
    {
        get { return (string) GetValue(LeftSignProperty); }
        set { SetValue(LeftSignProperty, value); }
    }

    public string RightSign
    {
        get { return (string) GetValue(RightSignProperty); }
        set { SetValue(RightSignProperty, value); }
    }

    public string Text
    {
        get { return (string) GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public double TextSize
    {
        get { return (double) GetValue(TextSizeProperty); }
        set { SetValue(TextSizeProperty, value); }
    }
}

SignedButton.xaml

<UserControl x:Class="Client.Infrastructure.Controls.SignedButton"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="45" d:DesignWidth="245" 
             DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <UserControl.Resources>
        <FontFamily x:Key="OpenSans">. . .</FontFamily>
        <Storyboard x:Key="OnMouseEnter">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
                . . .
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
                . . .
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
        <Storyboard x:Key="OnMouseLeave">
            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="grid">
                . . .
            </DoubleAnimationUsingKeyFrames>
            <ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)" Storyboard.TargetName="grid">
                . . .
            </ColorAnimationUsingKeyFrames>
        </Storyboard>
    </UserControl.Resources>
    <UserControl.Triggers>
        <EventTrigger RoutedEvent="Mouse.MouseEnter">
            . . .
        </EventTrigger>
        <EventTrigger RoutedEvent="Mouse.MouseLeave">
            . . .
        </EventTrigger>
    </UserControl.Triggers>
    <Grid x:Name="grid" Cursor="Hand" Background="{Binding ButtonBackground}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="50"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="50"/>
        </Grid.ColumnDefinitions>
        <TextBlock Text="{Binding LeftSign}" 
                   FontFamily="{DynamicResource OpenSans}" FontSize="{Binding TextSize}"
                   HorizontalAlignment="Center" VerticalAlignment="Center"/>
        <TextBlock Text="{Binding Text}" 
                   FontFamily="{DynamicResource OpenSans}" FontSize="{Binding TextSize}"
                   HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1"/>
        <TextBlock Text="{Binding RightSign}" 
                   FontFamily="{DynamicResource OpenSans}" FontSize="{Binding TextSize}"
                   HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="2"/>
    </Grid>
</UserControl>

Answer 1

看起来您剩下的一步就是将 ICommand 接口(interface)连接到控件的 UI。首先创建鼠标单击事件监听器。

public SignedButton()
{
    InitializeComponent();
    this.MouseUp += new MouseButtonEventHandler(MyClassContent_MouseUp);
}

void MyClassContent_MouseUp(object sender, MouseButtonEventArgs e)
{
    Command.Execute(CommandParameter);
}

您还需要监听 Command 实例上的 CanExecuteChanged 事件，以启用/禁用 UI 上的可点击指示器。

---

脚注 从问题的范围来看，最好扩展 WPF Button控制而不是重新发明其各种功能。有可能 customize its appearance and behavior in various ways ，同时仍然使用 Visual States 等核心功能(按下、激活、禁用等)和 ICommand 集成。