翼度科技»论坛 编程开发 .net 查看内容

WPF中有中心点的slider滑动条

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
想要实现的效果

原生滑动条

需要认识一下滑动条的组成


  • 在原生控件中生成“资源字典”对应的样式
  • 然后在track所在的列进行添砖加瓦
  • 由于track在row="1"的位置,只需要在这个位置上面添加一个Ellipse和Line
  • Ellipse是来描述固定在滑动条上的中心点的位置
  • line是来描述Thumb从中心点移动到其他位置显示的颜色
具体的自定样式修改
SliderHorizontal样式
  1. <Grid>
  2.     <Grid.RowDefinitions>
  3.       <RowDefinition Height="Auto" />
  4.       <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
  5.       <RowDefinition Height="Auto" />
  6.     </Grid.RowDefinitions>
  7.     <TickBar
  8.       x:Name="TopTick"
  9.       Grid.Row="0"
  10.       Height="4"
  11.       Margin="0,0,0,2"
  12.       Fill="{TemplateBinding Foreground}"
  13.       Placement="Top"
  14.       Visibility="Collapsed" />
  15.     <TickBar
  16.      x:Name="BottomTick"
  17.      Grid.Row="2"
  18.      Height="4"
  19.      Margin="0,2,0,0"
  20.      Fill="{TemplateBinding Foreground}"
  21.      Placement="Bottom"
  22.      Visibility="Collapsed" />
  23.      <Border
  24.      x:Name="TrackBackground"
  25.      Grid.Row="1"
  26.      Height="4.0"
  27.      Margin="5,0"
  28.      VerticalAlignment="center"
  29.      Background="{StaticResource SliderThumb.Track.Border}"
  30.      BorderBrush="{StaticResource SliderThumb.Track.Border}"
  31.      BorderThickness="1">
  32.      <Canvas Margin="-6,-1">
  33.        <Rectangle
  34.         x:Name="PART_SelectionRange"
  35.         Height="4.0"
  36.         Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
  37.         Visibility="Hidden" />
  38.       </Canvas>
  39.      </Border>
  40.       <Ellipse
  41.        Grid.Row="1"
  42.        Width="10"
  43.        Height="10"
  44.        Fill="Black" />
  45.       <Line
  46.       Grid.Row="1"
  47.       Grid.RowSpan="3"
  48.       VerticalAlignment="Center"
  49.       Fill="Purple"
  50.       Stroke="Purple"
  51.       StrokeThickness="3"
  52.       X1="{Binding Path=LineX1, RelativeSource={RelativeSource TemplatedParent}}"
  53.       X2="{Binding Path=LineX2, RelativeSource={RelativeSource TemplatedParent}}"
  54.       Y1="0"
  55.       Y2="0" />
  56.      <Track x:Name="PART_Track" Grid.Row="1">
  57.         <Track.DecreaseRepeatButton>
  58.              <RepeatButton Command="{x:Static Slider.DecreaseLarge}"  />
  59.               </Track.DecreaseRepeatButton>
  60.                <Track.IncreaseRepeatButton>
  61.               <RepeatButton Command="{x:Static Slider.IncreaseLarge}"  />
  62.         </Track.IncreaseRepeatButton>
  63.            <Track.Thumb>
  64.             <Thumb
  65.              x:Name="Thumb"
  66.              Width="11"
  67.              Height="18"
  68.              VerticalAlignment="Center"
  69.              Focusable="False"
  70.              OverridesDefault
  71.              Template="{StaticResource SliderThumbHorizontalDefault}" />
  72.              </Track.Thumb>
  73.            </Track>
  74. </Grid>
复制代码
主要颜色距离的显示通过X1和X2的编辑显示距离


  • 所以需要将这里的X1和X2改成自定义进行绑定
  • 新建自定义控件
自定义控件CentreSlider
  1. public class CentreSlider : Slider {
  2.         protected override void OnValueChanged(double oldValue, double newValue) {
  3.             base.OnValueChanged(oldValue, newValue);
  4.             RefreshSlider();
  5.         }
  6.         protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo) {
  7.             base.OnRenderSizeChanged(sizeInfo);
  8.             RefreshSlider();
  9.         }
  10.         public double LineX1 {
  11.             get { return (double)GetValue(LineX1Property); }
  12.             set { SetValue(LineX1Property, value); }
  13.         }
  14.         public double LineX2 {
  15.             get { return (double)GetValue(LineX2Property); }
  16.             set { SetValue(LineX2Property, value); }
  17.         }
  18.         // Using a DependencyProperty as the backing store for LineX2.  This enables animation, styling, binding, etc...
  19.         public static readonly DependencyProperty LineX2Property =
  20.             DependencyProperty.Register("LineX2", typeof(double), typeof(CentreSlider), new PropertyMetadata(0.0));
  21.         // Using a DependencyProperty as the backing store for LineX1.  This enables animation, styling, binding, etc...
  22.         public static readonly DependencyProperty LineX1Property =
  23.             DependencyProperty.Register("LineX1", typeof(double), typeof(CentreSlider), new PropertyMetadata(0.0));
  24.         public void RefreshSlider() {
  25.             var Proportion = ActualWidth / Maximum;
  26.             LineX1 = ActualWidth / 2;
  27.             LineX2 = Value * Proportion;
  28.         }
  29.     }
复制代码
最终效果




来源:https://www.cnblogs.com/qingxi11/archive/2023/06/09/17468662.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复 使用道具