Making fixed-width grid columns and rows in UWP

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"
...