如何将样式属性绑定到模板的属性答案

【问题标题】：How do I bind a style property to the property of a template如何将样式属性绑定到模板的属性
【发布时间】：2021-07-16 16:28:18
【问题描述】：

所以我目前正在研究滑块的自定义样式，我希望能够通过更改滑块的背景属性来更改红色。

我目前正在通过硬编码值来设置样式

<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>

我希望能够像这样设置颜色

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

我认为我需要使用 TemplateBinding，但我无法通过这样做来使其工作

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

这是整个样式

<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>

【问题讨论】：

标签： c# .net wpf mvvm

【解决方案1】：

您使用 TemplateBinding 走在正确的轨道上。您只需要连接所有这些。以下是操作方法。

    <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>

输出应如下所示：

【讨论】：

太棒了！谢谢！ :-)