WPF中有中心点的slider滑动条

杨沫

想要实现的效果

原生滑动条

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

• 在原生控件中生成“资源字典”对应的样式
  
• 然后在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.         }
19.         // Using a DependencyProperty as the backing store for LineX2.  This enables animation, styling, binding, etc...
20.         public static readonly DependencyProperty LineX2Property =
21.             DependencyProperty.Register("LineX2", typeof(double), typeof(CentreSlider), new PropertyMetadata(0.0));
22.         // Using a DependencyProperty as the backing store for LineX1.  This enables animation, styling, binding, etc...
23.         public static readonly DependencyProperty LineX1Property =
24.             DependencyProperty.Register("LineX1", typeof(double), typeof(CentreSlider), new PropertyMetadata(0.0));
26.         public void RefreshSlider() {
27.             var Proportion = ActualWidth / Maximum;
28.             LineX1 = ActualWidth / 2;
29.             LineX2 = Value * Proportion;
30.         }
31.     }

复制代码

最终效果

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