change background color of a button template in wpf

Question

i found the following template for a nice glass button in the internet. as you can see it has a property setting for the button background,

<Setter TargetName="border" Property="Background" Value="#FF000000" />

but if i change this in Blend into any other value, the background of the button won`t change.. I have to change the value directly in the Setter tag which will affect all buttons in the form using this template... How can i change the code to give different background to different buttons using this template??

<ControlTemplate x:Key="GlassButton" TargetType="{x:Type Button}">
        <ControlTemplate.Resources>
            <Storyboard x:Key="Timeline1">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                               Storyboard.TargetName="glow"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
            <Storyboard x:Key="Timeline2">
                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                               Storyboard.TargetName="glow"
                                               Storyboard.TargetProperty="(UIElement.Opacity)">
                    <SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </ControlTemplate.Resources>
        <Border BorderBrush="#FFFFFFFF"
                BorderThickness="0"
                CornerRadius="4,4,4,4">
            <Border x:Name="border"
                    Background="#7F000000"
                    BorderBrush="#FF000000"
                    BorderThickness="1"
                    CornerRadius="4,4,4,4">
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="0.507*" />
                        <RowDefinition Height="0.493*" />
                    </Grid.RowDefinitions>
                    <Border x:Name="glow"
                            Grid.RowSpan="2"
                            Width="Auto"
                            HorizontalAlignment="Stretch"
                            CornerRadius="4,4,4,4"
                            Opacity="0">
                        <Border.Background>
                            <RadialGradientBrush>
                                <RadialGradientBrush.RelativeTransform>
                                    <TransformGroup>
                                        <ScaleTransform ScaleX="1.702" ScaleY="2.243" />
                                        <SkewTransform AngleX="0" AngleY="0" />
                                        <RotateTransform Angle="0" />
                                        <TranslateTransform X="-0.368" Y="-0.152" />
                                    </TransformGroup>
                                </RadialGradientBrush.RelativeTransform>
                                <GradientStop Offset="0" Color="#B28DBDFF" />
                                <GradientStop Offset="1" Color="#008DBDFF" />
                            </RadialGradientBrush>
                        </Border.Background>
                    </Border>
                    <ContentPresenter Grid.RowSpan="2"
                                      Width="Auto"
                                      HorizontalAlignment="Center"
                                      VerticalAlignment="Center" />
                    <Border x:Name="shine"
                            Width="Auto"
                            Margin="0,0,0,0"
                            HorizontalAlignment="Stretch"
                            CornerRadius="4,4,0,0">
                        <Border.Background>
                            <LinearGradientBrush StartPoint="0.494,0.028" EndPoint="0.494,0.889">
                                <GradientStop Offset="0" Color="#99FFFFFF" />
                                <GradientStop Offset="1" Color="#33FFFFFF" />
                            </LinearGradientBrush>
                        </Border.Background>
                    </Border>
                </Grid>
            </Border>
        </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True">
                <Setter TargetName="shine" Property="Opacity" Value="0.4" />
                <Setter TargetName="border" Property="Background" Value="#FF000000" />
                <Setter TargetName="border" Property="BorderBrush" Value="#FF000000" />
                <Setter TargetName="glow" Property="Visibility" Value="Hidden" />
            </Trigger>
            <Trigger Property="IsMouseOver" Value="True">
                <Trigger.EnterActions>
                    <BeginStoryboard Storyboard="{StaticResource Timeline1}" />
                </Trigger.EnterActions>
                <Trigger.ExitActions>
                    <BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}" />
                </Trigger.ExitActions>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

Answer 1

You can use binding:

<Setter TargetName="border" Property="Background"
        Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Background}" />

This way, you can set a background for each button individually, and the background used by the setter will be bound to the button's Background property.

<Button Background="Red"  Content="First" />
<Button Background="Blue" Context="Second" />