Question

I am creating a custom UserControl and would like the UC to have a Command just like the Button. I am new to WPF.

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

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

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

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 CanExecuteChanged event on the Command instance, to enable/disable the clickable indicator on the UI.

---

Footnote From the scope of the question, it might be advisable to extend the WPF Button control 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 ICommand integration.