正文 

当前位置： 首页 > 知识 >

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

     2023-02-18     176

关键词：

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

【讨论】：

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

】如何将另一个图像添加到滑块的拇指或如何添加两个拇指图像？【英文标题】：HowtoaddaanotherimagetoThumbofasliderorHowtoaddtwothumbimages?【发布时间】：2015-05-1109:44:25【问题描述】：我正在使用故事板构建ios应用程序。我现在面临一个... 查看详情

如何让滑块的拇指一直移动到最后？

】如何让滑块的拇指一直移动到最后？【英文标题】：Howtomakethethumbofaslidermoveallthewaytotheend?【发布时间】：2020-03-1509:16:28【问题描述】：基本上，我想要一个适用于真假的范围滑块。fieldset>*vertical-align:middle;.quiz-label-left,.quiz-la... 查看详情

在 UWP 中获取滑块的拇指

...键单击Slider->EditTemplate->Editacopy我的问题是我不知道如何访问滑块的拇指...我想要这样的东西Thum 查看详情

在 React 中，如何在范围滑块的拇指上创建一个气泡头

】在React中，如何在范围滑块的拇指上创建一个气泡头【英文标题】：InReact,howtocreateabubbleheadontopofthethumbofarangeslider【发布时间】：2021-10-2808:29:56【问题描述】：varslider=document.getElementById("myRange");varoutput=document.getElementById("demo");ou... 查看详情

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

】自定义UI滑块，拇指图像大小问题【英文标题】：CustomUIslider,Thumbimagesizeissue【发布时间】：2013-01-3005:58:00【问题描述】：当我正在制作自定义滑块时，一切正常。因为我有一个宽度和高度为30x70的拇指图像。但是当我实现图像... 查看详情

将滑块的拇指模板编辑为图像 Windows Phone 7

...多“自定义滑块”。但由于某种原因，我似乎无法弄清楚如何制作拇指滑动图像（例如png）。这是问题所在的一点点xa 查看详情

Flash：防止用户拖动滑块的一个拇指

】Flash：防止用户拖动滑块的一个拇指【英文标题】：Flash:preventtheuserfromdragingonethumbofaHSlider【发布时间】：2011-02-0620:50:08【问题描述】：我正在使用FlashHSlider组件。我使用了一个带有几个拇指的滑块。我想防止用户只拖动中间拇... 查看详情

如何在iphone中删除UISlider的拇指？

】如何在iphone中删除UISlider的拇指？【英文标题】：HowtoremovethethumbofUISlideriniphone?【发布时间】：2012-12-0813:23:13【问题描述】：我在同一个视图中有两个UISlider。我的要求是，当用户更改第一个滑块的值时，第二个滑块的值应该根... 查看详情

闪亮的滑块输入——如何控制闪亮的滑块的长度/宽度？

】闪亮的滑块输入——如何控制闪亮的滑块的长度/宽度？【英文标题】：sliderInputinShiny--howtocontrolthelength/widthofthesliderinshiny?【发布时间】：2013-06-0223:40:52【问题描述】：当我在闪亮中使用sliderInput函数时，似乎我无法控制滑块的... 查看详情

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

】如何使用jQuery中的滑块更改样式的值【英文标题】：HowtochangevalueofstyleusingasliderinjQuery【发布时间】：2021-09-1303:57:51【问题描述】：我有一个在jQuery中改变其值的滑块。如何使用此滑块更改我的宽度中的样式值，以便div的宽度... 查看详情

具有清晰背景的 UISlider 拇指图像在其后面显示轨道

...wstrackbehindit【发布时间】：2016-07-0413:19:09【问题描述】：如何在UISlider上设置清晰的拇指背景，以便在拇指后面看不到轨道？当我使用setThumbImage:forState:并传递一个部分透明的图像时，滑块的最小轨道和最大轨道图像/颜色在拇指... 查看详情

如何在颤动的滑块中填充拇指周围的颜色

】如何在颤动的滑块中填充拇指周围的颜色【英文标题】：Howtofillcoloraroundthethumbinsliderinflutter【发布时间】：2020-09-1923:18:03【问题描述】：我是Flutter的新手。我正在使用Slider小部件。当我增加滑块的高度（trackHeight）时，轨道确... 查看详情

CSS - Firefox 中滑块的宽度

】CSS-Firefox中滑块的宽度【英文标题】：CSS-WidthofSliderinFirefox【发布时间】：2013-03-1517:59:30【问题描述】：我正在修复一个网站。我遇到了我使用的滑块的问题。我使用的滑块是轨道滑块。事情是这样的：每张幻灯片加载比容器... 查看详情

如何获取qslider控件滑块的宽度和位置

参考技术AsliderMoved()信号，QSlider::setRange(min,max);QSlider::setValue(int);QSlider::setSliderPosition(int); 查看详情

如何获取qslider控件滑块的宽度和位置

参考技术AsliderMoved()信号，QSlider::setRange(min,max);QSlider::setValue(int);QSlider::setSliderPosition(int); 查看详情

如何垂直移动带有滑块的UILabel

】如何垂直移动带有滑块的UILabel【英文标题】：howtomoveUILabelwithsliderinvertical【发布时间】：2013-04-2614:10:19【问题描述】：我想将我的滑块与我的拇指图像一起垂直移动。但是移动是错误的。在水平方向上它可以完美地工作，但... 查看详情

使用滑块更改两个块的宽度比例

】使用滑块更改两个块的宽度比例【英文标题】：Changewidthproportionsoftwoblockswithaslider【发布时间】：2019-08-2818:46:36【问题描述】：我正在尝试设计一个组件，您可以在其中通过左右移动滑块来更改两个块的宽度比例：codpen和演示... 查看详情

用PNG替换滑块拇指？

...input[type=range]::-webkit-slider-thumb”允许您选择缩略图。这是如何在Safari、Firefox和其 查看详情