Change scale of Rectangle inside Canvas

Question

I have a Canvas with a Rectangle:

<Canvas>
   <Rettangle/>
</Canvas>

And I want that, when i resize my Canvas, the Rectangle keep the same relative position, for example:

----------------------------------------
|                                      |
|                                      |
|           ____                       |
|          |    |                      |
|          |____|                      |
|                                      |
|--------------------------------------


--------------------
|                   |
|   ___             |
|   |__|            |
|                   |
|-------------------

How can I do?

You just want rectangle's position to be relative or it's size too? from the image it looks both. — akjoshi, Jun 23 '12 at 12:10
If you apply a ScaleTransform to the Canvas, I think it'll do this. — Tim S., Jun 23 '12 at 12:20
My Canvas is inside a Window, when I resize the Window the Canvas is resized too, I don't apply any Transformations. — Nick, Jun 23 '12 at 12:23

score 5 · Accepted Answer · answered Jun 23 '12 at 15:19

5

Why not put the whole stuff in a Viewbox?

<Viewbox Stretch="Fill">
    <Canvas Width="400" Height="300">
        <Rectangle Canvas.Left="100" Canvas.Top="100" Width="100" Height="100" Fill="Blue"/>
    </Canvas>
</Viewbox>

answered Jun 23 '12 at 15:19

Clemens

123,504
12
155
268

Why the `Canvas` has specific `Width` and `Height`? I want that `Canvas` fills all the available space inside my `Window`. – Nick Jun 23 '12 at 18:28
So if my Windows is resized I have to change the size of my Canvas dynamically? – Nick Jun 23 '12 at 18:59
You can give it any width and height you like. It just has to have a fixed size compared to the contained Rectangle. Canvas size and Rectangle size and position must have a certain pre-defined relation. You could as well set Canvas.Width=1.0 and Rectangle.Width=0.25. – Clemens Jun 23 '12 at 19:04
That's what the Viewbox does. Just try the sample XAML. Use the Viewbox as top-level container in a Window. – Clemens Jun 23 '12 at 19:05

score 1 · Answer 2 · edited May 23 '17 at 12:08

The best possible solution is to create your own custom canvas and implement the re-sizing and re-positioning using some of the techniques mentioned in these questions -

How do you do relative positioning in WPF?

WPF: Setting the Width (and Height) as a Percentage Value

But for me this functionality looks very similar to zooming; in case your window is only having Canvas you can try to use following ZoomableCanvas from Kael Rowan and explicitly zoom-in/zoom-out when your window re-sizes:

http://blogs.msdn.com/b/kaelr/archive/2010/07/29/zoomablecanvas.aspx

Change scale of Rectangle inside Canvas

2 Answers2