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

时间:2016-11-26 20:53:08

标签: c# xaml uwp win-universal-app

我目前正在开发通用Windows应用程序作为学校工作,无论窗口或屏幕大小如何,我都会对用户可见的内容存在很大问题。

我做了菜单和框架,它们似乎正确调整大小,框架与窗口边界保持相同的距离,无论大小(只要它是空的),但框架内容在窗口高度或宽度改变时消失,如下所示: Frame content when window is full screen Frame content when window size is chnaged (灰色区域是框架)

所有我希望的是,例如,一个文本框将具有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>

1 个答案:

答案 0 :(得分:0)

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

的代码
RelativePanel.RightOf="textBox1"

表示一个按钮是对于RightOf textBox1,就像他们的例子一样。