Search code examples
wpfcanvasscrollzooming

Maintain position for child in a Canvas with zoom and scroll - WPF

I would like to implement the following functionality.

I have a canvas with several UIElements inside it. The Canvas allows to zoom and scroll applying a scale and translate transforms.

enter image description here

I would like to maintain the red square always in the same position (left bottom corner of the Canvas), to behave as a floating control, so as I change the zoom or the scroll, the red square always maintains it's size and position. Something similar to google maps "Earth window":

enter image description here

What is the best approach to implement it?

NOTE: I tried to use the WPF adorner layer but it does not respond to mouse events, and I need to interact with the red square.

Solution

  • As Clemens said, put it in another layer on top. Grid can host multiple items in the same cell, so create a 1 by 1 Grid for your Canvas add content on top just like any other WPF layout. The later items appear on top (unless Z layer is specified):

    <Grid>
    <Canvas>
        ... do all my fancy drawing
    </Canvas>
    <Rectangle VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="100" Height="100" />
</Grid>

    Note, you may have trouble if the canvas has any non WPF rendering, such as video or embedded WindowsForms content. I've seen people have trouble with drawing WPF stuff on top of that.

    I also believe you can set Canvas.Bottom="20" to set the position relative to the bottom edge, but I've never used it.