How to bind to the sum of two data bound values in WPF?
I have designed an analog clock control. It uses the stroke from two ellipses to represent an outer border and an inner border to the clock face.
I have exposed properties in the UserControl that allow a user to alter the thickness of these two borders. The Ellipse.StrokeThickness properties are then bound to these UserControl properties. At the moment, I am binding the UserControl property for the outer border thickness to the margins of the inner elements so that they are not hidden when the border size is increased.
<Ellipse Name="OuterBorder" Panel.ZIndex="1" StrokeThickness="{Binding OuterBorderThickness,
ElementName=This}" Stroke="{StaticResource OuterBorderBrush}" />
<Ellipse Name="InnerBorder" Panel.ZIndex="5" StrokeThickness="{Binding InnerBorderThickness,
ElementName=This}" Margin="{Binding OuterBorderThickness, ElementName=This}"
Stroke="{StaticResource InnerBorderBrush}">
...
<Ellipse Name="Face" Panel.ZIndex="1" Margin="{Binding OuterBorderThickness, ElementName=This}"
Fill="{StaticResource FaceBackgroundBrush}" />
...
The problem is that if the inner border thickness is increased, this does not affect the margins and so the hour ticks and numbers can become partially obscured or hidden. So what I really need is to be able to bind the margin properties of the inner controls to the sum of the inner and outer border thickness values (they are of type double).
I have done this successfully using 'DataContext = this;', but am trying to rewrite the control without this as I hear it is not recommended. I also thought about using a converter and passing the second value as the ConverterParameter, but didn't know how to bind to the ConverterParameter. Any tips would be greatly appreciated.
EDIT>>
Thanks to Kent's suggestion, I've created a simple MultiConverter to add the input values and return the result. I've hooked the SAME multibinding with converter XAML to both a TextBlock.Text property and the TextBlock.Margin property to test it.
<TextBlock>
<TextBlock.Text>
<MultiBinding Converter="{StaticResource SumConverter}" ConverterParameter="Add">
<Binding Path="OuterBorderThickness" ElementName="This" />
<Binding Path="InnerBorderThickness" ElementName="This" />
</MultiBinding>
</TextBlock.Text>
<TextBlock.Margin>
<MultiBinding Converter="{StaticResource SumConverter}" ConverterParameter="Add">
<Binding Path="OuterBorderThickness" ElementName="This" />
<Binding Path="InnerBorderThickness" ElementName="This" />
</MultiBinding>
</TextBlock.Margin>
</TextBlock>
I can see the correct value displayed in the TexBlock, but the Margin is not set. Any ideas?
EDIT >> >>
Interestingly, the Margin property can be bound to a data property of type double, but this does not seem to apply within a MultiBinding. As advised by Kent, I changed the Converter to return the value as a Thickness object and now it works. Thanks Kent.
Sounds like you're looking for a MultiBinding
with a converter capable of evaluating an expression. My ExpressionConverter
permits exactly this. Of course, if you don't want a dependency on a third party library just for this, you could write your own multi-value-converter that adds two values together.
I have done this successfully using 'DataContext = this;', but am trying to rewrite the control without this as I hear it is not recommended.
You can bind to properties of a user control without changing its DataContext
; just add an x:Name
attribute to its root element and then bind using {Binding ElementName=Root, Path=MyProperty}
. It's much simpler to do this than it is to use converters to inject code into the binding.
上一篇: 如何在DependencyProperty中传播PropertyChanged更改
下一篇: 如何绑定WPF中两个数据绑定值的总和?