UWP 数字键盘布局缩放
UWP num-pad layout scaling
我正在创建一个数字键盘，我将使用它来验证门的身份。我现在正在努力创建 ui。我对 WPF 和 UWP 应用程序中的布局系统非常陌生。我已经开始使用基本布局，但按钮不会随着应用程序缩小，而且我不明白如何让按钮上的文字在较小的屏幕上变小。
我想在屏幕左侧显示小键盘，在右侧显示当前输入的 PIN。
应用程序中的响应式 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 正确缩放？甚至在较小的屏幕上显示密码键盘上方的密码？
这里有一些代码可以根据 Window 的大小更改控件的字体大小。
我建议您看一下视觉状态 https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.visualstatemanager. There is a good description on how to use these visual states that change the Layout based upon the current window size. There is also a good description on how to use Resources (which can really save you a lot of unnecessary typing) 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>
我正在创建一个数字键盘，我将使用它来验证门的身份。我现在正在努力创建 ui。我对 WPF 和 UWP 应用程序中的布局系统非常陌生。我已经开始使用基本布局，但按钮不会随着应用程序缩小，而且我不明白如何让按钮上的文字在较小的屏幕上变小。
我想在屏幕左侧显示小键盘，在右侧显示当前输入的 PIN。
应用程序中的响应式 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 正确缩放？甚至在较小的屏幕上显示密码键盘上方的密码？
这里有一些代码可以根据 Window 的大小更改控件的字体大小。
我建议您看一下视觉状态 https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.visualstatemanager. There is a good description on how to use these visual states that change the Layout based upon the current window size. There is also a good description on how to use Resources (which can really save you a lot of unnecessary typing) 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>