2011-05-10 85 views
2

我正在通過堆疊在彼此頂部的三個滑塊控件創建「範圍滑塊」。基本的想法是從這裏使用兩個滑塊。如何查找滑塊的大拇指以設置其寬度

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

我增加了第三滑,其拇指將填補從另一個滑板的拇指之間的空間。用戶將能夠拖動這個中心拇指來移動兩端並保持兩端之間的恆定間距。

XAML只是三個滑塊。讓它很好地分層的祕訣在於使用控件模板(這裏沒有重新編程,你可以在上面的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> 

由於要拖動外部的拇指,我需要調整中心拇指的大小以填充兩個末端拇指之間的空間。

在後面的代碼中,我可以捕捉到拇指的移動,並且我可以找到中間滑塊控件,但我無法弄清楚如何以編程方式到達中間滑塊的大拇指,以便可以調整大小它填充兩個外部拇指之間的空間。

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 
    } 

感謝您的任何想法,

米奇

回答

3

這應做到:

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

順便說一句,我不會做這種方式,我會申請一個MultiBinding到另外兩個滑塊和一個轉換器,該轉換器可以計算出該寬度

+0

謝謝@ H.B。這是我錯過的概念。爲了爲未來的讀者完成示例,拇指也是模板化的,所以我需要以相同的方式檢索它的表示。 – Mitch 2011-05-11 14:50:27

+0

我以爲你只想設置寬度?這應該是可能的,而不會潛入拇指模板。無論如何,如果這回答了你的問題,你可以接受我的答案左邊的複選標記。 – 2011-05-11 14:54:02

+0

我只想補充一點,計算中間拇指的寬度以填充兩個外部拇指之間的空間會很複雜,因爲隨着拇指寬度的增加,拇指左右移動的像素數量會減少。這是因爲當拇指的左邊緣到達控件的左邊緣時,滑塊會停止拇指。當拇指更寬時,拇指的中心會移位。解決方法是計算兩個外部大拇指的位置(以像素爲單位),然後計算slider.Value,它將將中間拇指放置在兩個外部大拇指之間。 – Mitch 2011-05-12 15:29:00

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