title: WPF position elements depending on window size
body: <p>I am currently working on an app to retrieve data from an SQL database and present it in the UI. I got the whole functionality runnig smoothly but now I'm stuck at der GUI part. I want the UI to adjust to the window size. The elements (img, labels, textboxes) have a minheight and minwidth but can also grow to the maximum available space. If the window gets too small, I want the UI to adjust like a responsive website.</p>
  
  <p>The maximized window would like something like this:
  <a href="https://i.stack.imgur.com/fxxjO.png" rel="nofollow noreferrer">Maximized window</a></p>
  
  <p>The window width got to small &amp; the elements adjust accordingly:
  <a href="https://i.stack.imgur.com/dfh7P.png" rel="nofollow noreferrer">smaller window</a></p>
  
  <p>My best approach was:</p>
  
  <pre><code>&lt;Grid DataContext="{Binding CurrentPerson}"&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="1*"/&gt;
          &lt;ColumnDefinition Width="5*"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  
      &lt;Grid&gt;
          &lt;Grid.ColumnDefinitions&gt;
              &lt;ColumnDefinition/&gt;
          &lt;/Grid.ColumnDefinitions&gt;
          &lt;Grid.RowDefinitions&gt;
              &lt;RowDefinition Height="*"/&gt;
              &lt;RowDefinition Height="*"/&gt;
              &lt;RowDefinition Height="*"/&gt;
          &lt;/Grid.RowDefinitions&gt;
  
          &lt;Image Grid.Row="0" Source="{Binding Person.Photo}"/&gt;
      &lt;/Grid&gt;
  
      &lt;Viewbox Grid.Column="1" StretchDirection="Both" Stretch="Uniform" HorizontalAlignment="Left" VerticalAlignment="Top"&gt;
          &lt;Grid&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition/&gt;
                  &lt;ColumnDefinition/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition/&gt;
                  &lt;RowDefinition/&gt;
                  &lt;RowDefinition/&gt;
                  &lt;RowDefinition/&gt;
                  &lt;RowDefinition/&gt;
              &lt;/Grid.RowDefinitions&gt;
  
              &lt;Label Grid.Column="0" Grid.Row="0" VerticalAlignment="Center"&gt;Title:&lt;/Label&gt;
              &lt;Label Grid.Column="0" Grid.Row="1" VerticalAlignment="Center"&gt;Name:&lt;/Label&gt;
              &lt;Label Grid.Column="0" Grid.Row="2" VerticalAlignment="Center"&gt;Street:&lt;/Label&gt;
              &lt;Label Grid.Column="0" Grid.Row="3" VerticalAlignment="Center"&gt;City:&lt;/Label&gt;
              &lt;Label Grid.Column="0" Grid.Row="4" VerticalAlignment="Center"&gt;Number:&lt;/Label&gt;
              &lt;TextBox Grid.Column="1" Grid.Row="0" HorizontalAlignment="Left" IsReadOnly="True" MinWidth="80"Text="{Binding Person.Title}"/&gt;
              &lt;TextBox Grid.Column="1" Grid.Row="1" HorizontalAlignment="Left" IsReadOnly="True" MinWidth="300"&gt;
                  &lt;TextBox.Text&gt;
                      &lt;MultiBinding StringFormat="{}{0} {1}"&gt;
                          &lt;Binding Path="Person.LastName"/&gt;
                          &lt;Binding Path="Person.FirstName"/&gt;
                      &lt;/MultiBinding&gt;
                  &lt;/TextBox.Text&gt;
              &lt;/TextBox&gt;
              &lt;TextBox Grid.Column="1" Grid.Row="2" HorizontalAlignment="Left" IsReadOnly="True" MinWidth="300" Text="{Binding Person.Street}"/&gt;
              &lt;TextBox Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" IsReadOnly="True" MinWidth="300" Text="{Binding Person.City}"/&gt;
              &lt;TextBox Grid.Column="1" Grid.Row="4" HorizontalAlignment="Left" IsReadOnly="True" MinWidth="30" Text="{Binding Person.Number}"/&gt;
          &lt;/Grid&gt;
      &lt;/Viewbox&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>The problem with this solution is that when the window gets too small, the content just shrinks to fit inside the window and isn't readable anymore. If the image could move above the person data it would save a lot of space an the person data could be readable.</p>
  
  <p>I played around with wrappanel, viewbox, grid, uniformgrid and so on but I couldn't get it to work the way I want it to.</p>
  
  <p>Any help is very much appreciated.</p>
  
  <p>Thanks in advance!</p>