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

I'm currently developing universal windows app as school work and I have big problem with keeping things visible to the user no matter the windows or screen size.

I made menu and frame, and they seem to resize correctly, frame keeps same distance from window border no matter the size ( as long as its empty), but the frame content just disappear when window height or width is changed, as shown below: (grey area is the frame)

我目前正在开发通用Windows应用程序作为学校工作,我有很大的问题,无论窗户或屏幕大小,用户都可以看到东西。我做了菜单和框架,它们似乎正确调整大小,框架与窗口边界保持相同的距离,无论大小(只要它是空的),但框架内容在窗口高度或宽度改变时消失,如下所示: (灰色区域是框架)

All I wish is that for example, one text box would have 25% of the frame width, some other block next 25% and so on... I checked few solutions from MSDN and *, but non seem to work so far.

Thanks for your help & time in advance

我希望的是,例如,一个文本框将具有25%的帧宽,一些其他块接下来25%等等......我检查了来自MSDN和*的几个解决方案,但是到目前为止似乎没有工作。感谢您的帮助和时间提前

XAML code of my project in current state:

当前状态下我项目的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>

And code of page showed in frame:

页面代码显示在框架中:

<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>

1 个解决方案

#1

Hardcoded widths and heights will be difficult, and probably, impossible to make work in a truly UWP App. This is why Microsoft has Design adaptive UI with adaptive panels. Much like HTML pages, objects should flow relative to each other. See the RelativePanel in the link, and then you can add code like

硬编码的宽度和高度将很难,并且可能无法在真正的UWP应用程序中工作。这就是微软具有自适应面板的设计自适应UI的原因。与HTML页面非常相似,对象应相对于彼此流动。请参阅链接中的RelativePanel,然后您可以添加类似的代码

RelativePanel.RightOf="textBox1"

to indicate a button is to be to the RightOf textBox1, as in their example.

指示一个按钮是对于RightOf textBox1,如在他们的示例中。