改寫 WPF Slider 樣式

先放樣式代碼

        <Style x:Key="RepeatButtonTransparent" TargetType="{x:Type RepeatButton}">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Focusable" Value="false" />
            <Setter Property="IsTabStop" Value="false" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type RepeatButton}">
                        <Rectangle
                            Width="{TemplateBinding Width}"
                            Height="{TemplateBinding Height}"
                            Fill="{TemplateBinding Background}" />
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}">
            <Grid
                HorizontalAlignment="Center"
                VerticalAlignment="Center"
                UseLayoutRounding="True">
                <Ellipse
                    Width="{TemplateBinding Width}"
                    Height="{TemplateBinding Height}"
                    Fill="{TemplateBinding Foreground}" />
            </Grid>
        </ControlTemplate>

        <ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}">
            <Grid Background="Transparent" SnapsToDevicePixels="True">
                <Border
                    x:Name="TrackBackground"
                    Height="2.0"
                    VerticalAlignment="center"
                    Background="{TemplateBinding Background}" />

                <Track x:Name="PART_Track">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton
                            Height="2.0"
                            Background="{TemplateBinding Foreground}"
                            Style="{StaticResource RepeatButtonTransparent}" />
                    </Track.DecreaseRepeatButton>

                    <Track.Thumb>
                        <Thumb
                            x:Name="Thumb"
                            Width="{TemplateBinding Height}"
                            Height="{TemplateBinding Height}"
                            VerticalAlignment="Center"
                            Focusable="False"
                            Foreground="{TemplateBinding Foreground}"
                            OverridesDefaultStyle="True"
                            Template="{StaticResource SliderThumbHorizontalDefault}" />
                    </Track.Thumb>
                </Track>
            </Grid>
        </ControlTemplate>

        <Style x:Key="SliderStyle1" TargetType="{x:Type Slider}">
            <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false" />
            <Setter Property="Background" Value="#B4BAB9" />
            <Setter Property="Foreground" Value="#2695FF" />
            <Setter Property="Template" Value="{StaticResource SliderHorizontal}" />
        </Style>

控件引用樣式

            <Slider
                Width="200"
                Height="12"
                Maximum="1.6"
                Minimum="0.8"
                Style="{DynamicResource SliderStyle1}"
                Value="1" />

效果如下：

此時的滑動條，只允許拖動。若要支持鼠標點擊，使Slider立即移動到發生鼠標單擊的位置，只需將IsMoveToPointEnabled屬性設置為true