CODEWITHSUNDEEP
xamluwp
Simon Jansson
Simon Jansson

Reputation: 61

Wrap VariableSizedWrapGrid when another element obscures it partly

I have the following XAML code.

<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <VariableSizedWrapGrid Orientation="Horizontal">
        <Rectangle Width="400" Height="400" Fill="Green"/>
        <Rectangle Width="400" Height="400" Fill="Blue"/>
    </VariableSizedWrapGrid>
    <Rectangle Width="600" MinWidth="600" Height="600" Fill="Pink" RelativePanel.AlignRightWithPanel="True"/>
</RelativePanel>

The code generates the following page.

enter image description here

When the app window's width is dimminished, the app window looks like this.

enter image description here

How do I make the blue square wrap (get below the green square) when the pink square obscures it partly?

The exact same thing happen when I use the community toolkit's WrapPanel instead of the VariableSizedWrapGrid. The code below shows how it looks then.

<RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Rectangle Width="600" MinWidth="600" Height="600" Fill="Pink" RelativePanel.AlignRightWithPanel="True"/>
    <wrapPanel:WrapPanel Orientation="Horizontal" >
        <Rectangle Width="400" Height="400" Fill="Green"/>
        <Rectangle Width="400" Height="400" Fill="Blue"/>
    </wrapPanel:WrapPanel>
</RelativePanel>

Upvotes: 2

Views: 56

Answers (1)

Justin XL
Justin XL

Reputation: 39006

Initially when you start resizing the page, the WrapPanel's width isn't changing at all and that's why you don't see the green rectangle to go to the second row.

The trick is to give the WrapPanel a right margin that equals to the width of the pink one.

<wrapPanel:WrapPanel Orientation="Horizontal" Margin="0,0,600,0">

Upvotes: 3

Related Questions