UWP数字键盘布局缩放

Question

我正在创建一个我将用于验证门的数字键盘。我正在致力于创建ui。我对WPF和UWP应用程序中的布局系统非常陌生。我有一个基本的布局开始，但按钮不缩小应用程序，我不明白如何使按钮上的文字减少小屏幕。

我想要在屏幕左侧有数字键盘，当前输入的引脚在右侧。

在应用程序中响应ui是我最难的事情之一。

图片：

XAML：

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
    <Grid Margin="0"> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
      <RowDefinition Height="Auto"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition Width="Auto"/> 
      <ColumnDefinition/> 
     </Grid.ColumnDefinitions> 
     <Button x:Name="btn7" Content="7" HorizontalAlignment="Stretch" VerticalAlignment="Top" Height="160" Width="180" Margin="10" Background="White" FontSize="50" Click="AddPin" FontStretch="UltraCondensed"/> 
     <Button x:Name="btn8" Content="8" HorizontalAlignment="Left" VerticalAlignment="Top" Height="160" Width="180" Margin="10" Grid.Column="1" Background="White" FontSize="50" Click="AddPin"/> 
     <Button x:Name="btn9" Content="9" HorizontalAlignment="Left" VerticalAlignment="Top" Height="160" Width="180" Margin="10" Grid.Column="2" Background="White" FontSize="50"/> 
     <Button Content="6" HorizontalAlignment="Left" VerticalAlignment="Top" Height="160" Width="180" Margin="10" Grid.Column="2" Grid.Row="1" Background="White" FontSize="50" Click="AddPin"/> 
     <Button Content="5" HorizontalAlignment="Left" VerticalAlignment="Top" Height="160" Width="180" Margin="10" Grid.Column="1" Grid.Row="1" Background="White" FontSize="50" Click="AddPin"/> 
     <Button Content="4" HorizontalAlignment="Left" VerticalAlignment="Top" Height="160" Width="180" Margin="10" Grid.Row="1" Background="White" FontSize="50" Click="AddPin"/> 
     <Button Content="1" HorizontalAlignment="Left" VerticalAlignment="Top" Height="160" Width="180" Margin="10" Grid.Row="2" Background="White" FontSize="50" Click="AddPin"/> 
     <Button Content="2" HorizontalAlignment="Left" VerticalAlignment="Top" Height="160" Width="180" Margin="10" Grid.Row="2" Grid.Column="1" Background="White" FontSize="50" Click="AddPin"/> 
     <Button Content="3" HorizontalAlignment="Left" VerticalAlignment="Top" Height="160" Width="180" Margin="10" Grid.Row="2" Grid.Column="2" Background="White" FontSize="50" Click="AddPin"/> 
     <Button Content="0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="160" Width="180" Margin="10" Grid.Row="3" Grid.Column="1" Background="White" FontSize="50" Click="AddPin"/> 
     <Button Content="Ok" HorizontalAlignment="Left" VerticalAlignment="Top" Height="160" Width="180" Margin="10" Grid.Row="3" Background="White" FontSize="50" Click="PinComplete"/> 
     <Button Content="Clear" HorizontalAlignment="Left" VerticalAlignment="Top" Height="160" Width="180" Margin="10" Grid.Row="3" Grid.Column="2" Background="White" FontSize="50" Click="ClearPin"/> 
     <TextBlock x:Name="NumPadDisplayHint" Grid.Column="3" HorizontalAlignment="Center" Margin="0" Grid.Row="1" TextWrapping="Wrap" Text="Pin" VerticalAlignment="Center" FontSize="50"/> 
     <TextBox x:Name="PinDisplayValue" Grid.Column="3" HorizontalAlignment="Center" Margin="0" Grid.Row="2" TextWrapping="Wrap" Text="{}{PinValue}" VerticalAlignment="Center" FontSize="50"/> 
    </Grid> 

</Grid> 

如何让UI比例适当？甚至在较小的屏幕上显示针脚上方的针脚？

Answer 1

