Set CornerRadius on button template
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.
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>
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>