How do i get round corners on button with triggers in wpf/xaml

Question

I want to get a nice button with round corners in wpf with triggers, it works to get the button as i want without triggers but if i use triggers then i need to define a rectangle and thats not so round.. can this be done?

My code:

<ControlTemplate TargetType="{x:Type Button}">
    <Border  CornerRadius="15"
             Background="White" 
             BorderBrush="Black" 
             BorderThickness="2">
        <Grid>
            <Rectangle x:Name="rectangle" 
                       StrokeThickness="2" 
                       Stroke="{TemplateBinding BorderBrush}" 
                       Fill="{TemplateBinding Background}" 
                       SnapsToDevicePixels="true"/>
            <ContentPresenter 
                x:Name="contentPresenter" 
                ContentTemplate="{TemplateBinding ContentTemplate}" 
                Content="{TemplateBinding Content}" 
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                Margin="{TemplateBinding Padding}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
        </Grid>
    </Border>
    <ControlTemplate.Triggers>

        <Trigger Property="IsDefaulted" Value="true">
            <Setter Property="Stroke" TargetName="rectangle" 
                    Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Fill" TargetName="rectangle" Value="White"/>
            <Setter Property="Stroke" TargetName="rectangle" Value="DimGray"/>
            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" 
                    Value="Gray"/>
        </Trigger>
        <Trigger Property="IsPressed" Value="true">
            <Setter Property="Fill" TargetName="rectangle" Value="White"/>
            <Setter Property="Fill" TargetName="rectangle" Value="LightGray"/>
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>

If a remove the gridtag the rectangle and the triggers the button looks great but there is no effect when i push it - and it has to be an effect. Can this be done?

Thank you so mutch.

Answer 1

You could use the Background property of the Border to implement the "effects" and remove the Rectangle from the template:

<ControlTemplate TargetType="Button">
    <Border x:Name="border" CornerRadius="15" Background="White" BorderBrush="Black" BorderThickness="2" >
        <ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}"
                          Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                          Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
    </Border>
    <ControlTemplate.Triggers>
        <Trigger Property="IsDefaulted" Value="true">
            <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" />
        </Trigger>
        <Trigger Property="IsEnabled" Value="false">
            <Setter Property="Background" TargetName="border" Value="White" />
            <Setter Property="BorderBrush" TargetName="border" Value="DimGray" />
            <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="Gray" />
        </Trigger>
        <Trigger Property="IsPressed" Value="true">
            <Setter Property="Background" TargetName="border" Value="LightGray" />
        </Trigger>
    </ControlTemplate.Triggers>
</ControlTemplate>