ウィンドウのサイズを変更するときにコントロールのサイズレイアウトを変更するUWP

Question

コントロールが同じマージンで大きくなるようにしたいのですが、ウィンドウのサイズの10％を大きくし、すべてのコントロールをウィンドウのように10％大きくする必要があります。窓があまりにも大きくなったら...。

これについて多くのことを検索し、このトピックを見つけました：https://msdn.microsoft.com/windows/uwp/layout/layouts-with-xaml しかし、私は正確に何をしたいのかをまだ分かっていませんでした。私は彼らが9のような多くのコントロールを持っていない！彼らはタイマーです、他に何もありません！

フォームやWPFでそれを行うことはできますが、Windows UIではXAMLが非常に多くの機能をブロックしていますので、他の人と同じ方法ではできません。そういうわけで私はそれを行うための別の方法を探しています。

私のWindowsのメインウィンドウWPF（スクリーンショット）：

WPF XAML：

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

<Grid x:FieldModifier="public" x:Name="mainGrid" Background="Black" Loaded="Grid_Loaded" HorizontalAlignment="Left" Width="1910"> 

    <TextBlock x:FieldModifier="public" x:Name="playerTxt" Margin="57,66,0,0" TextWrapping="Wrap" Text="PLAYER:" Foreground="#FF0015FF" FontSize="36" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="148"/> 
    <Border x:FieldModifier="public" x:Name="separator1" Height="1" Margin="43,135,0,0" Background="#8800A8FF" HorizontalAlignment="Left" Width="552" VerticalAlignment="Top" /> 
    <TextBlock x:FieldModifier="public" x:Name="modeTxt" Margin="57,149,0,0" TextWrapping="Wrap" Text="PREP TIME:" Foreground="#FF0015FF" FontSize="42" Height="51" VerticalAlignment="Top" HorizontalAlignment="Left" Width="247"/> 
    <Border x:FieldModifier="public" x:Name="separator2" Height="1" Margin="43,216,0,0" Background="#8800A8FF" HorizontalAlignment="Left" Width="552" VerticalAlignment="Top"/> 
    <TextBlock x:FieldModifier="public" x:Name="nextUpTxt" Margin="57,230,0,0" TextWrapping="Wrap" Text="NEXT UP:" Foreground="#FF0015FF" FontSize="36" Height="67" VerticalAlignment="Top" HorizontalAlignment="Left" Width="171"/> 
    <TextBlock x:FieldModifier="public" x:Name="currPlayerTxt" Margin="0,66,1333,0" TextWrapping="Wrap" Text="N/A" Foreground="#FF0015FF" FontSize="38" TextAlignment="Right" Height="56" VerticalAlignment="Top" HorizontalAlignment="Right" Width="349"/> 
    <TextBlock x:FieldModifier="public" x:Name="nextPlayerTxt" Margin="228,230,0,0" TextWrapping="Wrap" Text="N/A" Foreground="#FF0015FF" FontSize="38" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="349" TextAlignment="Right"/> 
    <TextBlock x:FieldModifier="public" x:Name="timerTxt" Margin="349,153,0,0" TextWrapping="Wrap" Text="0000:00" Foreground="#FF0015FF" FontSize="38" Height="56" VerticalAlignment="Top" HorizontalAlignment="Left" Width="228" TextAlignment="Right"/> 
</Grid> 

私は、私は私の窓のサイズを変更するだけでなく、それを柔軟にしたいものをすべて。

Answer 1

私はあなたのコントロールのサイズを変更したいと思うのですが、TextBlockのサイズはTextBlockのFontSizeと同じです。なぜなら、私はViewBoxを使ってサイズをページサイズと同じにします。フレームにページを設定しないと、ページのサイズはウィンドウのサイズよりも大きくなります。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
<Viewbox> 
     <Grid> 
      <Grid.Resources> 
       <Style TargetType="TextBlock"> 
        <Setter Property="Foreground" 
         Value="#FF0015FF"></Setter> 
        <Setter Property="FontSize" 
         Value="36"></Setter> 
        <Setter Property="HorizontalAlignment" 
         Value="Center"></Setter> 
        <Setter Property="VerticalAlignment" 
         Value="Center"></Setter> 
        <Setter Property="Margin" 
          Value="10,10,10,10"></Setter> 
       </Style> 
      </Grid.Resources> 
      <Grid.RowDefinitions> 
       <RowDefinition></RowDefinition> 
       <RowDefinition></RowDefinition> 
       <RowDefinition></RowDefinition> 
      </Grid.RowDefinitions> 

      <Grid> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition></ColumnDefinition> 
        <ColumnDefinition></ColumnDefinition> 
       </Grid.ColumnDefinitions> 
       <TextBlock Text="PLAYER:" 
         ></TextBlock> 
       <TextBlock Grid.Column="1" 
         Text="N/A"></TextBlock> 
      </Grid> 
      <Grid Grid.Row="1"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition></ColumnDefinition> 
        <ColumnDefinition></ColumnDefinition> 
       </Grid.ColumnDefinitions> 
       <TextBlock Text="PREP TIME:"></TextBlock> 
       <TextBlock Grid.Column="1" 
         Text="0000:00"></TextBlock> 
      </Grid> 
      <Grid Grid.Row="2"> 
       <Grid.ColumnDefinitions> 
        <ColumnDefinition></ColumnDefinition> 
        <ColumnDefinition></ColumnDefinition> 
       </Grid.ColumnDefinitions> 
       <TextBlock Text="NEXT UP:" ></TextBlock> 
       <TextBlock Grid.Column="1" 
         Text="N/A"></TextBlock> 
      </Grid> 
     </Grid> 
    </Viewbox> 
</Grid> 

http://7xqpl8.com1.z0.glb.clouddn.com/ChangeControlsSizeLayout.gif