Maintain relative position for child in a WPF canvas

I would like to implement the following funtionality.

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

I would like to maintain the red square always in the same position (left bottom corner of the canvas), to behave 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":

在这里输入图像描述

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.


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.

链接地址: http://www.djcxy.com/p/64738.html

上一篇: 显示一个“动态”表格

下一篇: 在WPF画布中保持孩子的相对位置