在 UWP 中制作固定宽度的网格列和行答案

【问题标题】：Making fixed-width grid columns and rows in UWP在 UWP 中制作固定宽度的网格列和行
【发布时间】：2016-08-22 10:37:38
【问题描述】：

我正在制作一个应用程序，我希望修复某些网格行和列，而其他网格行和列会调整大小以适应窗口。我的问题是我无法在 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 像素。当我运行代码时，边距拉伸并且中心框保持固定；这与我的意图相反：

（当窗口调整大小时，黑色轮廓区域保持相同大小，而边距拉伸以适应窗口。）

【问题讨论】：

查看您的网格定义，它似乎是有序的。 UWP 在 Grid 的工作方式方面与 WPF 的行为方式相同，因此应该没有问题/差异。我使用您的网格声明创建了一个测试，它似乎按预期伸展。你能发布你的完整代码吗？
@AlexDrenea 完整代码添加到问题
那么页面有什么问题呢？对我来说看起来/伸展正确。边框固定，“屏幕”放大，侧面按钮固定。
它对我不起作用...？
这也是我所看到的。那么预期的结果是什么？如果您需要让屏幕扩展整个区域，请删除主网格上的宽度/高度值。

标签： xaml uwp grid-layout

【解决方案1】：

您的主网格固定为 800 x 450 像素。如果您取消该限制，网格将适当拉伸

更新代码：

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

【讨论】：