WPF滑塊控制項(Slider)的自定義樣式
- 2019 年 10 月 3 日
- 筆記
??
??????????????????????????????????????
???????
?????????Slider???
????Slider?Window?????????
????????.???????
????????????Resources????????????????????????????
<Slider HorizontalAlignment="Left" Width="200" VerticalAlignment="Top" Style="{DynamicResource SliderStyle1}"/>
???????????Slider???????——Style=”{DynamicResource SliderStyle1}”
????????SliderStyle1?F12??????
<Style x:Key="SliderStyle1" TargetType="{x:Type Slider}"> <Setter Property="Stylus.IsPressAndHoldEnabled" Value="false"/> <Setter Property="Background" Value="Transparent"/> <Setter Property="BorderBrush" Value="Transparent"/> <Setter Property="Foreground" Value="{StaticResource SliderThumb.Static.Foreground}"/> <Setter Property="Template" Value="{StaticResource SliderHorizontal}"/> <Style.Triggers> <Trigger Property="Orientation" Value="Vertical"> <Setter Property="Template" Value="{StaticResource SliderVertical}"/> </Trigger> </Style.Triggers> </Style>
????????????Slider??????SliderHorizontal??????????Vertical?????SliderVertical???
??Slider?????????????????SliderHorizontal????Slider??????
???????F12??SliderHorizontal????
<ControlTemplate x:Key="SliderHorizontal" TargetType="{x:Type Slider}"> <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 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" BorderBrush="{StaticResource SliderThumb.Track.Border}" BorderThickness="1" Background="{StaticResource SliderThumb.Track.Background}" 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" Visibility="Hidden"/> </Canvas> </Border> <Track x:Name="PART_Track" Grid.Row="1"> <Track.DecreaseRepeatButton> <RepeatButton Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/> </Track.DecreaseRepeatButton> <Track.IncreaseRepeatButton> <RepeatButton Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/> </Track.IncreaseRepeatButton> <Track.Thumb> <Thumb x:Name="Thumb" Focusable="False" Height="18" OverridesDefaultStyle="True" Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center" Width="11"/> </Track.Thumb> </Track> </Grid> </Border> <ControlTemplate.Triggers> <Trigger Property="TickPlacement" Value="TopLeft"> <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/> <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalTop}"/> <Setter Property="Margin" TargetName="TrackBackground" Value="5,2,5,0"/> </Trigger> <Trigger Property="TickPlacement" Value="BottomRight"> <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/> <Setter Property="Template" TargetName="Thumb" Value="{StaticResource SliderThumbHorizontalBottom}"/> <Setter Property="Margin" TargetName="TrackBackground" Value="5,0,5,2"/> </Trigger> <Trigger Property="TickPlacement" Value="Both"> <Setter Property="Visibility" TargetName="TopTick" Value="Visible"/> <Setter Property="Visibility" TargetName="BottomTick" Value="Visible"/> </Trigger> <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>
SliderHorizontal????????????????????——???
????????Border x:Name=”TrackBackground”?????TrackBackground??????????????????????????
<Border x:Name="TrackBackground" BorderBrush="Red" BorderThickness="1" Background="Yellow" 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" Visibility="Hidden"/> </Canvas> </Border>
???????
???????????????????????????????
?SliderHorizontal?????DecreaseRepeatButton?IncreaseRepeatButton??????????????????????????
???????
<Track x:Name="PART_Track" Grid.Row="1"> <Track.DecreaseRepeatButton> <RepeatButton Height="4" Background="Gray" Command="{x:Static Slider.DecreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/> </Track.DecreaseRepeatButton> <Track.IncreaseRepeatButton> <RepeatButton Height="4" Background="Green" Command="{x:Static Slider.IncreaseLarge}" Style="{StaticResource RepeatButtonTransparent}"/> </Track.IncreaseRepeatButton> <Track.Thumb> <Thumb x:Name="Thumb" Focusable="False" Height="18" OverridesDefaultStyle="True" Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center" Width="11"/> </Track.Thumb> </Track>
???????
?????Height??????
??????????????????????????????????????????
????????????????????——Thumb?
????Thumb????SliderThumbHorizontalDefault??????????F12??SliderThumbHorizontalDefault???????
<ControlTemplate x:Key="SliderThumbHorizontalDefault" TargetType="{x:Type Thumb}"> <Grid HorizontalAlignment="Center" UseLayoutRounding="True" VerticalAlignment="Center"> <Path x:Name="grip" Data="M 0,0 C0,0 11,0 11,0 11,0 11,18 11,18 11,18 0,18 0,18 0,18 0,0 0,0 z" Fill="{StaticResource SliderThumb.Static.Background}" Stretch="Fill" SnapsToDevicePixels="True" Stroke="{StaticResource SliderThumb.Static.Border}" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/> </Grid> <ControlTemplate.Triggers> <Trigger Property="IsMouseOver" Value="true"> <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Background}"/> <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.MouseOver.Border}"/> </Trigger> <Trigger Property="IsDragging" Value="true"> <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Background}"/> <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Pressed.Border}"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Fill" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Background}"/> <Setter Property="Stroke" TargetName="grip" Value="{StaticResource SliderThumb.Disabled.Border}"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate>
?????????????????????????Grid?????Path???????3??
?????Path?Fill????Stroke????????
<Path x:Name="grip" Data="M 0,0 C0,0 11,0 11,0 11,0 11,18 11,18 11,18 0,18 0,18 0,18 0,0 0,0 z" Fill="Red" Stretch="Fill" SnapsToDevicePixels="True" Stroke="Blue" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"/>
???????
???????????????????????????????????????
????Thumb????????????????????????????
??????
<Track.Thumb> <Thumb x:Name="Thumb" Focusable="False" OverridesDefaultStyle="True" Template="{StaticResource SliderThumbHorizontalDefault}" VerticalAlignment="Center" /> </Track.Thumb>
????????SliderThumbHorizontalDefault???
??????Path?????Data?????Data?????????????????????????Path??????????
<Path x:Name="grip" Width="20" Height="20" Fill="Red" Stretch="Fill" SnapsToDevicePixels="True" Stroke="Blue" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"> <Path.Data> <EllipseGeometry Center="10,10" RadiusX="10" RadiusY="10"></EllipseGeometry> </Path.Data> </Path>
?????????
????????????????????????????
????????Path?Width???????14????????
???????????????????????????????????????????Path?????????????
<Path x:Name="grip" Width="14" Height="20" Fill="Red" Stretch="Fill" SnapsToDevicePixels="True" Stroke="Blue" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="0,0" IsClosed="True"> <LineSegment Point="0,0" /> <LineSegment Point="110,0" /> <LineSegment Point="70,40" /> <LineSegment Point="-40,40" /> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path>
??????
???????????????
<Path x:Name="grip" Width="14" Height="20" Fill="Red" Stretch="Fill" SnapsToDevicePixels="True" Stroke="Blue" StrokeThickness="1" UseLayoutRounding="True" VerticalAlignment="Center"> <Path.Data> <PathGeometry> <PathGeometry.Figures> <PathFigure StartPoint="0,0" IsClosed="True"> <LineSegment Point="30,0" /> <LineSegment Point="15,100" /> </PathFigure> </PathGeometry.Figures> </PathGeometry> </Path.Data> </Path>
??????
—————————————————————————————————-
??????????????????????????????????????SliderVertical????????????
—————————————————————————————————-
??WPF????(Slider)???????????????
??????Github??????????
Github???https://github.com/kiba518/WpfSlider
—————————————————————————————————-
????????????????????????????????
????????????????????????????
https://www.cnblogs.com/kiba/p/11253686.html