title: Wrap VariableSizedWrapGrid when another element obscures it partly
body: <p>I have the following XAML code.</p>
  
  <pre><code>&lt;RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
      &lt;VariableSizedWrapGrid Orientation="Horizontal"&gt;
          &lt;Rectangle Width="400" Height="400" Fill="Green"/&gt;
          &lt;Rectangle Width="400" Height="400" Fill="Blue"/&gt;
      &lt;/VariableSizedWrapGrid&gt;
      &lt;Rectangle Width="600" MinWidth="600" Height="600" Fill="Pink" RelativePanel.AlignRightWithPanel="True"/&gt;
  &lt;/RelativePanel&gt;
  </code></pre>
  
  <p>The code generates the following page.</p>
  
  <p><a href="https://i.stack.imgur.com/VcdQ7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VcdQ7.png" alt="enter image description here"></a></p>
  
  <p>When the app window's width is dimminished, the app window looks like this.</p>
  
  <p><a href="https://i.stack.imgur.com/buFdG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/buFdG.png" alt="enter image description here"></a></p>
  
  <p>How do I make the blue square wrap (get below the green square) when the pink square obscures it partly?</p>
  
  <p>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.</p>
  
  <pre><code>&lt;RelativePanel Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"&gt;
      &lt;Rectangle Width="600" MinWidth="600" Height="600" Fill="Pink" RelativePanel.AlignRightWithPanel="True"/&gt;
      &lt;wrapPanel:WrapPanel Orientation="Horizontal" &gt;
          &lt;Rectangle Width="400" Height="400" Fill="Green"/&gt;
          &lt;Rectangle Width="400" Height="400" Fill="Blue"/&gt;
      &lt;/wrapPanel:WrapPanel&gt;
  &lt;/RelativePanel&gt;
  </code></pre>