下面是一些代码，根据窗口大小更改控件的字体大小。
我会建议你看看视觉状态https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.visualstatemanager。关于如何使用这些基于当前窗口大小更改Layout的视觉状态有很好的描述。还有关于如何使用资源的一个很好的描述（它可以真正为您节省大量不必要的打字）here。

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

    <Page.Resources> 
     <Style TargetType="Button" x:Key="PinButtonStyleNormal"> 
      <Setter Property="HorizontalAlignment" Value="Stretch" /> 
      <Setter Property="VerticalAlignment" Value="Stretch" /> 
      <Setter Property="Margin" Value="0" /> 
      <Setter Property="Background" Value="White" /> 
      <Setter Property="FontSize" Value="50" /> 
     </Style> 
     <!-- You can add more Styles like the following to add more visual states--> 
     <Style TargetType="Button" x:Key="PinButtonStyleSmall" BasedOn="{StaticResource PinButtonStyleNormal}"> 
      <Setter Property="FontSize" Value="30" /> 
     </Style> 
    </Page.Resources> 

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
     <VisualStateManager.VisualStateGroups> 
      <VisualStateGroup> 
       <VisualState x:Name="small"> 
        <VisualState.StateTriggers> 
         <!-- VisualState default --> 
         <AdaptiveTrigger MinWindowWidth="0" MinWindowHeight="0"/> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="btn0.Style" Value="{StaticResource PinButtonStyleSmall}" /> 
         <Setter Target="btnOk.FontSize" Value="15" /> 
         <Setter Target="btnClear.FontSize" Value="15" /> 
         <Setter Target="NumPadDisplayHint.FontSize" Value="15" /> 
        </VisualState.Setters> 
       </VisualState> 
       <!--customize these states so they resize when and how you want--> 
       <VisualState x:Name="normal"> 
        <VisualState.StateTriggers> 
         <!-- VisualState to be triggered when window 
         width is >=300 effective pixels or height >=350. --> 
         <AdaptiveTrigger MinWindowWidth="500" MinWindowHeight="350"/> 
        </VisualState.StateTriggers> 
        <VisualState.Setters> 
         <Setter Target="btn0.Style" Value="{StaticResource PinButtonStyleNormal}" /> 
         <Setter Target="btnOk.FontSize" Value="40" /> 
         <Setter Target="btnClear.FontSize" Value="40" /> 
         <Setter Target="NumPadDisplayHint.FontSize" Value="40" /> 
        </VisualState.Setters> 
       </VisualState> 
      </VisualStateGroup> 
     </VisualStateManager.VisualStateGroups> 
     <Grid.RowDefinitions> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
      <RowDefinition /> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition /> 
      <ColumnDefinition Width="3*" /> 
     </Grid.ColumnDefinitions> 

     <Button x:Name="btn0" Content="0" Grid.Row="3" Grid.Column="1" Click="AddPin" Style="{StaticResource PinButtonStyleSmall}" /> 
     <Button x:Name="btn1" Content="1" Grid.Row="2" Click="AddPin" Style="{Binding Style, ElementName=btn0}" /> 
     <Button x:Name="btn2" Content="2" Grid.Row="2" Grid.Column="1" Click="AddPin" Style="{Binding Style, ElementName=btn0}"/> 
     <Button x:Name="btn3" Content="3" Grid.Row="2" Grid.Column="2" Click="AddPin" Style="{Binding Style, ElementName=btn0}" /> 
     <Button x:Name="btn4" Content="4" Grid.Row="1" Click="AddPin" Style="{Binding Style, ElementName=btn0}" /> 
     <Button x:Name="btn5" Content="5" Grid.Column="1" Grid.Row="1" Click="AddPin" Style="{Binding Style, ElementName=btn0}" /> 
     <Button x:Name="btn6" Content="6" Grid.Column="2" Grid.Row="1" Click="AddPin" Style="{Binding Style, ElementName=btn0}" /> 
     <Button x:Name="btn7" Content="7" Click="AddPin" Style="{Binding Style, ElementName=btn0}" /> 
     <Button x:Name="btn8" Content="8" Grid.Column="1" Click="AddPin" Style="{Binding Style, ElementName=btn0}" /> 
     <Button x:Name="btn9" Content="9" Grid.Column="2" Click="AddPin" Style="{Binding Style, ElementName=btn0}" /> 

     <Button x:Name="btnOk" Content="Ok" Grid.Row="3" Click="PinComplete" FontSize="15" Style="{Binding Style, ElementName=btn0}" /> 
     <Button x:Name="btnClear" Content="Clear" Grid.Row="3" Grid.Column="2" Click="ClearPin" FontSize="15" HorizontalAlignment="Left" Style="{Binding Style, ElementName=btn0}" Grid.ColumnSpan="2" /> 

     <TextBlock x:Name="NumPadDisplayHint" Grid.Column="3" HorizontalAlignment="Center" Margin="4" Grid.Row="1" TextWrapping="Wrap" Text="Pin" VerticalAlignment="Center" FontSize="15" /> 
     <TextBox x:Name="PinDisplayValue" Grid.Column="3" HorizontalAlignment="Center" Margin="4" Grid.Row="2" TextWrapping="Wrap" Text="1234" VerticalAlignment="Center" FontSize="{Binding FontSize, ElementName=NumPadDisplayHint}" /> 
    </Grid> 
</Page>