在 UWP 中调整窗口大小时将对象保留在视图内

Question

我目前正在开发通用 Windows 应用程序作为学校作业，无论窗口或屏幕大小如何，我都无法让用户看到内容。

我制作了菜单和框架，它们似乎正确调整了大小，无论大小（只要它为空），框架与窗口边框的距离都相同，但是当窗口高度或宽度发生变化时，框架内容就会消失，如下所示： （灰色区域是框架）

我所希望的是，例如，一个文本框将具有框架宽度的 25%，其他一些块将具有 25% 等等...... 我检查了 MSDN 和 stackoverflow 的几个解决方案，但到目前为止似乎都没有。

提前感谢您的帮助和时间

我的项目当前状态的 XAML 代码：

<Page
    x:Class="Fublisher.real_program"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Fublisher"
    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}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition FromHorizontalOffset="480" />
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid x:Name="GR_STRAN" Margin="0" Padding="0">
            <Grid x:Name="GR_MENU" HorizontalAlignment="Left" Width="60" d:LayoutOverrides="TopPosition, BottomPosition">
                <Button x:Name="BT_MENU" Content="&#xEA37;" VerticalAlignment="Top" HorizontalAlignment="Stretch" d:LayoutOverrides="LeftPosition, RightPosition" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" FontSize="20" Click="CL_MENU"/>
                <Button x:Name="BT_MENU_DOMOV" Content="&#xE80F;" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" d:LayoutOverrides="LeftPosition, RightPosition" Margin="0,65,0,0" FontSize="20" Click="CL_DOMOV"/>
                <Button x:Name="BT_MENU_VSEBINA" Content="&#xE70F;" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" Margin="0,130,0,0" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="20" Click="CL_VSEBINA"/>
                <Button x:Name="BT_MENU_ABOUT" Content="&#xE946;" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="20"/>
                <Button x:Name="BT_MENU_USER" Content="&#xE2AF;" VerticalAlignment="Bottom" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" Margin="0,0,0,65" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="20"/>
                <Button x:Name="BT_MENU_OBLIKA" Content="&#xE771;" VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="59.8" FontFamily="Segoe MDL2 Assets" Background="Transparent" Margin="0,195,0,0" d:LayoutOverrides="LeftPosition, RightPosition" FontSize="20"/>
            </Grid>
            <Grid x:Name="GR_VSEBINA" Margin="60,0,0,0" Background="#FFF1F1F1">
                <Frame x:Name="frame6" d:LayoutOverrides="LeftPosition, RightPosition, TopPosition, BottomPosition" Margin="10" Background="#FFE2E2E2"/>
            </Grid>
        </Grid>
    </Grid>
</Page>

页面代码显示在框架中：

<Page
    x:Class="Fublisher.home"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Fublisher"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" Width="1860" Height="1080">

    <Grid Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="1080"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="0"/>
            <ColumnDefinition Width="1860"/>
        </Grid.ColumnDefinitions>
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition FromHorizontalOffset="480" />
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Viewbox Grid.ColumnSpan="2" HorizontalAlignment="Center" Height="336" VerticalAlignment="Center" Width="601">
            <Grid Height="336" Width="601">
                <TextBlock x:Name="textBlock" TextWrapping="Wrap" Text="Hey!" FontSize="120" TextAlignment="Center" FontFamily="Segoe UI Light" Margin="23,0" Height="143" VerticalAlignment="Top" d:LayoutOverrides="LeftPosition, RightPosition"/>
                <Button x:Name="button" Content="&#xEE56;" FontFamily="Segoe MDL2 Assets" FontSize="53.333" VerticalAlignment="Bottom" Margin="0,0,0,66" HorizontalAlignment="Left" Background="{x:Null}" Height="99" Width="187"/>
                <Button x:Name="button_Copy" Content="&#xE771;" HorizontalAlignment="Stretch" FontFamily="Segoe MDL2 Assets" FontSize="53.333" VerticalAlignment="Bottom" Margin="207,0,207,66" Background="{x:Null}" Height="99" d:LayoutOverrides="LeftPosition, RightPosition"/>
                <Button x:Name="button_Copy1" Content="&#xE78B;" FontFamily="Segoe MDL2 Assets" FontSize="53.333" VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="0,0,1,64" Background="{x:Null}" Height="101" Width="187"/>
                <TextBlock x:Name="textBlock1" TextWrapping="Wrap" Text="Write" FontSize="26.667" TextAlignment="Center" Height="46" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="187"/>
                <TextBlock x:Name="textBlock1_Copy" Margin="207,0" TextWrapping="Wrap" Text="Design" FontSize="26.667" TextAlignment="Center" Height="46" VerticalAlignment="Bottom" d:LayoutOverrides="LeftPosition, RightPosition"/>
                <TextBlock x:Name="textBlock1_Copy1" TextWrapping="Wrap" Text="Publish" FontSize="26.667" TextAlignment="Center" Height="46" VerticalAlignment="Bottom" HorizontalAlignment="Right" Width="187"/>
            </Grid>
        </Viewbox>
    </Grid>
</Page>

Answer 1

硬编码的宽度和高度在真正的 UWP 应用程序中会很困难，而且很可能是不可能的。这就是为什么 Microsoft 拥有带有自适应面板的 Design adaptive UI。就像 HTML 页面一样，对象应该相对于彼此流动。查看链接中的RelativePanel，然后你可以添加类似的代码

RelativePanel.RightOf="textBox1"

表示一个按钮是到RightOf textBox1，就像他们的例子一样。