2つの親指でカスタムスライダを実装するにはどうすればよいですか？

Question

2つの親指でカスタムスライダを作成する方法1つは、より高い範囲を表すためであり、もう1つは、より低い範囲を表すためである例えば価格帯。値が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(); 
} 

がよさそうだ：運のベスト

！

Answer 2

@ジェリーニクソンのコードに基づいて、私はレンジコントロールを作成しました。私はカスタムコントロールを作成する方法を知らない。ですから、単に私のような欲望の魂のためにプロジェクトをGitHubに入れて、コントロールを探している人は、気軽に投稿したり、問題を提出してください。時間が許せばそれで動くでしょう。

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

コードがあなたと一緒かもしれません！