调整大小时 UWP 中的网格出现问题

Question

我正在为 PC 构建一个程序。我希望即使用户调整窗口大小，该对象也将保留在其位置。

例如，我创建了一个网格，当窗口很小（1200,800）时，我看不到底部的按钮。但是当应用程序全屏时，我可以看到按钮。

    <Grid x:Name="MainGrid">
        <Grid.RowDefinitions>
            <RowDefinition Height="250"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="100"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="15*"/>
            <ColumnDefinition Width="45*"/>
            <ColumnDefinition Width="15*"/>
        </Grid.ColumnDefinitions>
        <local:customTextBox Grid.Column="1" Grid.Row="1" Text="Username"/>
        <local:customTextBox Grid.Column="1" Grid.Row="2" Text="Password"/>
        <local:customTextBox Grid.Column="1" Grid.Row="3" Text="Email"/>
        <local:customTextBox Grid.Column="1" Grid.Row="4" Text="Server" VerticalAlignment="Center"/>
        <StackPanel Grid.Row="0" Grid.Column="1" Width="400" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Image Grid.Row="0" Grid.Column="1" Width="174" Height="176" Source="Assets/testlogo.png" Stretch="Uniform" HorizontalAlignment="Center"/>
            <TextBlock Grid.Column="1" Grid.Row="0" FontSize="25" FontFamily="Yu Gothic UI Semibold"  Text="Fill your details to create Server" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,5,0,0" TextWrapping="Wrap" FontWeight="Bold" TextAlignment="Center" />
        </StackPanel>
        <Button x:Name="MyButton" Grid.Row="5" Grid.Column="1" Height="85" Width="200" Style="{StaticResource primaryButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Create or Login"  FontSize="25" FontFamily="Yu Gothic UI Semibold">

        </Button>

    </Grid>

有人知道如何将东西放置到位吗？我尝试用 * 设置高度（例如 - 70*），但它仍然如此。 我还尝试更改页面高度和宽度属性中的大小。如果我调整窗口大小，它会导致网格周围黑屏。

如果有人知道该怎么做 - 请告诉我！！

Answer 1

根据您的描述，您似乎希望在用户调整应用程序窗口大小时保持相同的布局。

最简单的方法是使用 ViewBox。将您的内容放入 ViewBox Control 中，当用户调整应用程序窗口大小时，它将自动拉伸和缩放内容。

所以你的代码应该是这样的：

<Page
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

<Grid>
    <Viewbox>
        <Grid x:Name="MainGrid">
            <Grid.RowDefinitions>
                <RowDefinition Height="250"/>
                <RowDefinition Height="100"/>
                <RowDefinition Height="100"/>
                <RowDefinition Height="100"/>
                <RowDefinition Height="100"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="15*"/>
                <ColumnDefinition Width="45*"/>
                <ColumnDefinition Width="15*"/>
            </Grid.ColumnDefinitions>
            <local:customTextBox Grid.Column="1" Grid.Row="1" Text="Username"/>
            <local:customTextBox Grid.Column="1" Grid.Row="2" Text="Password"/>
            <local:customTextBox Grid.Column="1" Grid.Row="3" Text="Email"/>
            <local:customTextBox Grid.Column="1" Grid.Row="4" Text="Server" VerticalAlignment="Center"/>
            <StackPanel Grid.Row="0" Grid.Column="1" Width="400" HorizontalAlignment="Center" VerticalAlignment="Center">
                <Image Grid.Row="0" Grid.Column="1" Width="174" Height="176" Source="Assets/testlogo.png" Stretch="Uniform" HorizontalAlignment="Center"/>
                <TextBlock Grid.Column="1" Grid.Row="0" FontSize="25" FontFamily="Yu Gothic UI Semibold"  Text="Fill your details to create Server" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,5,0,0" TextWrapping="Wrap" FontWeight="Bold" TextAlignment="Center" />
            </StackPanel>
            <Button x:Name="MyButton" Grid.Row="5" Grid.Column="1" Height="85" Width="200" Style="{StaticResource primaryButtonStyle}" HorizontalAlignment="Center" VerticalAlignment="Center" Content="Create or Login"  FontSize="25" FontFamily="Yu Gothic UI Semibold">
            </Button>
        </Grid>
    </Viewbox>
</Grid>