WPF 实现滑块选择器

一、新建一个WPF项目，创建一个自定义组件

二、继承于控件ListView，cs代码部分

  [TemplatePart(Name = "PART_Slider", Type = typeof(Border))]
  [TemplatePart(Name = "PART_TransSlider", Type = typeof(TranslateTransform))]
  public class SliderSelector : ListView
  { 
      private double sliderWidth;  //滑块宽度
      private bool canSlider = false;
      static SliderSelector()
      {
          DefaultStyleKeyProperty.OverrideMetadata(typeof(SliderSelector), new FrameworkPropertyMetadata(typeof(SliderSelector)));
      }

      protected override void OnSelectionChanged(SelectionChangedEventArgs e)
      {
          if (canSlider)
          { 
              if (GetTemplateChild("PART_TransSlider") is TranslateTransform transSlider)
              {
                  ///选中滑块改变滑块位置 并入动画 
                  var animation = new DoubleAnimation
                  {
                      Duration = TimeSpan.FromSeconds(0.2),
                      To = sliderWidth * SelectedIndex
                  };
                  transSlider.BeginAnimation(TranslateTransform.XProperty, animation);
              }
          }
          base.OnSelectionChanged(e);
      }


      protected override void OnItemsSourceChanged(IEnumerable oldValue, IEnumerable newValue)
      {
          if (HasItems)
          {
              sliderWidth = ActualWidth / Items.Count;
              if (GetTemplateChild("PART_Slider") is Border slider)
              {
                  //计算滑块宽度
                  slider.Width = sliderWidth - 8;
              }

              if (GetTemplateChild("PART_TransSlider") is TranslateTransform transSlider)
              {
                  transSlider.X = sliderWidth * SelectedIndex;
              }
              canSlider = true;
          }
          base.OnItemsSourceChanged(oldValue, newValue);
      }

      protected override void OnRender(DrawingContext drawingContext)
      {
          if (HasItems)
          {
              sliderWidth = ActualWidth / Items.Count;
              if (GetTemplateChild("PART_Slider") is Border slider)
              {
                  //计算滑块宽度
                  slider.Width = sliderWidth - 8;
              }

              if (GetTemplateChild("PART_TransSlider") is TranslateTransform transSlider)
              {
                  transSlider.X = sliderWidth * SelectedIndex;
              }
              canSlider = true;
          }
          base.OnRender(drawingContext);
      }

  }

三、Xaml代码部分

    <Style TargetType="{x:Type local:SliderSelector}">
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="HorizontalContentAlignment" Value="Center" />
        <Setter Property="Height" Value="40" />
        <Setter Property="SelectedIndex" Value="0" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:SliderSelector}">
                    <Grid>
                        <Border Name="Slider_Bd" Padding="4" CornerRadius="3" Background="#e3e3e3" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"  SnapsToDevicePixels="true">
                            <Border x:Name="PART_Slider" Background="White" HorizontalAlignment="Left" CornerRadius="3">
                                <Border.RenderTransform>
                                    <TranslateTransform x:Name="PART_TransSlider" />
                                </Border.RenderTransform>
                            </Border>
                        </Border>
                        <ItemsPresenter  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemsPanel" >
            <Setter.Value>
                <ItemsPanelTemplate >
                    <UniformGrid Rows="1" Width="Auto"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <Style TargetType="ListViewItem">
                    <Setter Property="Padding" Value="15 5" />
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ListViewItem">
                                <Border x:Name="Bd"  Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true">
                                    <ContentPresenter  SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                                </Border>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
    </Style>

四、使用方式与运行效果

源码地址：https://download.csdn.net/download/qq_38060581/88797810