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

<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,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();
}

看起来不错：

祝你好运！