Need help redefining the WPF button style background color.

Question

I have the code below for a custom button. But I want to change the background for one 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 for overriding the background color, but it is not. 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 myButtonStyle. And the change Fillin the RectangleonFill="{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 that, two Buttonshould be displayed correctly.

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

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

Result:

: Template Control, "" (, Background, Foreground, HorizontalContentAlignment ..) ControlTemplate. , .., Control .