触摸屏手指拖动silder控件时没法修改大小,找了第三方库也没有对应的属性,自己定义一个样式,用作记录防止忘记
样式效果
1.先继承Slider
public class HsSlider : Slider
{
public static readonly DependencyProperty HsThumbWidthProperty;
public static readonly DependencyProperty HsThumbHeightProperty;
public static readonly DependencyProperty HsHorizontalRepeatWidthProperty;
public static readonly DependencyProperty HsHorizontalRepeatHeightProperty;
public static readonly DependencyProperty HsForegroundProperty;
public static readonly DependencyProperty HsBackgrondProperty;
public static readonly DependencyProperty HsValueProperty;
private static bool _flag = true;
static HsSlider()
{
BrushConverter brushConverter = new BrushConverter();
HsThumbWidthProperty = DependencyProperty.Register("HsThumbWidth", typeof(double), typeof(HsSlider), new PropertyMetadata(0.0));
HsThumbHeightProperty = DependencyProperty.Register("HsThumbHeight", typeof(double), typeof(HsSlider), new PropertyMetadata(0.0));
HsHorizontalRepeatWidthProperty = DependencyProperty.Register("HsHorizontalRepeatWidth", typeof(double), typeof(HsSlider), new PropertyMetadata(10.0));
HsHorizontalRepeatHeightProperty = DependencyProperty.Register("HsHorizontalRepeatHeight", typeof(double), typeof(HsSlider), new PropertyMetadata(10.0));
HsForegroundProperty = DependencyProperty.Register("HsForeground", typeof(Brush), typeof(HsSlider), new PropertyMetadata((Brush)brushConverter.ConvertFromString("#1BA3FF")));
HsBackgrondProperty = DependencyProperty.Register("HsBackgrond", typeof(Brush), typeof(HsSlider), new PropertyMetadata((Brush)brushConverter.ConvertFromString("#eee")));
HsValueProperty = DependencyProperty.Register("HsValue", typeof(double), typeof(HsSlider), new PropertyMetadata(0.0, new PropertyChangedCallback(ValueChanged)));
}
public double HsThumbWidth
{
get { return (double)GetValue(HsThumbWidthProperty); }
set { SetValue(HsThumbWidthProperty, value); }
}
public double HsValue
{
get { return (double)GetValue(HsValueProperty); }
set { SetValue(HsValueProperty, value); }
}
public double HsThumbHeight
{
get { return (double)GetValue(HsThumbHeightProperty); }
set { SetValue(HsThumbHeightProperty, value); }
}
public double HsHorizontalRepeatWidth
{
get { return (double)GetValue(HsHorizontalRepeatWidthProperty); }
set { SetValue(HsHorizontalRepeatWidthProperty, value); }
}
public double HsHorizontalRepeatHeight
{
get { return (double)GetValue(HsHorizontalRepeatHeightProperty); }
set { SetValue(HsHorizontalRepeatHeightProperty, value); }
}
public Brush HsForeground
{
get { return (Brush)GetValue(HsForegroundProperty); }
set { SetValue(HsForegroundProperty, value); }
}
public Brush HsBackgrond
{
get { return (Brush)GetValue(HsBackgrondProperty); }
set { SetValue(HsBackgrondProperty, value); }
}
private static void ValueChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var slider = d as HsSlider;
DoubleAnimation doubleAnimation = new DoubleAnimation();
doubleAnimation.From = slider.Value;
doubleAnimation.To = double.Parse(e.NewValue.ToString());
if (_flag)
doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0.3));
else
doubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(0));
slider.BeginAnimation(HsSlider.ValueProperty, doubleAnimation);
}
protected override void OnPreviewMouseDown(MouseButtonEventArgs e)
{
base.OnPreviewMouseUp(e);
_flag = false;
}
protected override void OnPreviewMouseUp(MouseButtonEventArgs e)
{
base.OnPreviewMouseUp(e);
_flag = true;
}
}
2.样式模板修改
<!--颜色-->
<Color x:Key="EffectShadowColor">#88000000</Color>
<DropShadowEffect x:Key="EffectShadow2" BlurRadius="10" ShadowDepth="2" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" />
<DropShadowEffect x:Key="EffectShadow1" BlurRadius="8" ShadowDepth="1" Direction="270" Color="{StaticResource EffectShadowColor}" Opacity=".2" RenderingBias="Performance" />
<!--水平方向的填充色模板-->
<ControlTemplate x:Key="HorizontalRepeatButtonTemplate" TargetType="{x:Type RepeatButton}">
<Rectangle Fill="{TemplateBinding Background}" Height="{Binding HsHorizontalRepeatHeight, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=hs:HsSlider}}"/>
</ControlTemplate>
<!--垂直方向的填充色模板-->
<ControlTemplate x:Key="VerticalRepeatButtonTemplate" TargetType="{x:Type RepeatButton}">
<Rectangle Fill="{TemplateBinding Background}" Width="{Binding HsHorizontalRepeatWidth, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=hs:HsSlider}}"/>
</ControlTemplate>
<!--左侧填充-->
<Style x:Key="RepeatButtonTransparentLeft" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Background" Value="#1BA3FF"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template" Value="{StaticResource HorizontalRepeatButtonTemplate}"/>
</Style>
<!--右侧填充-->
<Style x:Key="RepeatButtonTransparentRight" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template" Value="{StaticResource HorizontalRepeatButtonTemplate}"/>
</Style>
<!--顶部填充-->
<Style x:Key="RepeatButtonTransparentTop" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Background" Value="#1BA3FF"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template" Value="{StaticResource VerticalRepeatButtonTemplate}"/>
</Style>
<!--下面填充-->
<Style x:Key="RepeatButtonTransparentBottom" TargetType="{x:Type RepeatButton}">
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Focusable" Value="false"/>
<Setter Property="IsTabStop" Value="false"/>
<Setter Property="Template" Value="{StaticResource VerticalRepeatButtonTemplate}"/>
</Style>
<!--滑块样式-->
<ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}">
<Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
<Ellipse x:Name="grip" Fill="White" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" SnapsToDevicePixels="True" Stretch="Fill" StrokeThickness="0" Stroke="#1BA3FF"
Effect="{StaticResource EffectShadow1}" UseLayoutRounding="True" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{StaticResource EffectShadow2}"/>
</Trigger>
<EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:.1" To="2" Storyboard.TargetName="grip" Storyboard.TargetProperty="StrokeThickness" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:.1" To="0" Storyboard.TargetName="grip" Storyboard.TargetProperty="StrokeThickness" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--垂直方向-->
<ControlTemplate x:Key="SliderThumbVerticalDefault" TargetType="{x:Type Thumb}">
<Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center">
<Ellipse x:Name="grip" Fill="White" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" SnapsToDevicePixels="True" Stretch="Fill" StrokeThickness="0" Stroke="#1BA3FF"
Effect="{StaticResource EffectShadow1}" UseLayoutRounding="True" VerticalAlignment="Center"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Effect" Value="{StaticResource EffectShadow2}"/>
</Trigger>
<EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:.1" To="2" Storyboard.TargetName="grip" Storyboard.TargetProperty="StrokeThickness" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:.1" To="0" Storyboard.TargetName="grip" Storyboard.TargetProperty="StrokeThickness" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--slider 水平样式-->
<ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}">
<Border x:Name="border" VerticalAlignment="Center" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TickBar x:Name="TopTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,0,0,2" Placement="Top" Grid.Row="0" Visibility="Collapsed"/>
<TickBar x:Name="BottomTick" Fill="{TemplateBinding Foreground}" Height="4" Margin="0,2,0,0" Placement="Bottom" Grid.Row="2" Visibility="Collapsed"/>
<Border x:Name="TrackBackground" Background="Transparent" BorderBrush="Transparent" BorderThickness="1" Height="4.0" Margin="5,0" Grid.Row="1" VerticalAlignment="center">
<Canvas Margin="-6,-1" >
<Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Height="4.0"/>
</Canvas>
</Border>
<Track x:Name="PART_Track" Grid.Row="1">
<Track.DecreaseRepeatButton>
<!--滑动块左侧-->
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparentLeft}" SnapsToDevicePixels="True"
Background="{Binding Path=HsForeground, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<!--滑动块右侧-->
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparentRight}" SnapsToDevicePixels="True"
Background="{Binding Path=HsBackgrond, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Focusable="False" Margin="-1,0,0,0" SnapsToDevicePixels="True"
Height="{Binding Path=HsThumbHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Width="{Binding Path=HsThumbWidth, RelativeSource={RelativeSource Mode=TemplatedParent}}"
OverridesDefaultStyle="True" Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center" />
</Track.Thumb>
</Track>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelectionRangeEnabled" Value="true">
<Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<!--silder垂直方向控件模板-->
<ControlTemplate x:Key="SliderVertical" TargetType="{x:Type Slider}">
<Border x:Name="border" HorizontalAlignment="Center" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition MinWidth="{TemplateBinding MinWidth}" Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TickBar x:Name="TopTick" Grid.Column="0" Fill="{TemplateBinding Foreground}" Margin="0,0,2,0" Placement="Left" Visibility="Collapsed" Width="4"/>
<TickBar x:Name="BottomTick" Grid.Column="2" Fill="{TemplateBinding Foreground}" Margin="2,0,0,0" Placement="Right" Visibility="Collapsed" Width="4"/>
<Border x:Name="TrackBackground" Background="Transparent" BorderBrush="Transparent" BorderThickness="1" Grid.Column="1" HorizontalAlignment="center" Margin="0,5" Width="4.0">
<Canvas Margin="-1,-6">
<Rectangle x:Name="PART_SelectionRange" Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Visibility="Hidden" Width="4.0"/>
</Canvas>
</Border>
<Track x:Name="PART_Track" Grid.Column="1">
<Track.DecreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparentTop}"
Background="{Binding Path=HsForeground, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</Track.DecreaseRepeatButton>
<Track.IncreaseRepeatButton>
<RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparentBottom}"
Background="{Binding Path=HsBackgrond, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Track.IncreaseRepeatButton>
<Track.Thumb>
<Thumb x:Name="Thumb" Focusable="False" OverridesDefaultStyle="True" Template="{StaticResource SliderThumbVerticalDefault}" VerticalAlignment="Top"
Height="{Binding Path=HsThumbHeight, RelativeSource={RelativeSource Mode=TemplatedParent}}"
Width="{Binding Path=HsThumbWidth, RelativeSource={RelativeSource Mode=TemplatedParent}}"/>
</Track.Thumb>
</Track>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelectionRangeEnabled" Value="true">
<Setter Property="Visibility" TargetName="PART_SelectionRange" Value="Visible"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true">
<Setter Property="Foreground" TargetName="Thumb" Value="Blue"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style x:Key="CusSliderStyle" TargetType="{x:Type hs:HsSlider}">
<Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Template" Value="{StaticResource SliderHorizontal}"/>
<Style.Triggers>
<Trigger Property="Orientation" Value="Vertical">
<Setter Property="Template" Value="{StaticResource SliderVertical}"/>
</Trigger>
</Style.Triggers>
</Style>