Making fixed-width grid columns and rows in UWP - xaml

Question

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.
In WPF, the solution is simple:
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="50" /> <!-- This row is a fixed height -->
<RowDefinition Height="*" MinHeight="200" /> <!-- This row is resizeable, but has a minimum height -->
<RowDefinition Height="100" />
<RowDefinition Height="20" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20" /> <!-- This column has a fixed width -->
<ColumnDefinition Width="*" MinWidth="300" /> <!-- These rows are resizeable, but have minimum widths -->
<ColumnDefinition Width="*" MinWidth="300" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
</Grid>
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.
My solution was to try the following in UWP:
<Grid x:Name="pageGrid"
Background="White">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="20"
MinHeight="20"/>
<RowDefinition Height="*"/>
<RowDefinition MaxHeight="20"
MinHeight="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="20"
MinWidth="20"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition MaxWidth="260"
MinWidth="260"/>
<ColumnDefinition MaxWidth="20"
MinWidth="20"/>
</Grid.ColumnDefinitions>
</Grid>
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.
Despite this, I again experienced the same problem where the margins resize but the 'resizable' boxes do not.
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.
Complete code:
<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">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
MinWidth="800"
MinHeight="450"
Width="800"
Height="450">
<Grid x:Name="pageGrid"
Background="White">
<Grid.RowDefinitions>
<RowDefinition MaxHeight="20"
MinHeight="20"/>
<RowDefinition Height="*"/>
<RowDefinition MaxHeight="20"
MinHeight="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="20"
MinWidth="20"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition MaxWidth="260"
MinWidth="260"/>
<ColumnDefinition MaxWidth="20"
MinWidth="20"/>
</Grid.ColumnDefinitions>
<Border BorderThickness="2"
BorderBrush="Black"
CornerRadius="5"
Grid.Column="1"
Grid.Row="1"
Grid.ColumnSpan="2"
Margin="-10,-10,-10,-10"/>
<Border BorderThickness="2"
BorderBrush="Black"
CornerRadius="5"
Grid.Column="1"
Grid.Row="1"
Margin="2,2,2,2">
<Image x:Name="imageFrame"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"/>
</Border>
<Canvas x:Name="controlCanvas"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Grid.Column="2"
Grid.Row="1">
<StackPanel x:Name="controlStack"
Canvas.Top="0"
Canvas.Left="0"
Width="260"
Orientation="Vertical">
<Button x:Name="startLiveButton"
Width="200"
Margin="0,5,0,0"
HorizontalAlignment="Center"
Content="Start Live"
Click="startLiveButton_Click"/>
<Button x:Name="stopLiveButton"
Width="200"
Margin="0,5,0,0"
HorizontalAlignment="Center"
Content="Stop Live"
Click="stopLiveButton_Click"/>
<Button x:Name="freezeVideoButton"
Width="200"
Margin="0,5,0,0"
HorizontalAlignment="Center"
Content="Freeze Video"
Click="freezeVideoButton_Click"/>
<Button x:Name="loadParameterButton"
Width="200"
Margin="0,5,0,0"
HorizontalAlignment="Center"
Content="Load Parameter"
Click="loadParameterButton_Click"/>
<CheckBox x:Name="autoWhiteCheckbox"
HorizontalAlignment="Center"
Width="200"
Margin="0,25,0,0"
Content="Auto White Balance"
Checked="autoWhiteCheckbox_Checked"
Unchecked="autoWhiteCheckbox_Unchecked"/>
<CheckBox x:Name="autoGainCheckbox"
HorizontalAlignment="Center"
Width="200"
Margin="0,5,0,0"
Content="Auto Gain Balance"
Checked="autoGainCheckbox_Checked"
Unchecked="autoGainCheckbox_Unchecked"/>
</StackPanel>
</Canvas>
</Grid>
</Grid>
</Page>
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:
(The black outlined area stays the same size when the window is resized while the margins stretch to fit the window.)

Answer 1

Your main Grid is fixed at 800 x 450 px. If you remove that restriction, the grid will stretch appropriately
Updated code:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
MinWidth="800"
MinHeight="450">
<Grid x:Name="pageGrid"
...