UWP 数字键盘布局缩放

Question

我正在创建一个用于验证门的数字键盘。我现在正在创建用户界面。我对 WPF 和 UWP 应用程序中的布局系统非常陌生。我已经开始了基本布局，但是按钮不会随着应用程序缩小，而且我不明白如何使按钮上的文本在较小的屏幕上缩小。

我想在屏幕左侧显示数字键盘，在右侧显示当前输入的密码。

应用程序中的响应式用户界面对我来说是最困难的事情之一。

图片：

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>

如何让用户界面正确缩放？甚至在较小的屏幕上也会在 pin pad 上方显示 pin？

Answer 1

下面是一些根据窗口大小更改控件字体大小的代码。
我建议您查看视觉状态https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.visualstatemanager。关于如何使用这些根据当前窗口大小更改布局的视觉状态有一个很好的描述。还有一个很好的关于如何使用资源的描述（确实可以为你节省很多不必要的打字）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>