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

WPF: Command and CommandParameter for UserControl

提问by Moon

I am creating a custom UserControland would like the UC to have a Commandjust like the Button. I am new to WPF.

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

This is what I have tried so far without any luck:

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

WelcomeView.xaml

欢迎视图.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

签名按钮.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

签名按钮.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>

回答by McGarnagle

It looks like the one step you have left is to connect the ICommandinterface to the UI of the control. Start by creating a mouse-click event listener.

看起来您剩下的一步是将ICommand界面连接到控件的 UI。首先创建一个鼠标单击事件侦听器。

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

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

You'll also want to listen to the CanExecuteChangedevent on the Commandinstance, to enable/disable the clickable indicator on the UI.

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

---

---

FootnoteFrom the scope of the question, it might be advisable to extend the WPF Buttoncontrol rather than re-invent its various features. It's possible to customize its appearance and behavior in various ways, while still making use of core features like Visual States(pressed, active, disabled, etc) and the ICommandintegration.

脚注从问题的范围来看，最好扩展 WPF按钮控件而不是重新发明其各种功能。可以通过各种方式自定义其外观和行为，同时仍然可以利用核心功能，如视觉状态（按下、激活、禁用等）和ICommand集成。