I have a databinding problem in WPF.
我在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.
我做了一些简单的数据绑定,但我无法弄清楚如何将滑块模板内部的“拇指高度”绑定到我的滑块所在的用户控件内的滑块值。
So how can I do it?
那我该怎么办呢?
2 个解决方案
#1
3
You can use RelativeSource binding (Height="{Binding Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}"
).
您可以使用RelativeSource绑定(Height =“{Binding Value,RelativeSource = {RelativeSource FindAncestor,AncestorType = {x:Type Slider}}}”)。
Here is an example of the thumb style, that depends on Slider.Value:
这是一个拇指样式的例子,取决于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>
Hope this helps.
希望这可以帮助。
Cheers Anvaka
干杯安瓦卡
#2
1
Check my question and answer here -
在这里查看我的问题和答案 -
In WPF/XAML how do I change the size of a paragraph of text using a scroll bar?
在WPF / XAML中,如何使用滚动条更改文本段落的大小?
If you have something like this:
如果您有这样的事情:
<ScrollBar x:Name="scroll1"></ScrollBar>
<Image Height="{Binding ElementName=scroll1, Path=Value}" />
NB I'm not 100% sure of the syntax for the image, so you'll need to take this as pseudo code.
NB我不是100%确定图像的语法,所以你需要将它作为伪代码。
#1
3
You can use RelativeSource binding (Height="{Binding Value, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Slider}}}"
).
您可以使用RelativeSource绑定(Height =“{Binding Value,RelativeSource = {RelativeSource FindAncestor,AncestorType = {x:Type Slider}}}”)。
Here is an example of the thumb style, that depends on Slider.Value:
这是一个拇指样式的例子,取决于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>
Hope this helps.
希望这可以帮助。
Cheers Anvaka
干杯安瓦卡
#2
1
Check my question and answer here -
在这里查看我的问题和答案 -
In WPF/XAML how do I change the size of a paragraph of text using a scroll bar?
在WPF / XAML中,如何使用滚动条更改文本段落的大小?
If you have something like this:
如果您有这样的事情:
<ScrollBar x:Name="scroll1"></ScrollBar>
<Image Height="{Binding ElementName=scroll1, Path=Value}" />
NB I'm not 100% sure of the syntax for the image, so you'll need to take this as pseudo code.
NB我不是100%确定图像的语法,所以你需要将它作为伪代码。