在 WPF 中将滑块值绑定到其拇指的高度 [英] Binding a slider value on the height of its thumb in WPF

问题描述

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

I have a databinding problem in WPF.

我想自定义"一个滑块，当您将滑块向右移动时拇指会变大，而当您将滑块向左移动时拇指会缩小.

I would like to "customise" a slider in a way that the thumb grows when you move the slider to the right and the thumb shrinks when you move the slider to the left.

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

So I edited the template for the slider and changed the look of the slider so the slider looks like I want it to.

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

But now I have to bind the height of the thumb to the value of the slider but I do not know how that works.

我做了一些简单的数据绑定操作，但我不知道如何将滑块模板内的拇指高度"绑定到滑块所在用户控件内的滑块值.

I did some simple data binding things but I cannot figure out how I can bind this "thumb height" that's inside of my slider's template to the slider's value that's inside the User Control where my slider is in.

那我该怎么做呢?

推荐答案

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

You can use RelativeSource binding (Height="{Binding Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}").

这是一个拇指样式的示例，它取决于 Slider.Value:

Here is an example of the thumb style, that depends on 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>

希望这会有所帮助.

干杯阿瓦卡

这篇关于在 WPF 中将滑块值绑定到其拇指的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！