GridView与按钮

Question

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

这个网格周围会有更多的东西，我需要这些项目在他们确切的位置和相同的宽度和高度。我很困惑是使用带有（按星号）行和列的按钮的网格，还是带有包裹面板的网格视图，其中MaxRowsAndColumns设置为3，Orientation设置为Horizo​​ntal。以下是我支持和反对每种方法的论据： -

按钮： -

优点： -

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

缺点： -

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

GridView的

优点： -

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

缺点： -

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

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

谢谢， 拉杰夫

Answer 1

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

Answer 2

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

正如指南所述：Guidelines for window sizes and scaling to screens(Windows Store apps)

  

设计在任何宽度都很好的应用程序，并自动获得   支持不同的屏幕尺寸和方向。计划您的应用   从全屏调整到最小宽度以便UI   适用于各种屏幕尺寸，窗口尺寸和   取向。

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

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

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

以下是：Guidelines and checklist for buttons (Windows Store apps)

  

当操作导航到另一个页面时，请勿使用按钮;使用   而是一个链接。例外：对于向导导航，请使用标记的按钮   “后退”和“下一步”。

如果合适的话，我会使用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。