How to bind to the sum of two data bound values in WPF?
- by Sheridan
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.
