Question

这是我的自定义拇指，用于滑块：

 <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）或Ellipse（ X：thumbEllipse）

？

Answer 1

你可以在这里做的是在Slider的ControlTemplate.Triggers中设置Thumb属性，然后在Thumb的ControlTemplate中，你可以将触发器置于Tag属性上，以改变你想要对其ControlTemplate内容进行更改，如border或ellipse。

即在Slider的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内部

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

在自定义滑块的触发器中更改自定义拇指的参数

1 个答案: