当前位置：首页 > news >正文

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

news 2025/7/2 10:24:54

一、定义样式

在App.xaml里面定义样式：

<Applicationx: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"><BorderHeight="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"><BorderHeight="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"><BorderWidth="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><BorderHeight="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里面使用样式：

<Windowx: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="默认样式"><SliderMaximum="100"Minimum="0"Value="30" /></GroupBox><GroupBox Grid.Row="1" Header="自定义样式"><SliderMaximum="100"Minimum="0"Style="{StaticResource CustomSlider}"Value="30" /></GroupBox></Grid>
</Window>

三、运行效果