XAML create button template [duplicate] - wpf

Question

This question already has answers here:
WPF C# button style
(5 answers)
Closed 5 years ago.
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?

Answer 1

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}"/>

Answer 2

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>

Answer 3

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).