在自定义滑块的触发器内更改自定义拇指的参数
本文关键字:自定义 参数 触发器 | 更新日期: 2023-09-27 18:33:10
这是我的自定义拇指,用于滑块:
<Style x:Key="SliderThumbStyle" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="false"/>
<Setter Property="Height" Value="18"/>
<Setter Property="Width" Value="18"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Grid>
<Border x:Name="thumbBorder"
CornerRadius="9,0,0,9"
Background="DimGray"/>
<Ellipse x:Name="thumbEllipse"
Fill="Orange"></Ellipse>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
这就是我在滑块自定义控件中使用它的方式:
<Style TargetType="Slider">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Value" Value="5"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid>
<Border Name="PART_Border"
CornerRadius="9"
Width="{TemplateBinding Width}"
Height="18"
Background="Red"
HorizontalAlignment="Stretch"
VerticalAlignment="Center" />
<Track Name="PART_Track"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<Track.DecreaseRepeatButton>
<RepeatButton Command="Slider.DecreaseLarge"
Style="{StaticResource SliderButtonStyle}" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="myThumb"
Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Command="Slider.IncreaseLarge"
Style="{StaticResource DecreaseSliderButtonStyle}"/>
</Track.IncreaseRepeatButton>
</Track>
</Grid>
<!-- this is the part I would like to change, so I can modify myThumb's border / ellipse: -->
<ControlTemplate.Triggers>
<Trigger SourceName="PART_Track" Property="Value" Value="10">
<Setter TargetName="myThumb" Property="Width" Value="50"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
在注释部分,当达到最大值时,我设法通过触发器修改拇指:有什么方法可以这样修改自定义拇指的部分,例如它的边框(x:thumbBorder)或椭圆(x:thumbEllipse)?
您可以在此处执行的操作是在滑块的 ControlTemplate.Triggers 中设置拇指上的 Tag 属性,然后在 Thumb 的控件模板中,您可以将触发器放在 Tag 属性上,以更改要对其控件模板内容(如边框或椭圆)执行的操作。
即在滑块的控件模板中。
<ControlTemplate.Triggers>
<Trigger SourceName="PART_Track" Property="Value" Value="10">
<Setter TargetName="myThumb" Property="Tag" Value="50"></Setter>
</Trigger>
</ControlTemplate.Triggers>
和内部拇指控件模板
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" Value="50">
<Setter TargetName="thumbEllipse" Property="Fill" Value="Red"></Setter>
</DataTrigger>
</ControlTemplate.Triggers>