Изменение размера макета размера при изменении размера окна UWP

Question

Я бы хотел, чтобы мои элементы управления стали больше с одинаковой маржой. Это похоже на то, что 10% размера окна больше, все элементы управления должны быть больше 10%, как это делает окно, они должен шире, если окна тоже ... и т. д.

Я много искал и нашел эту тему: https://msdn.microsoft.com/windows/uwp/layout/layouts-with-xaml , но до сих пор не знал, как сделать то, что я хочу. У меня нет большого количества элементов управления, они всего лишь 9! Они таймеры, больше ничего!

Я мог бы сделать это в формах или WPF, но в Windows UI XAML блокирует так много функций, поэтому я не могу сделать это так же, как и для других. Вот почему я пытаюсь найти другой альтернативный способ сделать это.

My 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

Я думаю, что вы хотите изменить размеры элементов управления при изменении sieze windows. Но размеры TextBlock такие же, как и FontSize TextBlock. По этой причине я использую 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