Создание столбцов и строк сетки фиксированной ширины в UWP

Question

Я создаю приложение, и я хочу, чтобы определенные строки и столбцы сетки были исправлены, а другие изменялись в соответствии с размером окна. Моя проблема заключается в том, что я не могу сделать это в Universal Apps.

В WPF, решение простое:

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

Когда я пытаюсь это в UWP, строки и столбцы с фиксированными размерами размер, а остальные с звездочками остаются неподвижными. Я попытался помещать звездочки на фиксированные строки и столбцы и удалять уже существующие. Я думал, что в UWP это было отменено, однако это сильно испортило мое приложение и ухудшило его.

Мое решение было попробовать следующее 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> 

Идея заключается в том, чтобы иметь фиксированные поля вокруг моего управления, на 20 пикселей в ширину. Внутри этих полей есть две коробки: одна имеет фиксированную ширину и изменяемую высоту, а другая - в обоих направлениях.

Несмотря на это, я снова столкнулся с той же проблемой, когда размеры полей изменяются, но «изменяемые размеры» - нет.

Есть ли способ иметь фиксированные и изменяемые размеры строк и столбцов в сетке с использованием универсальной платформы Windows? До сих пор я еще не нашел доказательств этого.

Полный код:

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

Этот код предназначен, чтобы иметь дополнительные строки и столбцы как поля вокруг основных элементов управления. Они должны быть зафиксированы в 20 пикселей. Когда я запускаю код, поля растягиваются, а центральные ящики остаются фиксированными; это противоположно тому, что я предполагал: (. Черный Выделенная область остается один и тот же размер при изменении размеров окна, в то время как поля растянуть по размеру окна)

Answer 1

Ваш основной сетки фиксировано при 800 х 450 пикселей. Если убрать это ограничение, то сетка будет растягиваться соответствующим

Обновленный код:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" 
     MinWidth="800" 
     MinHeight="450"> 
    <Grid x:Name="pageGrid" 
...