WPF中有中心點的slider滑動條

想要實現的效果

原生滑動條

需要認識一下滑動條的組成

• 在原生控制項中生成“資源字典”對應的樣式
• 然後在track所在的列進行添磚加瓦
• 由於track在row="1"的位置，只需要在這個位置上面添加一個Ellipse和Line
• Ellipse是來描述固定在滑動條上的中心點的位置
• line是來描述Thumb從中心點移動到其他位置顯示的顏色

具體的自定樣式修改

SliderHorizontal樣式

<Grid>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" MinHeight="{TemplateBinding MinHeight}" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>
    <TickBar
      x:Name="TopTick"
      Grid.Row="0"
      Height="4"
      Margin="0,0,0,2"
      Fill="{TemplateBinding Foreground}"
      Placement="Top"
      Visibility="Collapsed" />
    <TickBar
     x:Name="BottomTick"
     Grid.Row="2"
     Height="4"
     Margin="0,2,0,0"
     Fill="{TemplateBinding Foreground}"
     Placement="Bottom"
     Visibility="Collapsed" />
     <Border
     x:Name="TrackBackground"
     Grid.Row="1"
     Height="4.0"
     Margin="5,0"
     VerticalAlignment="center"
     Background="{StaticResource SliderThumb.Track.Border}"
     BorderBrush="{StaticResource SliderThumb.Track.Border}"
     BorderThickness="1">
     <Canvas Margin="-6,-1">
       <Rectangle
        x:Name="PART_SelectionRange"
        Height="4.0"
        Fill="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"
        Visibility="Hidden" />
      </Canvas>
     </Border>
      <Ellipse
       Grid.Row="1"
       Width="10"
       Height="10"
       Fill="Black" />
      <Line
      Grid.Row="1"
      Grid.RowSpan="3"
      VerticalAlignment="Center"
      Fill="Purple"
      Stroke="Purple"
      StrokeThickness="3"
      X1="{Binding Path=LineX1, RelativeSource={RelativeSource TemplatedParent}}"
      X2="{Binding Path=LineX2, RelativeSource={RelativeSource TemplatedParent}}"
      Y1="0"
      Y2="0" />
     <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"
             Width="11"
             Height="18"
             VerticalAlignment="Center"
             Focusable="False"
             OverridesDefaultStyle="True"
             Template="{StaticResource SliderThumbHorizontalDefault}" />
             </Track.Thumb>
           </Track>
</Grid>

主要顏色距離的顯示通過X1和X2的編輯顯示距離

• 所以需要將這裡的X1和X2改成自定義進行綁定
• 新建自定義控制項

自定義控制項CentreSlider

public class CentreSlider : Slider {
        protected override void OnValueChanged(double oldValue, double newValue) {
            base.OnValueChanged(oldValue, newValue);
            RefreshSlider();
        }
        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo) {
            base.OnRenderSizeChanged(sizeInfo);
            RefreshSlider();
        }
        public double LineX1 {
            get { return (double)GetValue(LineX1Property); }
            set { SetValue(LineX1Property, value); }
        }
        public double LineX2 {
            get { return (double)GetValue(LineX2Property); }
            set { SetValue(LineX2Property, value); }
        }

        // Using a DependencyProperty as the backing store for LineX2.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty LineX2Property =
            DependencyProperty.Register("LineX2", typeof(double), typeof(CentreSlider), new PropertyMetadata(0.0));
        // Using a DependencyProperty as the backing store for LineX1.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty LineX1Property =
            DependencyProperty.Register("LineX1", typeof(double), typeof(CentreSlider), new PropertyMetadata(0.0));

        public void RefreshSlider() {
            var Proportion = ActualWidth / Maximum;
            LineX1 = ActualWidth / 2;
            LineX2 = Value * Proportion;
        }
    }

最終效果