Set CornerRadius on button template
As Nitesh has said you do not have a CornerRadius Property on the Button, it is a property of the Border as you have shown in your first style, just duplicate your first Style and change the CornerRadius, then assign it to the Style of the appropriate Button.
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="Button" x:Key="TabButton">
<Setter Property="Background" Value="White" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="0" Background="White" BorderBrush="#ccc" BorderThickness="0,1,1,0" >
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Button" x:Key="TabButtonFirst">
<Setter Property="Background" Value="White" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="3,0,0,0" Background="White" BorderBrush="#ccc" BorderThickness="0,1,1,0" >
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Button" x:Key="TabButtonLast">
<Setter Property="Background" Value="White" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="0,0,0,3" Background="White" BorderBrush="#ccc" BorderThickness="0,1,1,0" >
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="Black">
<Button Style="{StaticResource TabButton}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,72,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
<Button Style="{StaticResource TabButtonFirst}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="10,43,0,0" Name="button2" VerticalAlignment="Top" Width="75" />
<Button Style="{StaticResource TabButtonLast}" Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,101,0,0" Name="button3" VerticalAlignment="Top" Width="75" />
</Grid>
</Window>
Instead of using ControlTemplate
you can simply use Style.Resources
and target the border:
<Style TargetType="Button" x:Key="TabButton">
<Setter Property="Background" Value="White" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Style.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="3,0,0,0" />
</Style>
</Style.Resources>
</Style>
You're not limited to the dependency properties of the control you're templating. In this case, while Button
does not have a CornerRadius
property, Border
does, so you can use Border.CornerRadius
instead:
<Style TargetType="Button" x:Key="TabButton">
<Setter Property="Background" Value="White" />
<Setter Property="TextBlock.TextAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="{TemplateBinding Border.CornerRadius}"
Background="White" BorderBrush="#ccc"
BorderThickness="0,1,1,0" >
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Button" x:Key="TabButtonFirst" BasedOn="{StaticResource TabButton}">
<Setter Property="Border.CornerRadius" Value="3,0,0,0" />
</Style>
<Style TargetType="Button" x:Key="TabButtonLast" BasedOn="{StaticResource TabButton}">
<Setter Property="Border.CornerRadius" Value="0,0,0,3" />
</Style>
With this approach, you no longer need to maintain multiple copies of your control template.
Just create a new Button like this:
<!--Button-->
<Button
Name="myButton"
Content="OK"
FontFamily="Century Gothic"
Foreground="white"
Background="CornflowerBlue"
BorderThickness="0"
Padding="10"
Margin="10,5">
<Button.Resources>
<Style TargetType="{x:Type Border}">
<Setter Property="CornerRadius" Value="7"/>
</Style>
</Button.Resources>
</Button>