title: Horizontally aligning child elements in a wrap panel
body: <p>I have the following XAML in my window:</p>
  
  <pre><code>&lt;WrapPanel&gt;
      &lt;WrapPanel.Resources&gt;
          &lt;Style TargetType="Rectangle"&gt;
              &lt;Setter Property="Margin" Value="10,10,10,10"/&gt;
              &lt;Setter Property="VerticalAlignment" Value="Top"/&gt;
          &lt;/Style&gt;
      &lt;/WrapPanel.Resources&gt;
      &lt;Rectangle Height="100" Width="100" Fill="Red"/&gt;
      &lt;Rectangle Height="200" Width="200" Fill="Yellow"/&gt;
      &lt;Rectangle Height="150" Width="150" Fill="Green"/&gt;
      &lt;Rectangle Height="50" Width="50" Fill="Blue"/&gt;
      &lt;Rectangle Height="250" Width="250" Fill="Purple"/&gt;
  &lt;/WrapPanel&gt;
  </code></pre>
  
  <p>Which produces the following UI in the designer:
  <a href="https://i.stack.imgur.com/DxzaC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DxzaC.png" alt="Current layout"></a></p>
  
  <p>What I'm looking for is a way to 'horizontally align' the child elements in the wrap panel, so that the window would look something like this:
  <a href="https://i.stack.imgur.com/pSKSQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pSKSQ.png" alt="Desired layout"></a></p>
  
  <p>Is there any way to achieve this in a wrap panel or do I need to consider using other controls or writing a custom control?</p>
  
  <p>This image additionally illustrates what I'm trying to achieve:
  <a href="https://i.stack.imgur.com/L5UV5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L5UV5.png" alt="enter image description here"></a></p>