Question

I would like use a panel whose children have coordinates specified as percentage of total panel’s width/height. Moreover, I should be able to animate the coordinate property, for example to make a button move from 10% to 50% panel’s width.

I’ve made 2 attempts:

1. Use a Grid and specify size as stars – this was not enough, because AFAIK by default WPF cannot animate distance properties specified by stars. I’ve found somewhere a custom class that enabled me to do so, it even worked, hovewer I consider that solution overly complicated an I am looking for something simpler.

2. Use a Canvas with fixed width and height and put it inside a Viewbox – this is a simple solution, but when resizing the Viewbox the whole content of Canvas is resized too. I want the content to have fixed size.

Is there a simple solution or should I implement my own panel (or maybe extend one of the existing ones, i.e. Canvas)?

Cheers!

Answer 1

I would:

• subclass Canvas, perhaps calling it RelativeCanvas or RatioCanvas
• add two attached properties: XRatio and YRatio
• override ArrangeOverride and loop over all children. For each child, use their XRatio and YRatio along with the ActualWidth and ActualHeight of the RelativeCanvas to calculate and apply values for their Canvas.Left and Canvas.Top attached properties

You would use it as follows:

<local:RelativeCanvas>
    <!-- the top-left of this button will be center of panel -->
    <Button local:RelativeCanvas.XRatio="50" local:RelativeCanvas.YRatio="50"/>
</local:RelativeCanvas>

One thing you might like to add after you get that working is control over alignment. For example, I might to align the center of a control to the specified ratio, not its top-left corner.