當在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應用程序中工作。這就是爲什麼微軟擁有自適應面板的Design adaptive UI。很像HTML頁面，對象應該相對於彼此流動。見RelativePanel中的鏈接，然後就可以像

RelativePanel.RightOf="textBox1" 

添加代碼，以指示按鈕是要在RightOf textBox1中，作爲他們的榜樣。