如何修复不同屏幕尺寸和不同窗口尺寸的 Gridview 高度？答案

【问题标题】：How to fix the Gridview Height for different screen sizes and different window sizes?如何修复不同屏幕尺寸和不同窗口尺寸的 Gridview 高度？
【发布时间】：2018-07-30 15:18:21
【问题描述】：

只是一个简单的问题，我一直无法找到令人满意的答案。在 UWP 应用程序上工作，在某些部分我在 Grid 中有一个 GridView。当然，为了在应用程序中启用滚动，我必须给 GridView 一个高度（比如说 650），这个高度可能适用于小屏幕，但在较大的屏幕上，一半的应用程序未使用！...即使只是在调整大小时应用程序窗口高度似乎 GridView 可以在某些尺寸下工作，但不能在其他尺寸下工作......我该如何解决这个问题或至少解决它？我希望 Gridview 的高度链接到应用程序窗口的高度。有什么想法吗？

【问题讨论】：

如果您将VerticalAlignment 指定为Stretch，它将填满可用空间，无论窗口大小。如果您需要编程方法，请处理页面上的SizeChanged 事件，然后执行适当的计算。

标签： c# xaml uwp

【解决方案1】：

当您在 Grid 中有一个 GridView 时，您始终可以将其 RowDefinition 和 ColumnDefinition 的值设置为 "*"

那么它就会一直占用窗口上未分配的空间。

一个小例子：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="150"/> 
        <RowDefinition Height="*" 
                       MinHeight="50" 
                       MaxHeight="500"/>
        <RowDefinition Height="150"/>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="*" 
                          MinWidth="100" 
                          MaxWidth="1000"/>
        <ColumnDefinition Width="150"/>
    </Grid.ColumnDefinitions>

    <GridView Grid.Row="1"
              Grid.Column="1">

    </GridView>
</Grid>

请注意，我还添加了最大和最小高度/宽度的值。有了它，您可以进一步限制网格中项目的大小。

您应该记住的唯一一件事是，当您使用 "*" 值时，它将占用所有其余空间（如果设置了 max/min，则在其限制范围内）。但是，当您有两个具有该值的定义时：

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="150"/>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="150"/>
    </Grid.ColumnDefinitions>

然后两列/行将占用相同数量的空间。假设我们的窗口宽度为 800，那么两列将共享中间的 500。它们都占用 250。

你也可以这样写来改变它：

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="2*" />
    </Grid.ColumnDefinitions>

这将使第二列的屏幕宽度是第一列的两倍。假设我们的屏幕宽度为 900。那么第一列是 300 宽，第二列是 600 宽。

【讨论】：

【解决方案2】：

要为不同的屏幕尺寸制作应用程序，请记住一件事，避免静态行和列的高度和宽度。

你的网格是这样的。

<Grid>
<Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="*"/>
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
</Grid>

并且不要忘记根据您的要求设置verticaloption 和Horizontaloption。

【讨论】：