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