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