Create template from control

Question

I am new in WPF and trying to create some simple project. I have created a window with a button. Then I need to create the same buttons but I cant understand how to create a template from exist button? Here is the code:

<Grid Background="Black">
        <ToggleButton x:Name="btn" Content="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="74.96" FontFamily="Digital" Width="73.8" FontSize="34.667" Foreground="White">
            <ToggleButton.BorderBrush>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="1"/>
                    <GradientStop Color="#FF5D5D5D"/>
                </LinearGradientBrush>
            </ToggleButton.BorderBrush>
            <ToggleButton.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFE43DFF" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.997"/>
                </LinearGradientBrush>
            </ToggleButton.Background>
        </ToggleButton>
    </Grid>

As we see there is single button on grid. I need to create a lot of same buttons and need a template. How to make a template? Internal question can BorderBrush be a template? I ask because in future I need to make a different buttons (like red, green, magenta etc) with the same border you can see in my code. Thanks!

Answer 1

You don't need a Template, you can do this with a Style:

<Window.Resources>
    <Style x:Key="PurpleButton" TargetType="{x:Type ToggleButton}">
        <Setter Property="BorderBrush">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Black" Offset="1"/>
                    <GradientStop Color="#FF5D5D5D"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#FFE43DFF" Offset="0"/>
                    <GradientStop Color="Black" Offset="0.997"/>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid Background="Black">
    <ToggleButton x:Name="btn" Style="{StaticResource PurpleButton}" Content="1" HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Height="74.96" FontFamily="Digital" Width="73.8" FontSize="34.667" Foreground="White" />
    <ToggleButton Style="{StaticResource PurpleButton} Content="2" Height="74.96" FontFamily="Digital" Width="73.8" FontSize="34.667" Foreground="White"" />
</Grid>

Answer 2

Here is an example of a style which has triggers implemented aswell. Doing it this way using a control template you are able to create and design your own type of button.

<Style x:Key="ButtonNormal" TargetType="Button">
  <Setter Property="Height" Value="40" />
  <Setter Property="FontSize" Value="18" />
  <Setter Property="Foreground" Value="#18272d" />
  <Setter Property="Template">
    <Setter.Value>

    <ControlTemplate TargetType="Button">
      <Border x:Name="ButtonBorder" 
              CornerRadius="4" 
              BorderThickness="1" 
              BorderBrush="#adcae6"
             >
        <Border.Background>
          <LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
            <GradientStop Color="#ffffff" Offset="0"/>
            <GradientStop Color="#e2eaf6" Offset="0.4"/>
          </LinearGradientBrush>
        </Border.Background>
        <Grid>
          <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="1.7*"/>
          </Grid.RowDefinitions>
          <ContentPresenter x:Name="ButtonContentPresenter"
                            VerticalAlignment="Center"  
                            HorizontalAlignment="Center" 
                            Grid.RowSpan="2" />
        </Grid>

      </Border>


      <ControlTemplate.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
          <Setter TargetName="ButtonBorder" Property="Background" >
            <Setter.Value>
              <LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
                <GradientStop Color="#d6e2f3" Offset="0"/>
                <GradientStop Color="#fff" Offset="0.9"/>
              </LinearGradientBrush>
            </Setter.Value>
          </Setter>
        </Trigger>
        <Trigger Property="IsPressed" Value="True">
          <Setter TargetName="ButtonBorder" Property="Background" >
            <Setter.Value>
              <LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
                <GradientStop Color="#bed0ed" Offset="0"/>
                <GradientStop Color="#fff" Offset="0.9"/>
              </LinearGradientBrush>
            </Setter.Value>

          </Setter>
          <Setter Property="BorderBrush" Value="#7ba7d1" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="False">
          <Setter TargetName="ButtonBorder" Property="Background">
            <Setter.Value>
              <LinearGradientBrush EndPoint="0.5,1.5" StartPoint="0.5,0.0">
                <GradientStop Color="#f6f6f6" Offset="0"/>
                <GradientStop Color="#eaeaea" Offset="0.9"/>
              </LinearGradientBrush>
            </Setter.Value>
          </Setter>
          <Setter Property="Foreground" Value="DarkGray"></Setter>
        </Trigger>
      </ControlTemplate.Triggers>

    </ControlTemplate>
  </Setter.Value>
</Setter>

Hope this helps and gives a better overview of how Styling/Templating works.