How to bind to the sum of two data bound values in WPF?

Posted by Sheridan on Stack Overflow See other posts from Stack Overflow or by Sheridan
Published on 2011-01-05T16:22:22Z Indexed on 2011/01/05 20:53 UTC
Read the original article Hit count: 265

Filed under:
|
|
|

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.

Clock control

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.

© Stack Overflow or respective owner

Related posts about wpf

Related posts about sum