[C#] WPF - 自定义样式（Slider篇）

一、定义样式

在App.xaml里面定义样式：

<Application
    x:Class="WpfApp.StudySlider.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:WpfApp.StudySlider"
    StartupUri="MainWindow.xaml">
    <Application.Resources>
        <Style x:Key="SliderDecreaseRepeatButton" TargetType="RepeatButton">
            <Setter Property="Focusable" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border Height="15" Background="Transparent">
                            <Border
                                Height="6"
                                Background="#2182FF"
                                CornerRadius="3 0 0 3" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SliderIncreaseRepeatButton" TargetType="RepeatButton">
            <Setter Property="Focusable" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="RepeatButton">
                        <Border Height="15" Background="Transparent">
                            <Border
                                Height="6"
                                Background="#B3AAAC"
                                CornerRadius="0 3 3 0" />
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="SliderThumb" TargetType="Thumb">
            <Setter Property="Focusable" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Border
                            Width="15"
                            Height="15"
                            Margin="-1,0"
                            Background="#FFD9D3E8"
                            CornerRadius="10" />
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Cursor" Value="Hand" />
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="CustomSlider" TargetType="Slider">
            <Setter Property="Focusable" Value="False" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Slider">
                        <Grid>
                            <Border
                                Height="6"
                                Background="#EBEDF2"
                                CornerRadius="4" />
                            <Track Name="PART_Track">
                                <Track.DecreaseRepeatButton>
                                    <RepeatButton Command="Slider.DecreaseLarge" Style="{StaticResource SliderDecreaseRepeatButton}" />
                                </Track.DecreaseRepeatButton>
                                <Track.IncreaseRepeatButton>
                                    <RepeatButton Command="Slider.IncreaseLarge" Style="{StaticResource SliderIncreaseRepeatButton}" />
                                </Track.IncreaseRepeatButton>
                                <Track.Thumb>
                                    <Thumb Style="{StaticResource SliderThumb}" />
                                </Track.Thumb>
                            </Track>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Application.Resources>
</Application>

二、应用样式

在MainWindow.xaml里面使用样式：

<Window
    x:Class="WpfApp.StudySlider.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:local="clr-namespace:WpfApp.StudySlider"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Title="MainWindow"
    Width="400"
    Height="300"
    mc:Ignorable="d">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <GroupBox Grid.Row="0" Header="默认样式">
            <Slider
                Maximum="100"
                Minimum="0"
                Value="30" />
        </GroupBox>

        <GroupBox Grid.Row="1" Header="自定义样式">
            <Slider
                Maximum="100"
                Minimum="0"
                Style="{StaticResource CustomSlider}"
                Value="30" />
        </GroupBox>
    </Grid>
</Window>

三、运行效果