在 XAML 中创建响应元素

Question

我对 UWP 及其响应式设计完全陌生，所以我需要帮助。问题出在哪里？

例如我需要在着陆页上有 4 个响应按钮，但在每个视图中它看起来都一样。所以按钮不会改变，但在桌面上看起来是一样的，在 phone 模拟器上也是一样的（或者当我改变屏幕分辨率时）。为了更好的描述，有一些屏幕：

23" 大屏幕上的按钮 - 看起来不错，但是...

..5" 小屏幕（纵向）上的按钮 - 按钮比 canvas...

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

这是我的源代码：

<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

对于响应式设计，我们最好避免使用固定宽度和高度。我们可以删除 Button 中的 Width 和 Height 设置，并将其 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

在这种情况下，您最好使用 RelativePanel，您可以使用可根据可用屏幕尺寸更改的视觉状态来处理。这可能有帮助

Windows 10 RelativePanel Sample

在 XAML 中创建响应元素

Creating responsive element in XAML

xaml

responsive-design

uwp

responsive