How can i style a Slider control for wpf in a way like in figure
我如何以类似于图的方式为wpf设置Slider控件的样式
Any similar samples would be appreciated .
任何类似的样品将不胜感激。
I tried the below code
我尝试了下面的代码
<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">
<Ellipse Stroke="Black"
StrokeThickness="1"
Name="Ellipse"
Fill="OrangeRed" />
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Ellipse" Property="Fill" Value="Orange"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Ellipse" Property="Fill" Value="Gray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="Slider" x:Key="AppSliderStyle">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" Name="row" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" Name="column" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Border Name="PART_Border"
BorderBrush="Black" BorderThickness="1"
Padding="2"
Grid.Row="1" Grid.Column="1"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}"
Background="GreenYellow"
HorizontalAlignment="Stretch"
VerticalAlignment="Center" />
<Track Name="PART_Track"
HorizontalAlignment="Stretch"
VerticalAlignment="Center"
Grid.Row="1" Grid.Column="1"
Width="{TemplateBinding Width}"
Height="{TemplateBinding Height}">
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
</Track>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And it produced this
它产生了这个
Struggling to make color as diffeerent in left and right . What changes i ahve to do for doing that
努力使左右两侧的颜色变得不同。我为此做了些什么改变
2 个解决方案
#1
21
Similar example :
类似的例子:
Track bar /slider template for WPF
WPF的跟踪栏/滑块模板
You need to edit style of Both RepeatButton
您需要编辑Both RepeatButton的样式
<Window.Resources>
<Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border BorderThickness="1" BorderBrush="Black" Background="Black" Height="3"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border SnapsToDevicePixels="True" Background="Green" BorderThickness="1" BorderBrush="YellowGreen" Height="3"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Height="10" Width="10" Fill="Green"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="Slider" TargetType="Slider">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Track Grid.Row="1" x:Name="PART_Track" >
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<Style x:Key="Horizontal_Slider" TargetType="Slider">
<Setter Property="Focusable" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinHeight" Value="21" />
<Setter Property="MinWidth" Value="104" />
<Setter Property="Template" Value="{StaticResource Slider}" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Slider Style="{StaticResource Horizontal_Slider}" VerticalAlignment="Center" Value="500" Width="300" Margin="50,0,50,0"></Slider>
Update slider thumb with image
用图像更新滑块
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Height="10" Width="10">
<Ellipse.Fill>
<ImageBrush ImageSource="Screenshot_5.png"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Result
结果
#2
2
create custom thumb / track bar / slider control template in WPF
在WPF中创建自定义拇指/轨迹栏/滑块控制模板
<Ellipse Name="PART_Ellipse"
Width="30"
Height="30"
Stroke="Black"
Fill="{StaticResource RoundButtonDefaultBrush}"/>
<ContentPresenter Name="PART_ContentPresenter" ContentSource="Content" Margin="0,0,0,6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextBlock.Foreground="White"
TextBlock.FontSize="18"
TextBlock.FontWeight="Bold"/>
Check the complete code here:
在这里查看完整的代码:
Click here for complete solution with source code
单击此处获取包含源代码的完整解决方案
#1
21
Similar example :
类似的例子:
Track bar /slider template for WPF
WPF的跟踪栏/滑块模板
You need to edit style of Both RepeatButton
您需要编辑Both RepeatButton的样式
<Window.Resources>
<Style x:Key="SliderRepeatButton" TargetType="RepeatButton">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="IsTabStop" Value="false" />
<Setter Property="Focusable" Value="false" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border BorderThickness="1" BorderBrush="Black" Background="Black" Height="3"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderRepeatButton1" TargetType="RepeatButton">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RepeatButton">
<Border SnapsToDevicePixels="True" Background="Green" BorderThickness="1" BorderBrush="YellowGreen" Height="3"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Height="10" Width="10" Fill="Green"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ControlTemplate x:Key="Slider" TargetType="Slider">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Track Grid.Row="1" x:Name="PART_Track" >
<Track.DecreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton1}" Command="Slider.DecreaseLarge" />
</Track.DecreaseRepeatButton>
<Track.Thumb>
<Thumb Style="{StaticResource SliderThumb}" />
</Track.Thumb>
<Track.IncreaseRepeatButton>
<RepeatButton Style="{StaticResource SliderRepeatButton}" Command="Slider.IncreaseLarge" />
</Track.IncreaseRepeatButton>
</Track>
</Grid>
</ControlTemplate>
<Style x:Key="Horizontal_Slider" TargetType="Slider">
<Setter Property="Focusable" Value="False"/>
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinHeight" Value="21" />
<Setter Property="MinWidth" Value="104" />
<Setter Property="Template" Value="{StaticResource Slider}" />
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Slider Style="{StaticResource Horizontal_Slider}" VerticalAlignment="Center" Value="500" Width="300" Margin="50,0,50,0"></Slider>
Update slider thumb with image
用图像更新滑块
<Style x:Key="SliderThumb" TargetType="Thumb">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Thumb">
<Ellipse Height="10" Width="10">
<Ellipse.Fill>
<ImageBrush ImageSource="Screenshot_5.png"></ImageBrush>
</Ellipse.Fill>
</Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Result
结果
#2
2
create custom thumb / track bar / slider control template in WPF
在WPF中创建自定义拇指/轨迹栏/滑块控制模板
<Ellipse Name="PART_Ellipse"
Width="30"
Height="30"
Stroke="Black"
Fill="{StaticResource RoundButtonDefaultBrush}"/>
<ContentPresenter Name="PART_ContentPresenter" ContentSource="Content" Margin="0,0,0,6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
TextBlock.Foreground="White"
TextBlock.FontSize="18"
TextBlock.FontWeight="Bold"/>
Check the complete code here:
在这里查看完整的代码:
Click here for complete solution with source code
单击此处获取包含源代码的完整解决方案