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

Question

我在WPF中遇到了数据绑定问题。我想以一种方式“自定义”滑块，使得当您将滑块向右移动时，拇指会变大，而将滑块向左移动时则会变小。

因此，我编辑了滑块的模板并更改了滑块的外观，以便滑块看起来符合我的要求。

但是现在我需要将拇指的高度绑定到滑块的值上，但我不知道该如何操作。

我尝试过一些简单的数据绑定，但无法弄清楚如何将位于我的滑块模板内的“拇指高度”与位于包含滑块的用户控件内的滑块值进行绑定。

那么，我该怎么做呢？

- sofri

Answer 1

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

以下是一个依赖于Slider.Value的thumb样式示例：

<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>

希望这可以帮助到您。

祝好，Anvaka

- Anvaka

---

谢谢你的回答。它有效！唯一我不知道的是，当滑块变大时，滑块轨道会下降，因为轨道必须保持在拇指的垂直中心，并且当拇指变大时，轨道必须向下移动。所以我不能使用它，因为它看起来不好看... - sofri

Answer 2

请查看我的问题和答案 -

在WPF/XAML中如何使用滚动条更改文本段落的大小？

如果你有类似这样的东西：

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

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

NB 我不确定图片的语法，所以你需要将其视为伪代码。

- ChrisF