如何找到滑块的拇指来设置其宽度
我正在用三个相互堆叠的滑块控件创建一个“范围滑块”。基本思想来自这里,它使用两个滑块。
我正在添加第三个滑块其拇指将填充另一个滑块的拇指之间的空间。用户将能够拖动中心拇指来移动两端并保持两端之间的间距恒定。
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
}
I am creating a "range slider" from three slider controls stacked on top of each other. The basic idea is from here which uses two sliders.
I'm adding a third slider whose thumb will fill the space between the the thumbs from the other slider. The user will be able to drag this center thumb to move the two ends and maintain constant spacing between the two ends.
The XAML is simply three sliders. The secret to getting it to layer nicely is in using a control template (not reprodiced here. You can find it at the above 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>
As either outer thumb is dragged, I need to resize the center thumb to fill the space between the two end thumbs.
In the code behind, I can catch the movement of a thumb, and I can find the middle slider control, but I can't figure out how to programatically get to the thumb of the middle slider so that I can resize it to fill the space between the two outer thumbs.
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
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这应该可以做到:(
顺便说一句,我不会这样做,我会应用
MultiBinding
到另外两个滑块和一个从中计算宽度的转换器)This should do it:
(By the way, I would not do it this way, i would apply a
MultiBinding
to the two other sliders and a converter which calculates the width from that)