title: Dockpanel Fix Bottom Child
body: <p>I'm trying to build a layout that would fix the bottom of two rows to be always visible. the problem is, the content of the bottom row has to be at the top, which makes it difficult to use a dockpanel. here's a short overview:</p>
  
  <p><a href="http://imageshack.us/photo/my-images/856/66626640.png/" rel="nofollow">here is a link with pictures</a> for all the windows:</p>
  
  <p>(sorry about that, but stackoverflow won't let me post images yet..)</p>
  
  <p>the first window is how it's supposed to look when there's plenty space available, the bottom (blue) sticks to the top (red).</p>
  
  <p>the code looks like this:</p>
  
  <pre><code>&lt;DockPanel&gt;
  
      &lt;Grid VerticalAlignment="Top"
            Background="Red"
            DockPanel.Dock="Top"&gt;
          &lt;Grid Height="100" /&gt;
      &lt;/Grid&gt;
  
      &lt;Grid Height="20"
            Background="Blue"
            VerticalAlignment="Top"
            DockPanel.Dock="Bottom" /&gt;
  
  &lt;/DockPanel&gt;
  </code></pre>
  
  <p>but when I size the window so the second row doesn't fit anymore, the second row is not fixed and will be invisible when the window is too small: window 2</p>
  
  <p>so what I want is something like this:</p>
  
  <pre><code>&lt;DockPanel&gt;
      &lt;Grid Height="20"
            Background="Blue"
            DockPanel.Dock="Bottom" /&gt;
  
      &lt;Grid VerticalAlignment="Top"
            Background="Red"
            DockPanel.Dock="Top"&gt;
          &lt;Grid Height="100" /&gt;
      &lt;/Grid&gt;
  &lt;/DockPanel&gt;
  </code></pre>
  
  <p>which gives me the following with enough space available: window 3</p>
  
  <p>and this when I resize the window: window 4</p>
  
  <p>the bottom is fixed. The problem here is, when there's too much space, the second row doesn't stick to the top, but to the bottom like in the third picture.
  I've played around with DockPanel.LastChildFill and the child order in a dockpanel. I've tried various layouts using one or more grids but couldn't get it to work.
  how would I go about doing this?</p>
  
  <p>edit:
  @publicgk:you're right, the second window was the wrong one, I updated the link.</p>
  
  <p>Moreover, I'll try to explain myself a little better.
  Considering the first row is completely red, and the second row is the rest (blue and white together). Then the first code sample gives me the first and the second window: While the content of the second row (the blue part) is at the top (window1, which is what I want), the second row is not fixed/always visible when i resize the window (window 2).</p>
  
  <p>The second code sample produces window 3 and 4, while the content is at the bottom of the second row when the window is big enough (window 3, not what I want), the second row is visible even when I resize the window (window 4, that's what i want), so the second row is overlapping the first.</p>
  
  <p>To sum it up i need the rows to behave like window 1 when there's enough space, and like window 4 when there's not.</p>
  
  <p>Edit2: I forgot to mention, the first row is supposed to hold contents, of which the size is unknown and variable, so using a grid and setting height or maxheight of the first row won't work. the height of the second row however is known and may be set directly.</p>
  
  <p>here's a sample, which shows this problem:</p>
  
  <pre><code>&lt;Window x:Class="WpfApplication2.MainWindow"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="clr-namespace:WpfApplication2"
      Title="MainWindow"
      Width="525"
      Height="350"&gt;
  &lt;Window.Resources&gt;
      &lt;local:RandomHeightConverter x:Key="RandomHeightConverter"/&gt;
  &lt;/Window.Resources&gt;
  &lt;Grid&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="100*" MaxHeight="100"/&gt;
          &lt;RowDefinition Height="20" /&gt;
      &lt;/Grid.RowDefinitions&gt;
  
      &lt;Grid Grid.Row="0"  Background="Red" Height="{Binding Converter={StaticResource RandomHeightConverter}}" /&gt;
      &lt;Grid Grid.Row="1"  Background="Blue"  /&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>public class RandomHeightConverter : IValueConverter
  {
      public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
      {
          return new Random().Next(20, 100);
      }
  
      public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
      {
          throw new NotImplementedException();
      }
  }
  </code></pre>
  
  <p>that would produce results like this:
  <a href="http://img29.imageshack.us/img29/7066/28259951.png" rel="nofollow">variable first row problem</a></p>