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。如何使用这些视觉状态可以很好地描述根据当前窗口大小更改布局。关于如何使用资源（这可以真正为您节省大量不必要的打字）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>

UWP num-pad布局缩放

1 个答案: