Question

我是UWP及其响应式设计的新手，所以我需要帮助。问题出在哪里？

e.g。我在登陆页面上需要4个响应式按钮，但在每个视图中它看起来都非常相似。因此按钮不会改变，但在桌面上看起来相同，在手机模拟器上也是如此（或者当我更改屏幕分辨率时）。为了更好地描述，有一些屏幕：

大型23英寸屏幕上的按钮 - 看起来不错，但...... Buttons on large 23" screen

..小5“屏幕上的按钮（肖像） - 按钮比画布大... buttons on small 5" screen (portrait)

所以我的问题是：如何使按钮响应？

这是我的源代码：

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

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition Height="83*"/>
            <RowDefinition Height="998*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Button x:Name="button" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Background="#33DCFF00"></Button>
        <Button x:Name="button_Copy" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="1" Background="#33FF0000"/>
        <Button x:Name="button_Copy1" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="2" Background="#3300FF0C"/>
        <Button x:Name="button_Copy2" Content="Button" HorizontalAlignment="Center" VerticalAlignment="Center" Height="83" Width="480" Grid.Column="3" Background="#330080FF"/>
    </Grid>
</Page>

Answer 1

对于响应式设计，我们最好避免使用固定的宽度和高度。我们可以删除Width中的Height和Button设置，并将其HorizontalAlignment和VerticalAlignment设置为Stretch，如下所示按钮响应。

<Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33DCFF00" Content="Button" />

在这种情况下，每个按钮将占据网格中的一个单元格，它们的宽度和高度将根据网格的大小自动更改。以下是完整示例，有关布局设计的更多信息，请参阅Layout for UWP apps。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="83*" />
        <RowDefinition Height="998*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button x:Name="button" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33DCFF00" Content="Button" />
    <Button x:Name="button_Copy" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#33FF0000" Content="Button" />
    <Button x:Name="button_Copy1" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#3300FF0C" Content="Button" />
    <Button x:Name="button_Copy2" Grid.Column="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="#330080FF" Content="Button" />
</Grid>

Answer 2

在这种情况下，您最好使用可以根据可用屏幕大小更改的Visual状态处理的RelativePanel。这可能会有所帮助

Windows 10 RelativePanel Sample

在XAML中创建响应元素

2 个答案: