1

これは、スライダーのカスタム サムです。

 <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) のように、この方法でカスタムの親指の部分を変更する方法はありますか? )?

4

1 に答える 1