Need help overriding a WPF button style background color.

Question

I have the below code set for a custom button. But I want to change the background for a single button.

<Style x:Key="myButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="White"/>
<Setter Property="Template">
    <Setter.Value>
        <ControlTemplate TargetType="{x:Type Button}">
            <Grid>
                <Rectangle x:Name="rectangle" Fill="#FF2F2FEA" Stroke="Black">
                    <Rectangle.Effect>
                        <DropShadowEffect ShadowDepth="3"/>
                    </Rectangle.Effect>
                </Rectangle>
                <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Bottom" Margin="2.833,0,2.5,1.162" RenderTransformOrigin="0.5,0.5" Width="69.667"/>
            </Grid>
        </ControlTemplate>
    </Setter.Value>
</Setter>

The code below is meant to override the background color but doesn't. What am I missing? Thanks

<Style x:Key="SpecialButton" TargetType="Button" BasedOn="{StaticResource myButtonStyle}">
   <Setter Property="Background" Value="PaleGreen" />
   <Setter Property="Height" Value="19.96" />
</Style>

Answer 1

Add <Setter Property="Background" Value="#FF2F2FEA" /> to the myButtonStyle. And change the Fill on the Rectangle to Fill="{TemplateBinding Background}"

<Style x:Key="myButtonStyle" TargetType="{x:Type Button}">
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Background" Value="#FF2F2FEA" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type Button}">
                <Grid>
                    <Rectangle x:Name="rectangle" Fill="{TemplateBinding Background}" Stroke="Black">
                        <Rectangle.Effect>
                            <DropShadowEffect ShadowDepth="3"/>
                        </Rectangle.Effect>
                    </Rectangle>
                    <ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                    RecognizesAccessKey="True" 
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" 
                                    VerticalAlignment="Bottom" 
                                    Margin="2.833,0,2.5,1.162" 
                                    RenderTransformOrigin="0.5,0.5" Width="69.667"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

After this, the two Buttons should show up properly.

<StackPanel>
    <Button Content="BASE" Style="{StaticResource myButtonStyle}"></Button>

    <Button Content="DERIVED" Style="{StaticResource SpecialButton}"></Button>
</StackPanel>

Result:

Explanation: if you change the Template of a Control you have to "wire-up" its properties (like Background, Foreground, HorizontalContentAlignment etc) to properties of elements in the ControlTemplate. After all you want to give the ability to end users of the control to modify the color, alignment etc, and not just have a Control with a static visual tree.