2

3つのスライダーコントロールを積み重ねて「レンジスライダー」を作成しています。基本的な考え方は、ここから2つのスライダーを使用することです。

http://www.thejoyofcode.com/Creating_a_Range_Slider_in_WPF_and_other_cool_tips_and_tricks_for_UserControls_.aspx

3番目のスライダーを追加します。このスライダーの親指は、他のスライダーの親指の間のスペースを埋めます。ユーザーは、この中央の親指をドラッグして両端を移動し、両端の間隔を一定に保つことができます。

XAMLは単純に3つのスライダーです。うまくレイヤー化する秘訣は、コントロールテンプレートを使用することです（ここでは再現されていません。上記のURLで見つけることができます）。

<Grid VerticalAlignment="Top">
    <Border BorderThickness="0,1,0,0" BorderBrush="Green" VerticalAlignment="Center" Height="1" 
            Margin="5,0,5,0"/>

    <Slider x:Name="LowerSlider"
            Minimum="{Binding ElementName=root, Path=Minimum}"
            Maximum="{Binding ElementName=root, Path=Maximum}"
            Value="{Binding ElementName=root, Path=LowerValue, Mode=TwoWay}"
            Margin="0,0,0,0"
            Template="{StaticResource simpleSlider}"
            />

    <Slider x:Name="MiddleSlider"
            Minimum="{Binding ElementName=root, Path=Minimum}"
            Maximum="{Binding ElementName=root, Path=Maximum}"
            Value="{Binding ElementName=root, Path=MiddleValue, Mode=TwoWay}"
            Margin="10,0,0,0"
            Template="{StaticResource simpleSlider}"
            >
   </Slider>

    <Slider x:Name="UpperSlider"
            Minimum="{Binding ElementName=root, Path=Minimum}"
            Maximum="{Binding ElementName=root, Path=Maximum}"
            Value="{Binding ElementName=root, Path=UpperValue, Mode=TwoWay}"
            Margin="20,0,0,0"
            Template="{StaticResource simpleSlider}"
            />
</Grid>

どちらかの外側の親指をドラッグしたら、中央の親指のサイズを変更して、2つの端の親指の間のスペースを埋める必要があります。

背後のコードでは、親指の動きをキャッチでき、中央のスライダーコントロールを見つけることができますが、プログラムで中央のスライダーの親指に到達して、サイズを変更して2つの外側の親指の間のスペース。

private void UpperSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
         Slider slider= (Slider) this.FindName("MiddleSlider");
        // how to find the middleSlider thumb so I can set
        // it's width to fill the space between the outer thumbs
    }

アイデアをありがとう、

ミッチ

4

2 に答える 2

3

これはそれを行う必要があります：

var track = (Track)slider.Template.FindName("PART_Track", slider);
var thumb = track.Thumb;
thumb.Width = fittingWidth;

（ちなみに、私はこの方法では行いません。MultiBinding他の2つのスライダーと、そこから幅を計算するコンバーターにaを適用します）

于 2011-05-10T22:06:44.117 に答える
1 
    private void UpperSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        Slider slider = (Slider) FindName("MiddleSlider");
        Track track = slider.Template.FindName("PART_Track", slider) as Track;
        if (track != null)
        {
            Rectangle thumbRectangle = track.Thumb.Template.FindName("Rect1", track.Thumb) as Rectangle;
            if (thumbRectangle != null)
            {
                thumbRectangle.Width = CalculateWidth();
            }
        }
    }
于 2011-05-11T14:54:04.097 に答える