CODEWITHSUNDEEP
uwpuwp-xaml
Sean O'Neil
Sean O'Neil

Reputation: 1241

How To Arbitrarily Position Element in a RelativePanel Without Breaking Relative Relationships?

I have a red rectangle that I want at a specific X,Y coordinate, eg. (510, 280). I want the blue rectangle to be butted up to the left of it. So I try this:

<RelativePanel>
    <Rectangle x:Name="RedShape"  Fill="Red"  Width="400" Height="300">
        <Rectangle.RenderTransform>
              <TranslateTransform X="510" Y="280" />
        </Rectangle.RenderTransform>
    </Rectangle>
    <Rectangle x:Name="BlueShape" Fill="Blue" Width="200" Height="100" RelativePanel.LeftOf="RedShape" />
</RelativePanel>

But the RelativePanel does not recognize the position of RedShape. Redshape is at (510, 280) in the UI, but the BlueShape is positioned as if the RedShape is still at (0, 0).

Instead of RenderTransform I've tried repositioning RedShape using the Visual Layer.

var visual = ElementCompositionPreview.GetElementVisual(RedShape);
visual.Offset = new System.Numerics.Vector3(510f, 280f, 0);

Same problem, the red goes where it's supposed to but the blue still thinks it's at (0, 0). If I position the RedShape using RelativePanel constraints then everything works as expected. But this limits me to positioning it to the center or the edges of the panel.

Upvotes: 0

Views: 102

Answers (1)

Breeze Liu - MSFT
Breeze Liu - MSFT

Reputation: 3808

Transforms are applied after the layout is computed which is why the position of the first control (according to layout) is still at (0,0). See the topic Transforms and layout.

Unfortunately, RelativePanel doesn’t support arbitrarily positioned content, the Canvas supports arbitrarily positioned content, but not relative relationships. You will likely need to use a combination of Panels for your scenario.

Upvotes: 1

Related Questions