在WPF中将滑块值绑定到其拇指的高度

时间:2010-04-22 08:57:42

标签: wpf templates wpf-controls slider

我在WPF中遇到了数据绑定问题。

当我将滑块向右移动时,我希望以拇指增长的方式“自定义”滑块,当您将滑块向左移动时,拇指会缩小。

所以我编辑了滑块的模板,并改变了滑块的外观,使滑块看起来像我想要的那样。

但是现在我必须将拇指的高度绑定到滑块的值,但我不知道它是如何工作的。

我做了一些简单的数据绑定工作,但我无法弄清楚如何将滑块模板内部的“拇指高度”绑定到我的滑块所在的用户控件内的滑块值。

那我该怎么做呢?

2 个答案:

答案 0 :(得分:3)

您可以使用RelativeSource绑定(Height="{Binding Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}")。

以下是拇指样式的示例,取决于Slider.Value:

<Style x:Key="SliderThumbStyle" TargetType="{x:Type Thumb}">
  <Setter Property="SnapsToDevicePixels" Value="true"/>
  <Setter Property="OverridesDefaultStyle" Value="true"/>
  <Setter Property="Width" Value="14"/>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type Thumb}">
        <Ellipse 
          Name="Ellipse" 
          Fill="#C0C0C0"
          Stroke="#404040" 
          Height="{Binding Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}"
          StrokeThickness="1" />
        <ControlTemplate.Triggers>
          <Trigger Property="IsMouseOver" Value="True">
            <Setter TargetName="Ellipse" Property="Fill" Value="#808080"/>
          </Trigger>
          <Trigger Property="IsEnabled" Value="false">
            <Setter TargetName="Ellipse" Property="Fill" Value="#EEEEEE"/>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

希望这会有所帮助。

干杯安瓦卡

答案 1 :(得分:1)

在这里查看我的问题和答案 -

In WPF/XAML how do I change the size of a paragraph of text using a scroll bar?

如果你有这样的事情:

<ScrollBar x:Name="scroll1"></ScrollBar>

<Image Height="{Binding ElementName=scroll1, Path=Value}" />

NB 我不是100%确定图片的语法,因此您需要将其作为伪代码。