Avalonia C#中为Slider添加额外Thumb实现范围选择

Avalonia原生Slider仅支持单个Thumb，要实现数值范围选择（同时控制最小值和最大值），可以通过以下两种方案实现：

方案一：叠加两个Slider快速实现 #

这种方式无需自定义控件，通过两个Slider重叠，分别控制最小/最大值，再通过简单逻辑约束数值关系。

AXAML代码 #

<Grid Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="65,0,0,0" Height="35" Width="150">
    <!-- 背景轨道，显示完整数值范围 -->
    <Slider Minimum="0" Maximum="100" IsEnabled="False" 
            Background="#E0E0E0" BorderThickness="0"/>
    <!-- 控制最小值的Slider -->
    <Slider x:Name="MinSlider" Minimum="0" Maximum="100" Value="20"
            ThumbToolTipPlacement="Top" ThumbToolTipFormatString="{}最小值: {0:F0}" />
    <!-- 控制最大值的Slider -->
    <Slider x:Name="MaxSlider" Minimum="0" Maximum="100" Value="80"
            ThumbToolTipPlacement="Top" ThumbToolTipFormatString="{}最大值: {0:F0}" />
</Grid>

后台数值约束（C#） #

添加逻辑确保最小值不会超过最大值：

public YourWindow()
{
    InitializeComponent();
    MinSlider.ValueChanged += OnSliderValueChanged;
    MaxSlider.ValueChanged += OnSliderValueChanged;
}

private void OnSliderValueChanged(object? sender, RangeBaseValueChangedEventArgs e)
{
    if (MinSlider.Value > MaxSlider.Value)
    {
        if (sender == MinSlider) MaxSlider.Value = e.NewValue;
        else MinSlider.Value = e.NewValue;
    }
}

方案二：自定义RangeSlider控件（原生体验） #

如果需要更贴合原生控件的视觉和交互，可自定义带双Thumb的Slider，扩展依赖属性存储最小/最大值。

1. 自定义控件类（C#） #

public class RangeSlider : Slider
{
    public static readonly StyledProperty<double> LowerValueProperty =
        AvaloniaProperty.Register<RangeSlider, double>(nameof(LowerValue), 0.0);

    public static readonly StyledProperty<double> UpperValueProperty =
        AvaloniaProperty.Register<RangeSlider, double>(nameof(UpperValue), 100.0);

    public double LowerValue
    {
        get => GetValue(LowerValueProperty);
        set => SetValue(LowerValueProperty, value);
    }

    public double UpperValue
    {
        get => GetValue(UpperValueProperty);
        set => SetValue(UpperValueProperty, value);
    }

    static RangeSlider()
    {
        LowerValueProperty.Changed.AddClassHandler<RangeSlider>((s, e) => s.OnLowerValueChanged(e));
        UpperValueProperty.Changed.AddClassHandler<RangeSlider>((s, e) => s.OnUpperValueChanged(e));
    }

    private void OnLowerValueChanged(AvaloniaPropertyChangedEventArgs e)
    {
        if (LowerValue > UpperValue) LowerValue = UpperValue;
    }

    private void OnUpperValueChanged(AvaloniaPropertyChangedEventArgs e)
    {
        if (UpperValue < LowerValue) UpperValue = LowerValue;
    }
}

2. 自定义控件模板（AXAML） #

在App.axaml或资源字典中添加模板：

<Style TargetType="local:RangeSlider">
    <Setter Property="Template">
        <ControlTemplate>
            <Grid>
                <Track Name="PART_Track" Minimum="{TemplateBinding Minimum}" Maximum="{TemplateBinding Maximum}">
                    <Track.DecreaseRepeatButton>
                        <RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" />
                    </Track.DecreaseRepeatButton>
                    <Track.IncreaseRepeatButton>
                        <RepeatButton Style="{StaticResource SliderRepeatButtonStyle}" />
                    </Track.IncreaseRepeatButton>
                </Track>
                <!-- 最小值Thumb -->
                <Thumb Name="LowerThumb" DragDelta="LowerThumb_DragDelta">
                    <Thumb.Style>
                        <Style BasedOn="{StaticResource SliderThumbStyle}" TargetType="Thumb" />
                    </Thumb.Style>
                </Thumb>
                <!-- 最大值Thumb -->
                <Thumb Name="UpperThumb" DragDelta="UpperThumb_DragDelta">
                    <Thumb.Style>
                        <Style BasedOn="{StaticResource SliderThumbStyle}" TargetType="Thumb" />
                    </Thumb.Style>
                </Thumb>
            </Grid>
        </ControlTemplate>
    </Setter>
</Style>

3. 添加拖动逻辑（C#） #

在自定义控件中实现Thumb拖动处理：

private void LowerThumb_DragDelta(object sender, VectorEventArgs e)
{
    var track = GetTemplateChild("PART_Track") as Track;
    if (track == null) return;

    var delta = e.Vector.X / track.ActualWidth * (Maximum - Minimum);
    LowerValue = Math.Clamp(LowerValue + delta, Minimum, UpperValue);
}

private void UpperThumb_DragDelta(object sender, VectorEventArgs e)
{
    var track = GetTemplateChild("PART_Track") as Track;
    if (track == null) return;

    var delta = e.Vector.X / track.ActualWidth * (Maximum - Minimum);
    UpperValue = Math.Clamp(UpperValue + delta, LowerValue, Maximum);
}

使用自定义RangeSlider #

<local:RangeSlider Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" 
                   Margin="65,0,0,0" Height="35" Width="150" 
                   Minimum="0" Maximum="100" LowerValue="20" UpperValue="80" />

注意事项 #

• 方案一适合快速落地，可通过调整Slider样式（如隐藏背景）优化视觉；
• 方案二更接近原生体验，但需处理模板绑定和拖动逻辑，适合高度定制场景；
• 两种方案都需确保LowerValue ≤ UpperValue，避免逻辑冲突。

内容的提问来源于stack exchange，提问作者JuninOP