一、新建一个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