如何找到滑块的拇指来设置其宽度

Posted

技术标签:

【中文标题】如何找到滑块的拇指来设置其宽度【英文标题】:How to find the thumb of a slider to set its width 【发布时间】:2011-08-22 20:25:00 【问题描述】:

我正在从三个相互堆叠的滑块控件中创建一个“范围滑块”。基本思想来自这里,它使用两个滑块。

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
    

感谢您的任何想法,

米奇

【问题讨论】:

【参考方案1】:

应该这样做:

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

顺便说一句,我不会这样做,我会将MultiBinding 应用到另外两个滑块和一个从中计算宽度的转换器

【讨论】:

谢谢@H.B.这就是我缺少的概念。只是为了为将来的读者完成示例,拇指也是模板化的,所以我需要以相同的方式检索它的表示。 我以为你只想设置宽度?在不深入拇指模板的情况下,这应该是可能的。无论如何,如果这回答了您的问题,您可以使用我的答案左侧的复选标记大纲接受它。 我只想补充一点,计算中间拇指的宽度以填充两个外部拇指之间的空间很复杂,因为随着拇指宽度的增加,拇指向左移动的像素数和权利减少。这是因为当滑块的左边缘到达控件的左边缘时,滑块会停止滑块。当拇指变宽时,拇指的中心会移动。解决方案是计算两个外部拇指的位置(以像素为单位),然后计算滑块值,将中间拇指定位在两个外部拇指之间。 TrackSystem.Windows.Controls.Primitives 命名空间中。【参考方案2】:
    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();
            
        
    

【讨论】:

以上是关于如何找到滑块的拇指来设置其宽度的主要内容,如果未能解决你的问题,请参考以下文章

如何将另一个图像添加到滑块的拇指或如何添加两个拇指图像?

“bxslider jquery”以指定的宽度更改幻灯片模式

自定义 UI 滑块,拇指图像大小问题

DIV滚动条啥设置滑块的大小及滑道的宽度?

CSS - Firefox 中滑块的宽度

如何使用 jQuery 中的滑块更改样式的值