Question

如何使用两个拇指创建自定义滑块。一个用于表示较高范围而另一个用于较低范围。例如价格范围。如果该值低于50，则表示较低的范围，如果该值高于50，则表示较高的范围。

Answer 1

这不是一个小问题。我不会这样做，但我会让你开始：

<Grid Background="Black">
    <Grid Height="100" Width="500" Background="DimGray">
        <Grid.Resources>
            <Style TargetType="Grid" x:Name="HandleStyle">
                <Setter Property="Height" Value="50" />
                <Setter Property="Width" Value="50" />
                <Setter Property="Background" Value="White" />
                <Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
            </Style>
            <Style TargetType="TextBlock" x:Name="HandleTextStyle">
                <Setter Property="Foreground" Value="DimGray" />
                <Setter Property="FontSize" Value="20" />
                <Setter Property="TextAlignment" Value="Center" />
                <Setter Property="HorizontalAlignment" Value="Center" />
                <Setter Property="VerticalAlignment" Value="Center" />
                <Setter Property="IsHitTestVisible" Value="False" />
            </Style>
        </Grid.Resources>
        <Rectangle Height="10" Width="450" Fill="DarkGray" />
        <Grid x:Name="LeftHandle" Style="{StaticResource HandleStyle}"
              ManipulationMode="TranslateX" 
              ManipulationDelta="LeftHandle_ManipulationDelta">
            <Grid.RenderTransform>
                <CompositeTransform TranslateX="-200"/>
            </Grid.RenderTransform>
            <TextBlock x:Name="LeftHandleText" Text="0"
                       Style="{StaticResource HandleTextStyle}" />
        </Grid>
        <Grid x:Name="RightHandle" Style="{StaticResource HandleStyle}"
              ManipulationMode="TranslateX" 
              ManipulationDelta="RightHandle_ManipulationDelta" RenderTransformOrigin="0.5,0.5">
            <Grid.RenderTransform>
                <CompositeTransform TranslateX="-150"/>
            </Grid.RenderTransform>
            <TextBlock x:Name="RightHandleText" Text="0"
                       Style="{StaticResource HandleTextStyle}" />
        </Grid>
    </Grid>
</Grid>

使用此代码隐藏：

int Min = 0;
int Max = 100;
int Size = 100;
int Range = 200;

private void LeftHandle_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var t = (sender as Grid).RenderTransform as CompositeTransform;
    var x = (RightHandle.RenderTransform as CompositeTransform).TranslateX;
    var f = -this.Range;
    var c = x - this.Size * .5;
    t.TranslateX = Translate(t, e, f, c);
    LeftHandleText.Text = Text(t.TranslateX);
}

private void RightHandle_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
{
    var t = (sender as Grid).RenderTransform as CompositeTransform;
    var x = (LeftHandle.RenderTransform as CompositeTransform).TranslateX;
    var f = x + this.Size * .5;
    var c = this.Range;
    t.TranslateX = Translate(t, e, f, c);
    RightHandleText.Text = Text(t.TranslateX);
}

private double Translate(CompositeTransform s, ManipulationDeltaRoutedEventArgs e, double floor, double ceiling)
{
    var target = s.TranslateX + e.Delta.Translation.X;
    if (target < floor)
        return floor;
    if (target > ceiling)
        return ceiling;
    return target;
}

private string Text(double x)
{
    var p = (x - (-this.Range)) / ((this.Range) - (-this.Range)) * 100d;
    var v = (this.Max - this.Min) * p / 100d + this.Min;
    return ((int)v).ToString();
}

看起来不错：

enter image description here

祝你好运！

Answer 2

基于@Jerry Nixon的代码，我创建了一个范围控件。我不知道如何创建自定义控件。所以，简单地将项目放在GitHub中，供所有正在寻找控件的绝望灵魂:)随意贡献或提交问题。会在时间允许的情况下继续努力。

https://github.com/alfah-plackal/CustomSlider

代码可以和你在一起！

如何使用两个拇指实现自定义滑块？

2 个答案: