WPF - SLIDER STYLE (INSPIRED BY ANDROID)

Các trạng thái của Slider
Slider normal
Slider when onMouseOver
Slider when disable
Slider tab focus

 

Các thành phần của Slider 
Đến Mục lục Android UI

• TickBar

• Track

Slider style

[code language="xml"]
<Style x:Key="SliderStyle" TargetType="{x:Type Slider}">
<Setter Property="FocusVisualStyle" Value="{StaticResource dgFocusVisualStyte}" />
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Style.Triggers>
<Trigger Property="Orientation" Value="Horizontal">
<Setter Property="MinWidth" Value="104" />
<Setter Property="MinHeight" Value="21" />
<Setter Property="Template" Value="{StaticResource HorizontalSlider}" />
</Trigger>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="MinWidth" Value="21" />
<Setter Property="MinHeight" Value="104" />
<Setter Property="Template" Value="{StaticResource VerticalSlider}" />
</Trigger>
</Style.Triggers>
</Style>
[/code]

Vertical slider template

[code language="xml"]
<ControlTemplate x:Key="VerticalSlider" TargetType="{x:Type Slider}">
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" MinWidth="{TemplateBinding MinWidth}"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TickBar x:Name="TopTick" Visibility="Collapsed" Fill="LightGray" Placement="Left" SnapsToDevicePixels="True"
Width="4" Margin="0,0,2,0" />
<Border x:Name="TrackBackground"
Grid.Column="1"
Margin="0,10"
BorderThickness="2"
BorderBrush="LightGray"
HorizontalAlignment="Center" Width="4" />
<Track x:Name="PART_Track" Grid.Column="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
</Track>
<TickBar x:Name="BottomTick" Grid.Column="2" Visibility="Collapsed" Fill="LightGray" Placement="Right"
Width="4" Margin="2,0,0,0" SnapsToDevicePixels="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
[/code]

Horizontal slider template

[code language="xml"]
<ControlTemplate x:Key="HorizontalSlider" TargetType="{x:Type Slider}">
<Grid Margin="5">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TickBar x:Name="TopTick" Visibility="Collapsed" Fill="LightGray" Placement="Top" SnapsToDevicePixels="True"
Height="4" Margin="0,0,0,2" />
<Border x:Name="TrackBackground"
Grid.Row="1"
Margin="10,0"
BorderThickness="2"
BorderBrush="LightGray"
VerticalAlignment="Center" Height="4" />
<Track x:Name="PART_Track" Grid.Row="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource SliderRepeatButtonStyle}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Style="{StaticResource SliderThumbStyle}" />
</Track.Thumb>
</Track>
<TickBar x:Name="BottomTick" Grid.Row="2" Visibility="Collapsed" Fill="LightGray" Placement="Bottom"
SnapsToDevicePixels="True" Height="4" Margin="0,2,0,0"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TickPlacement" Value="TopLeft">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="BottomRight">
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
<Trigger Property="TickPlacement" Value="Both">
<Setter TargetName="TopTick" Property="Visibility" Value="Visible" />
<Setter TargetName="BottomTick" Property="Visibility" Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
[/code]

RepeatButton style

[code language="xml"]
<Style x:Key="SliderRepeatButtonStyle" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RepeatButton}">
<Rectangle Fill="Transparent"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

Thumb style

[code language="xml"]
<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="OverridesDefaultStyle" Value="True"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Grid>
<Border Name="outerBorder"
Background="#5534b4e3"
BorderBrush="#5534b4e3"
Height="26" Width="26" Opacity="1" BorderThickness="2" CornerRadius="13"/>
<Border Name="innerBorder"
Background="#FF34b4e3"
BorderBrush="#FF34b4e3"
Height="10" Width="10" CornerRadius="5" Opacity="1" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="outerBorder" Property="BorderBrush" Value="#BB34b4e3" />
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="outerBorder" Property="Background" Value="#55ACACAC" />
<Setter TargetName="outerBorder" Property="BorderBrush" Value="#55ACACAC" />
<Setter TargetName="innerBorder" Property="Width" Value="4" />
<Setter TargetName="innerBorder" Property="Height" Value="4" />
<Setter TargetName="innerBorder" Property="CornerRadius" Value="2" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

Focus visual style

[code language="xml"]
<Style x:Key="dgFocusVisualStyte" >
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle x:Name="FocusStyle" StrokeDashArray="4 4" RadiusX="5" RadiusY="5" Fill="Transparent"
Stroke="#99029cc7" StrokeThickness="1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
[/code]

Kết quả

Đến Mục lục Android UI