title: Making fixed-width grid columns and rows in UWP
body: <p>I am making an application and I want certain grid rows and columns to be fixed, while others resize to fit the window. My problem is that I cannot do this in Universal Apps.</p>
  
  <p><strong>In WPF, the solution is simple:</strong></p>
  
  <pre><code>&lt;Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch"&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition Height="50" /&gt; &lt;!-- This row is a fixed height --&gt;
          &lt;RowDefinition Height="*" MinHeight="200" /&gt; &lt;!-- This row is resizeable, but has a minimum height --&gt;
          &lt;RowDefinition Height="100" /&gt;
          &lt;RowDefinition Height="20" /&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition Width="20" /&gt; &lt;!-- This column has a fixed width --&gt;
          &lt;ColumnDefinition Width="*" MinWidth="300" /&gt; &lt;!-- These rows are resizeable, but have minimum widths --&gt;
          &lt;ColumnDefinition Width="*" MinWidth="300" /&gt;
          &lt;ColumnDefinition Width="20" /&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>When I try this in UWP, the rows and columns with fixed sizes resize while the others with asterisks stay fixed. I tried putting asterisks on the fixed rows and columns and removing the pre-existing ones. I thought that in UWP it was reversed, however this severely messed up my app and made it worse.</p>
  
  <p><strong>My solution was to try the following in UWP:</strong></p>
  
  <pre><code>&lt;Grid x:Name="pageGrid"
        Background="White"&gt;
      &lt;Grid.RowDefinitions&gt;
          &lt;RowDefinition MaxHeight="20"
                         MinHeight="20"/&gt;
          &lt;RowDefinition Height="*"/&gt;
          &lt;RowDefinition MaxHeight="20"
                         MinHeight="20"/&gt;
      &lt;/Grid.RowDefinitions&gt;
      &lt;Grid.ColumnDefinitions&gt;
          &lt;ColumnDefinition MaxWidth="20"
                            MinWidth="20"/&gt;
          &lt;ColumnDefinition Width="*"/&gt;
          &lt;ColumnDefinition MaxWidth="260"
                            MinWidth="260"/&gt;
          &lt;ColumnDefinition MaxWidth="20"
                            MinWidth="20"/&gt;
      &lt;/Grid.ColumnDefinitions&gt;
  &lt;/Grid&gt;
  </code></pre>
  
  <p>The idea here is to have fixed margins around my controls, at 20 pixels width. Inside these margins there are two boxes: One has a fixed width and resizable height, and the other resizes in both directions. </p>
  
  <p>Despite this, I again experienced the same problem where the margins resize but the 'resizable' boxes do not.</p>
  
  <p><strong>Is there actually a way to have fixed and resizeable rows and columns in a grid using Universal Windows Platform? So far, i have yet to find evidence of this.</strong></p>
  
  <p>Complete code:</p>
  
  <pre><code>&lt;Page
      x:Class="UniversalCamera.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:local="using:UniversalCamera"
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
      mc:Ignorable="d"&gt;
      &lt;Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
            MinWidth="800"
            MinHeight="450"
            Width="800"
            Height="450"&gt;
          &lt;Grid x:Name="pageGrid"
                Background="White"&gt;
              &lt;Grid.RowDefinitions&gt;
                  &lt;RowDefinition MaxHeight="20"
                                 MinHeight="20"/&gt;
                  &lt;RowDefinition Height="*"/&gt;
                  &lt;RowDefinition MaxHeight="20"
                                 MinHeight="20"/&gt;
              &lt;/Grid.RowDefinitions&gt;
              &lt;Grid.ColumnDefinitions&gt;
                  &lt;ColumnDefinition MaxWidth="20"
                                    MinWidth="20"/&gt;
                  &lt;ColumnDefinition Width="*"/&gt;
                  &lt;ColumnDefinition MaxWidth="260"
                                    MinWidth="260"/&gt;
                  &lt;ColumnDefinition MaxWidth="20"
                                    MinWidth="20"/&gt;
              &lt;/Grid.ColumnDefinitions&gt;
              &lt;Border BorderThickness="2"
                      BorderBrush="Black"
                      CornerRadius="5"
                      Grid.Column="1"
                      Grid.Row="1"
                      Grid.ColumnSpan="2"
                      Margin="-10,-10,-10,-10"/&gt;
              &lt;Border BorderThickness="2"
                      BorderBrush="Black"
                      CornerRadius="5"
                      Grid.Column="1"
                      Grid.Row="1"
                      Margin="2,2,2,2"&gt;
                  &lt;Image x:Name="imageFrame"
                     HorizontalAlignment="Stretch"
                     VerticalAlignment="Stretch"/&gt;
              &lt;/Border&gt;
              &lt;Canvas x:Name="controlCanvas"
                      HorizontalAlignment="Stretch"
                      VerticalAlignment="Stretch"
                      Grid.Column="2"
                      Grid.Row="1"&gt;
                  &lt;StackPanel x:Name="controlStack"
                              Canvas.Top="0"
                              Canvas.Left="0"
                              Width="260"
                              Orientation="Vertical"&gt;
                      &lt;Button x:Name="startLiveButton"
                              Width="200"
                              Margin="0,5,0,0"
                              HorizontalAlignment="Center"
                              Content="Start Live"
                              Click="startLiveButton_Click"/&gt;
                      &lt;Button x:Name="stopLiveButton"
                              Width="200"
                              Margin="0,5,0,0"
                              HorizontalAlignment="Center"
                              Content="Stop Live"
                              Click="stopLiveButton_Click"/&gt;
                      &lt;Button x:Name="freezeVideoButton"
                              Width="200"
                              Margin="0,5,0,0"
                              HorizontalAlignment="Center"
                              Content="Freeze Video"
                              Click="freezeVideoButton_Click"/&gt;
                      &lt;Button x:Name="loadParameterButton"
                              Width="200"
                              Margin="0,5,0,0"
                              HorizontalAlignment="Center"
                              Content="Load Parameter"
                              Click="loadParameterButton_Click"/&gt;
                      &lt;CheckBox x:Name="autoWhiteCheckbox"
                                HorizontalAlignment="Center"
                                Width="200"
                                Margin="0,25,0,0"
                                Content="Auto White Balance"
                                Checked="autoWhiteCheckbox_Checked"
                                Unchecked="autoWhiteCheckbox_Unchecked"/&gt;
                      &lt;CheckBox x:Name="autoGainCheckbox"
                                HorizontalAlignment="Center"
                                Width="200"
                                Margin="0,5,0,0"
                                Content="Auto Gain Balance"
                                Checked="autoGainCheckbox_Checked"
                                Unchecked="autoGainCheckbox_Unchecked"/&gt;
                  &lt;/StackPanel&gt;
              &lt;/Canvas&gt;
          &lt;/Grid&gt;
      &lt;/Grid&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p>This code is intended to have extra rows and columns as margins around the main controls. These should be fixed at 20 pixels. When I run the code the margins stretch and the central boxes stay fixed; this is the opposite of what I intended:</p>
  
  <p><a href="https://i.stack.imgur.com/abmu8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/abmu8.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/6JdG6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6JdG6.png" alt="enter image description here"></a>
  (The black outlined area stays the same size when the window is resized while the margins stretch to fit the window.)</p>