Question

I have a custom UserControl that is defined by the following XAML:

<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
    <Ellipse Height="100" Width="100" StrokeThickness="1" Stroke="Black" Fill="Transparent" Opacity="0.7" />
    <Ellipse Height="98" Width="98" StrokeThickness="10" Stroke="White" Fill="Transparent" Opacity="0.5" />
    <Ellipse Height="80" Width="80" StrokeThickness="1" Stroke="Black" Fill="Transparent" Opacity="0.7" />

    <Line StrokeThickness="10" Stroke="Black" X1="33" Y1="33" X2="66" Y2="50" StrokeStartLineCap="Round" StrokeEndLineCap="Round" />
    <Line StrokeThickness="10" Stroke="Black" X1="33" Y1="66" X2="66" Y2="50" StrokeStartLineCap="Round" StrokeEndLineCap="Round" />
</Grid>

As you can see, I currently have it defined with a fixed width and height. What I would like to do is make this width and height definable when I place this control in a different XAML file. For example:

<Grid>
    <MyCustomControl Width="100" Height="100" />
    <MyCustomControl Width="75" Height="150" />
</Grid>

I know I can bind back to these values from the custom control, but what I’m confused about is accounting for all the math to adjust the position the smaller ellipses and the lines in the middle.

Can I do this in XAML (e.g., Width="{Binding Width}-2") or do I need to draw my ellipses and lines in code?

Answer 1

In this case, i think the better idea is to make your shapes bindings using customs Converters. Inside the converters you can set in code any conversion function, and also you can pass parameters to it.

Width={Binding Width, ElementName=controlName, Converter="...", ConverterParameter="..."}