Button User Control WPF

Question

I am trying to create a user control library starting with buttons. I have managed to create a button.xaml with code as shown below;

<UserControl x:Class="SPECTRE.UserControls.Buttons.button"
         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:SPECTRE.UserControls.Buttons"
         mc:Ignorable="d" 
         Height="Auto" Width="Auto"
         x:Name="RootElement">
<UserControl.Resources>
    <Style x:Key="DangerButton" TargetType="{x:Type Button}">
        <Setter Property="MinWidth" Value="100"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="HorizontalAlignment" Value="Center"/>
        <Setter Property="Height" Value="35"/>
        <Setter Property="FontWeight" Value="SemiBold"/>
        <Setter Property="Background" Value="#F12427"/>
        <Setter Property="Foreground" Value="White"/>
        <Setter Property="FontSize" Value="15"/>
        <!--<Setter Property="Content" Value="Go"/>-->
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}">
                    <Border
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        CornerRadius="5">
                        <ContentPresenter
                        HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        TextBlock.Foreground="{TemplateBinding Foreground}"
                        Margin="0,0,0,5"
                        Content="Button Text"/>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" Value="#D6E006"/>
                            <Setter Property="Cursor" Value="Hand"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>

<StackPanel>
    <!--Content should be dynamic-->
    <Button  Style="{StaticResource DangerButton}" Name="button1"/>
</StackPanel>

And I have a user control file video.xaml where the button is instantiated as below;

<Buttons:button/>

I am trying to make the button content dynamic but I can't seem to get it right. I tried this here but it couldn't work. What do I need to do?

Answer 1

The only custom thing you have defined there is the Style . Move the Style to App.xaml or another resource dictionary and then simply replace the UserControl with a Button element:

<Button Style="{StaticResource DangerButton}" Name="button1" Content="Content..."/>

Another option may to to create a custom DangerButton control that inherits from Button :

public class DangerButton : Button
{
    static DangerButton()
    {
        DefaultStyleKeyProperty.OverrideMetadata(typeof(DangerButton),
            new FrameworkPropertyMetadata(typeof(DangerButton)));
    }
}

In this case, you should define the default Style for the control in a resource dictionary named (by convention) themes/generic.xaml .

So move your current Style there and remove x:Key="DangerButton" from it. You can then use the custom control like this:

<Buttons:DangerButton Content="Content..." />

If you choose to simply wrap the Button in a UserControl , you won't be able to set any of the Button 's properties directly from the control where you consume the UserControl . You will then have to add properties to the UserControl and bind these to the Button .