How do I bind a style property to the property of a template

Question

So I'm currently working on a custom style for a slider and I want to be able to change the red color by changing the Background property of the slider.

I'm currently setting the style by hardcoding the value

<Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RepeatButton">
                <Border SnapsToDevicePixels="True"
                        Background="Red"
                        Height="12"
                        Margin="0,0,-4,0"
                        CornerRadius="6,0,0,6"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Where as I want to be able to set the color like this

<Slider Value="50" Minimum="0" Maximum="100" Background="Blue" Style="{StaticResource Horizontal_Slider}"/>

I think I need to use TemplateBinding, but I couldn't get it to work by doing this

<Border SnapsToDevicePixels="True"
        Background="{TemplateBinding Background}"
        Height="12"
        Margin="0,0,-4,0"
        CornerRadius="6,0,0,6"/>

Here is the entire style

<Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="IsTabStop" Value="false" />
    <Setter Property="Focusable" Value="false" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RepeatButton">
                <Border Height="10" 
                        Margin="-4,0,0,0"
                        CornerRadius="0,6,6,0">
                    <Border.Background>
                        <SolidColorBrush Color="White" Opacity="0.5" />
                    </Border.Background>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="RepeatButton">
                <Border SnapsToDevicePixels="True"
                        Background="Red"
                        Height="12"
                        Margin="0,0,-4,0"
                        CornerRadius="6,0,0,6"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<Style x:Key="SliderThumb" TargetType="Thumb">
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Thumb">
                <Ellipse Height="14" Width="14" Fill="White"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

<ControlTemplate x:Key="Slider" TargetType="Slider">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>
        <Track Grid.Row="1" x:Name="PART_Track">
            <Track.DecreaseRepeatButton>
                <RepeatButton Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge"/>
            </Track.DecreaseRepeatButton>
            <Track.IncreaseRepeatButton>
                <RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge"/>
            </Track.IncreaseRepeatButton>
            <Track.Thumb>
                <Thumb Style="{StaticResource SliderThumb}" Panel.ZIndex="20"/>
            </Track.Thumb>
        </Track>
    </Grid>
</ControlTemplate>

<Style x:Key="Horizontal_Slider" TargetType="Slider">
    <Setter Property="Focusable" Value="False"/>
    <Setter Property="SnapsToDevicePixels" Value="true" />
    <Setter Property="OverridesDefaultStyle" Value="true" />
    <Style.Triggers>
        <Trigger Property="Orientation" Value="Horizontal">
            <Setter Property="MinHeight" Value="21" />
            <Setter Property="MinWidth" Value="104" />
            <Setter Property="Template" Value="{StaticResource Slider}" />
        </Trigger>
    </Style.Triggers>
</Style>

Answer 1

You were on the right track with TemplateBinding. You just needed to hook up all of them. Here's how to do it.

    <Window.Resources>
        <Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="IsTabStop" Value="false" />
            <Setter Property="Focusable" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border Height="10" 
                        Margin="-4,0,0,0"
                        CornerRadius="0,6,6,0">
                            <Border.Background>
                                <SolidColorBrush Color="White" Opacity="0.5" />
                            </Border.Background>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border SnapsToDevicePixels="True"
                        Background="{TemplateBinding Background}"
                        Height="12"
                        Margin="0,0,-4,0"
                        CornerRadius="6,0,0,6"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SliderThumb" TargetType="Thumb">
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Ellipse Height="14" Width="14" Fill="White"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <ControlTemplate x:Key="Slider" TargetType="Slider">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <Track Grid.Row="1" x:Name="PART_Track">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Background="{TemplateBinding Background}" Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge"/>
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge"/>
                    </Track.IncreaseRepeatButton>
                    <Track.Thumb>
                        <Thumb Style="{StaticResource SliderThumb}" Panel.ZIndex="20"/>
                    </Track.Thumb>
                </Track>
            </Grid>
        </ControlTemplate>

        <Style x:Key="Horizontal_Slider" TargetType="Slider">
            <Setter Property="Focusable" Value="False"/>
            <Setter Property="SnapsToDevicePixels" Value="true" />
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Style.Triggers>
                <Trigger Property="Orientation" Value="Horizontal">
                    <Setter Property="MinHeight" Value="21" />
                    <Setter Property="MinWidth" Value="104" />
                    <Setter Property="Template" Value="{StaticResource Slider}" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </Window.Resources>
    <Grid>
        <Slider Value="50" Minimum="0" Maximum="100" Background="Blue" Style="{StaticResource Horizontal_Slider}"/>
    </Grid>

The output should look like this: