xaml - GridView 与按钮

Question

我的页面中央有一个由 12 个不可点击按钮组成的网格（它们只是指示器），方式如下。

这个网格周围会有更多的东西，我需要这些项目在它们的确切位置并且具有相同的宽度和高度。我很困惑是使用带有（星型）行和列的网格，还是使用带有 MaxRowsAndColumns 设置为 3 且方向设置为水平的环绕面板的网格视图。以下是我支持和反对每种方法的论点：-

纽扣：-

优点：-

• 固定位置和高度和宽度保证。
• 适用于所有屏幕尺寸
• 易于编码

缺点：-

• 将不得不编写非常大的 XAML 和 C# 代码，因为我将无法在此处使用数据模板，并且必须定义大量变量和网格并分别设置每个文本块的值。

网格视图

优点：-

• DataTemplate 可通过 ObservableCollection 轻松设置值
• 比使用按钮创建的代码更小

缺点：-

• 不保证项目大小。必须在 XAML 中对其进行硬编码或将其绑定到模型中的属性，然后计算 XAML 中的值。

请让我知道哪个是更好的选择。除了上面提到的方法，还有其他更简单的方法吗？

谢谢，拉吉夫

Answer 1

使用ItemsControl，它提供DataTemplate以及项目大小。

Answer 2

在上面的两个中，我会说 GridView。由于您需要支持这么多不同的屏幕尺寸和比例，因此您不应该使用固定尺寸。

正如指南所述：窗口大小和缩放到屏幕的指南（Windows 应用商店应用程序）

设计适合任何宽度的应用程序，您会自动获得对不同屏幕尺寸和方向的支持。计划您的应用程序从全屏调整到最小宽度，以便 UI 针对各种屏幕大小、窗口大小和方向优雅地重排。

由于您还需要满足快照模式（您不能选择在您的应用程序中不具有该模式），因此拥有按钮会增加更多的手动工作，这意味着维护 UI 代码会非常困难。如果您使用网格视图，您可以将其与用于捕捉模式的列表视图配对（用于完整模式的网格视图，用于捕捉的列表视图），如模板中所示。

您当然可以限制 GridView 中的大小，而不需要按钮所需工作的五分之一，所以我不太确定您所说的“不保证项目大小”是什么意思。

无论如何，正如指南所说，按钮不应该用于导航到页面。这些只是指导方针，但我认为它们是有道理的。

以下是：按钮指南和清单（Windows 应用商店应用程序）

当操作是导航到另一个页面时，不要使用按钮；改用链接。例外：对于向导导航，使用标有“返回”和“下一步”的按钮。

如果合适，我会使用 GriView 并将其与语义缩放相结合。

以 GridView 和 ItemsControl 为例，结果如下：

UI（视图）的代码：

<Page
    x:Class="App1.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">
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>
        <GridView x:Name="gridView">
            <GridView.ItemTemplate>
                <DataTemplate>
                    <Border Width="150" Height="150" BorderBrush="Pink" BorderThickness="10" Background="Aqua">
                        <TextBlock Foreground="Black" FontSize="20"  Text="{Binding}"/>
                    </Border>
                </DataTemplate>
            </GridView.ItemTemplate>
        </GridView>
        <ItemsControl Grid.Row="1" x:Name="itemscontrol">
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Border Width="150" Height="150" BorderBrush="Yellow" BorderThickness="10" Background="LightGreen">
                        <TextBlock Foreground="Black" FontSize="20" Text="{Binding}"/>
                    </Border>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapGrid Orientation="Horizontal" />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>
    </Grid>
</Page>

代码隐藏代码（属于 XAML 的 .cs 文件）：

using System.Collections.Generic;
namespace App1
{
    public sealed partial class MainPage
    {
        public MainPage()
        {
            InitializeComponent();
            DataContext = this;
            var items = new List<string> { "Iris", "Paul", "Ben", "Cate", "Daniel", "Ryan", "Iris 2", "Paul 2", "Ben 2", "Cate 2", "Daniel 2", "Ryan 2" };

            gridView.ItemsSource = items;
            itemscontrol.ItemsSource = items;
        }
    }
}

分辨率更高的结果，请注意项目保持其固定大小并且不会缩放以适应屏幕。

使用 GridView 将项目高度拉伸到一行：

<GridView x:Name="gridView">
    <GridView.ItemTemplate>
        <DataTemplate>
            <Border Width="150" BorderBrush="Pink" BorderThickness="10" Background="Aqua">
                <TextBlock Foreground="Black" FontSize="20"  Text="{Binding}"/>
            </Border>
        </DataTemplate>
    </GridView.ItemTemplate>
    <GridView.ItemContainerStyle>
        <Style TargetType="GridViewItem">
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
        </Style>
    </GridView.ItemContainerStyle>
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
             <VirtualizingStackPanel Orientation="Horizontal" />
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

顺便说一句，如果您不知道，GridView 继承自 ItemsControl。