WPF：Slider樣式

簡述

?? WPF中Slider分為三部分，滑塊類型為Thumb；進度條類型為RepeatButton，其中：位于滑塊左側或下側部分為DecreaseRepeatButton，位于滑塊右側或上側部分為IncreaseRepeatButton。
?? 設置Slider樣式時，一般單獨設置三部分的樣式(Style)，然后在Sldier的樣式(Style)中引用它們。

代碼示例

<Style TargetType="{x:Type Thumb}" x:Key="SliderThumbStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Thumb}">
                        <Ellipse Width="25" Height="25" Fill="Black"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="RepeatButton" x:Key="Slider_DecreaseRepeatBtnStyle">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border SnapsToDevicePixels="True" Background="DeepSkyBlue" BorderThickness="1" 
                                CornerRadius="5" BorderBrush="DeepSkyBlue" Height="10"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style TargetType="{x:Type Slider}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid>
                            <Border Name="PART_Border" BorderBrush="Black" BorderThickness="1" CornerRadius="5"
                                    Padding="2" Width="{TemplateBinding Width}" Height="10" Background="LightGray" 
                                    HorizontalAlignment="Stretch" VerticalAlignment="Center">
                            </Border>
                            <Track Name="PART_Track">
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Style="{StaticResource Slider_DecreaseRepeatBtnStyle}">
                                    </RepeatButton>
                                </Track.DecreaseRepeatButton>
                                <Track.Thumb>
                                    <Thumb Style="{StaticResource SliderThumbStyle}" />
                                </Track.Thumb>
                            </Track>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

結果演示

補充

• Thumb樣式可改為圖片顯示方式，將Ellipse的Fill屬性改為使用ImageBrush填充即可；
• 代碼中未引用IncreaseRepeatButton樣式，在Slider樣式中按DecreaseRepeatButton方式添加。