XAML create button template

Question

I have created a custom looking button in XAML, which is defined as below:

<Button Margin="10,30,10,10" Height="100" Grid.Column="1" Command="{Binding HelpCommand}">
                <Button.Template>
                    <ControlTemplate>
                        <Border x:Name="Overlay" CornerRadius="15" Background="#4F81BD">
                            <TextBlock Foreground="Black" 
                                       Text="Help"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       FontSize="26"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter TargetName="Overlay" Property="Background" Value="#FF008DCF"/>
                                <Setter TargetName="Overlay" Property="BorderBrush" Value="#FF1BB7FF"/>
                                <Setter TargetName="Overlay" Property="BorderThickness" Value="2"/>
                            </Trigger>
                            <Trigger Property="IsEnabled" Value="true">
                                <Setter TargetName="Overlay" Property="BorderBrush" Value="Black"/>
                                <Setter TargetName="Overlay" Property="BorderThickness" Value="2"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="true">
                                <Setter TargetName="Overlay" Property="BorderThickness" Value="3"/>
                                <Setter TargetName="Overlay" Property="Background" Value="#FF44C3FF"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Button.Template>
            </Button>

How I would like to save this template with a name, and every time I need a button like this, just use the Style property like this:

Style="{StaticResource BackButtonStyle}"

How can I do this?

score 2 · Answer 1 · answered Oct 25 '17 at 08:52

First you would have to declare your style in a dictionary file

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="CompIconButton" TargetType="Button">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Button">
                <!--Anything-->
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

Then you need to declare this dictionary in your application's resources

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Generic_UI/Buttons_Resources.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Application.Resources>

And you will finally be able to use your button style as expected

<Button Click="Button_Click" Style="{StaticResource CompIconButton}"/>

score 0 · Answer 2 · answered Oct 25 '17 at 08:49

You have to style it and save it in a separate .xaml file then load it either for complete app or for each control/window that wants to use it.

This is an example I made you can change it and use it.

<Style x:Key="DefBtn" TargetType="{x:Type Button}">
    <Setter Property="Background" Value="#EBEBEB"/>
    <Setter Property="BorderBrush" Value="#8C8C8C"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="FontSize" Value="12"/>
    <Setter Property="FontFamily" Value="Segoe UI regular"/>
    <Setter Property="VerticalContentAlignment" Value="Center"/>
    <Setter Property="HorizontalContentAlignment" Value="Center"/>
    <Setter Property="Padding" Value="3,2"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Border Name="border" 
                    BorderThickness="{TemplateBinding BorderThickness}"
                    Padding="{TemplateBinding Padding}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    CornerRadius="1" 
                    Background="{TemplateBinding Background}">
                    <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                  VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Now you can change the name and add it as a resource dictionary to your project. And when you want to load it you can do like this.

<Window.Resources>
        <ResourceDictionary Source="pack://application:,,,/SomeName;component/NameOfYourXamlFile.xaml"/>
 </Window.Resources>

score 0 · Answer 3 · answered Oct 25 '17 at 09:03

Assing the ControlTemplate an x:Key and move it to your App.xaml file:

<Application x:Class="WpfApplication1.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="MainWindow.xaml">
    <Application.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="MyButtonTemplate">
                <Border x:Name="Overlay" CornerRadius="15" Background="#4F81BD">
                    <TextBlock Foreground="Black" 
                                       Text="Help"
                                       HorizontalAlignment="Center"
                                       VerticalAlignment="Center"
                                       FontSize="26"/>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsEnabled" Value="false">
                        <Setter TargetName="Overlay" Property="Background" Value="#FF008DCF"/>
                        <Setter TargetName="Overlay" Property="BorderBrush" Value="#FF1BB7FF"/>
                        <Setter TargetName="Overlay" Property="BorderThickness" Value="2"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="true">
                        <Setter TargetName="Overlay" Property="BorderBrush" Value="Black"/>
                        <Setter TargetName="Overlay" Property="BorderThickness" Value="2"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="true">
                        <Setter TargetName="Overlay" Property="BorderThickness" Value="3"/>
                        <Setter TargetName="Overlay" Property="Background" Value="#FF44C3FF"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>

        </ResourceDictionary>
    </Application.Resources>
</Application>

You can then reference it throughout your whole application using the x:Key:

<Button Template="{StaticResource MyButtonTemplate}" Margin="10,30,10,10" Height="100" Grid.Column="1" Command="{Binding HelpCommand}">

You can do the same thing for a Style (instead of a ControlTemplate).

XAML create button template

3 Answers3