c# - 如何将样式属性绑定到模板的属性
问题描述
因此,我目前正在研究滑块的自定义样式,我希望能够通过更改滑块的 Background 属性来更改红色。
我目前正在通过硬编码值来设置样式
<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>
解决方案
您在 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>
推荐阅读
- google-sheets - 您可以使用 ArrayFormula 复制 IMPORTXML 函数吗?
- python - 读取带有网络和子网掩码的 csv 并写入带有 ping 结果的文件
- javascript - Binance Futures API:签名无效
- sql - 将数字格式化为两位小数 - Oracle
- python - google colab 上的不同精度
- wordpress - 标题元素上的引荐来源网址/重定向网址
- react-native - React Native - 根据设备旋转移动的组件
- java - 如何计算时间差
- c - 如何理解指针的存储类型
- python - 有人可以帮助为 Python 3.7 编译 GTK/PyGObject All-in-one 吗?