Question

Here is the XAML in my application resources that globally changes all of the Button controls in the application to look and behave like I want:

<Style TargetType="{x:Type Button}" x:Key="MyButtonStyle">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Border x:Name="Border" CornerRadius="0" BorderThickness="0" 
                            Background="CornflowerBlue" BorderBrush="CornflowerBlue">
                    <ContentPresenter Margin="2" HorizontalAlignment="Center" VerticalAlignment="Center" RecognizesAccessKey="True" />
                </Border>
                <ControlTemplate.Triggers>
                    <!-- a bunch o' triggers here -->
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

On one of my application’s user controls, I would like to change some properties of this button. Here is some XAML that I am using in the UserControl.Resources section now to do this:

<Style x:Key="SpecialButton" TargetType="Button" BasedOn="{StaticResource MyButtonStyle}">
    <Setter Property="Width" Value="20" />
    <Setter Property="Visibility" Value="Collapsed" />
    <Setter Property="Content" Value=">" />
    <Setter Property="Border" Value="#eeeeee" />
    <Setter Property="Border.Background" Value="#eeeeee" />
</Style>

The Button controls on my UserControl that I assign the style to of SpecialButton have the correct width, visibility, and content, but these last two attempts do not work. How would I go about changing the background color of the Border with a name of “Border” from the application resource in this SpecialButton style?

Answer 1

What you can do is use TemplateBinding to set the Background property on the control, in the base style. Also in the base style, set the Background color to the default “CornflowerBlue”.

<Setter Property="Background" Value="CornflowerBlue" />
<Setter Property="Template">
    <Setter.Value>    
        <ControlTemplate TargetType="{x:Type Button}">
            <Border x:Name="Border" Background="{TemplateBinding Background}"

Now you can overwrite the Background in the derived style:

<Style x:Key="SpecialButton" TargetType="Button" BasedOn="{StaticResource MyButtonStyle}">
    <Setter Property="Background" Value="#eeeeee" />

---

_{(Note that, if you want to use other properties that aren’t defined on the Button control — or, say you wanted to use multiple background colors — then you’d have to create your own control that inherits Button, and expose the new properties as Dependency Properties.)}