在自定义滑块的触发器内更改自定义拇指的参数 [英] Changing custom thumb's parameters inside a custom slider's trigger

问题描述

这是我的自定义滑块，用于滑块:

This is my custom thumb, for a slider:

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

这就是我在滑块自定义控件中使用它的方式:

And this is how I'm using it inside a slider custom control:

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

In a commented part, I've managed to modify the thumb via triggers, when the maximum value is reached: is there any way I can modify custom thumb's parts this way, like its Border (x:thumbBorder) or Ellipse (x:thumbEllipse)?

推荐答案

你可以在这里做的是在 Slider 的 ControlTemplate.Triggers 中设置 Thumb 上的 Tag 属性，然后在 Thumb 的 ControlTemplate 中你可以将触发器放在 Tag 属性上来改变你想要在其 ControlTemplate 内容上做边框或椭圆等.

What you can do here is set the Tag property on your Thumb in Slider's ControlTemplate.Triggers and then in Thumb's ControlTemplate you can put trigger over Tag property to change you want to do on its ControlTemplate contents like border or ellipse.

即在 Slider 的 ControlTemplate.Triggers 中

i.e in Slider's ControlTemplate.Triggers

        <ControlTemplate.Triggers>
            <Trigger SourceName="PART_Track" Property="Value" Value="10">
                    <Setter TargetName="myThumb" Property="Tag" Value="50"></Setter>
            </Trigger>
        </ControlTemplate.Triggers>

在 Thumb controlTemplate 内

and inside Thumb controlTemplate

         <ControlTemplate.Triggers>
            <DataTrigger Binding="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}" Value="50">
                    <Setter TargetName="thumbEllipse" Property="Fill" Value="Red"></Setter>
            </DataTrigger>
        </ControlTemplate.Triggers>

这篇关于在自定义滑块的触发器内更改自定义拇指的参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！