title: Wrapping panels in WPF
body: <p>I have the following layout in my window:</p>
  
  <ol>
  <li><code>Grid</code> with two columns</li>
  <li><code>GridSplitter</code> which resizes grid columns</li>
  <li>Second grid column is filled with <code>StackPanel</code></li>
  <li><code>StackPanel</code> is oriented vertically and has 2 children: <code>TextBlock</code> and a <code>WrapPanel</code></li>
  <li><code>WrapPanel</code> has two <code>Grid</code>s as children</li>
  <li>First <code>Grid</code> child contains one <code>Image</code></li>
  <li>Second <code>Grid</code> contains a StackPanel with 3 <code>TextBlock</code>s oriented vertically. </li>
  </ol>
  
  <p>The XAML code looks like this: </p>
  
  <pre><code>&lt;Window&gt;
    &lt;Grid&gt;
      &lt;Grid.ColumnDefinitions&gt;
        &lt;ColumnDefinition /&gt;
        &lt;ColumnDefinition /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
      &lt;GridSplitter Grid.Column="1" Width="5" HorizontalAlignment="Left" /&gt;
      &lt;StackPanel Grid.Column="1" Margin="5,0,0,0" Orientation="Vertical" 
          HorizontalAlignment="Stretch" VerticalAlignment="Stretch"&gt;
        &lt;TextBlock Text="Now here's a silly poem for you." /&gt;
        &lt;WrapPanel&gt;
          &lt;Grid Name="GridForImage"&gt;
            &lt;Image Width="200" Height="200" Source="Image.jpg" /&gt;
          &lt;/Grid&gt;
          &lt;Grid Name="GridForText"&gt;
            &lt;StackPanel Orientation="Vertical"&gt;
              &lt;TextBlock TextWrapping="WrapWithOverflow" Text="Roses are red." /&gt;
              &lt;TextBlock TextWrapping="WrapWithOverflow" Text="Violets are blue." /&gt;
              &lt;TextBlock TextWrapping="WrapWithOverflow" Text="You belong in a zoo." /&gt;
            &lt;/StackPanel&gt;
          &lt;/Grid&gt;
        &lt;/WrapPanel&gt;
      &lt;/StackPanel&gt;
    &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>Once the window opens, the second column is wide enough to allow grids <code>GridForImage</code> and <code>GirdForText</code> to be placed next to each other horizontally. If I shrink the width of the second column using the grid splitter, the <code>GridForText</code> grid gets placed underneath the <code>GridForImage</code> at one point, which is quite expected. </p>
  
  <p>Here's what I would like to achieve: </p>
  
  <ol>
  <li>I want <code>GridForText</code> to shrink its width to a certain size and to remain positioned to the right of the <code>GridForImage</code>, as I move the grid splitter to the right side of the window. Then, when the width shrinks to a certain value, say 200px, it should get placed underneath the <code>GridForImage</code>, i.e. <code>WrapPanel</code> should do its magic. Right now, the <code>GridForText</code> doesn't resize at all, it just gets placed underneath when it's current width becomes too large for the width of the <code>WrapPanel</code>. </li>
  <li>When the <code>GridForText</code> does get placed underneath the <code>GridForImage</code>, I want <code>GridForImage</code> to fill the entire width of the <code>WrapPanel</code>'s width. </li>
  </ol>
  
  <p>Is all this possible and what should I do? Thank you all. </p>