Xaml GridView与按钮

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

在这个网格周围会有更多的东西，我需要这些东西在它们的确切位置，并且具有相同的宽度和高度。我不知道是使用带有（星形大小）行和列的网格，其中包含按钮，还是使用带有包裹面板的网格视图，其中MaxRowsAndColumns设置为3，方向设置为水平。以下是我支持和反对每种方法的论点：-

按钮：-

优点：-

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

缺点：-

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

GridView

优点：-

• DataTemplate非常容易通过ObservableCollection设置值
• 比使用按钮创建的代码小

缺点：-

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

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

谢谢，

---

Rajeev

使用，它提供了

数据模板

以及项目大小。

使用，它提供了

数据模板

以及项目大小。

在上面两个选项中，我会说GridView。因为您需要支持如此多不同的屏幕大小和比率，所以不应该有固定的大小

正如准则所述：

设计任何宽度都好看的应用程序，你会自动获得 支持不同的屏幕大小和方向。为您的应用程序规划 从全屏向下调整到最小宽度，以便用户界面 针对各种屏幕大小、窗口大小和尺寸，优雅地回流 方向

由于您还需要适应快照模式（您不能选择不在应用程序中使用该模式），因此使用按钮将添加更多的手动工作，这意味着需要大量难以维护的UI代码。如果使用gridview，可以将其与模板中的捕捉模式的listview（gridview表示完整模式，listview表示捕捉模式）配对

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

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

以下是：

当操作要导航到另一页时，不要使用按钮；使用 而是一个链接。例外情况：对于向导导航，请使用标有 “后退”和“下一步”

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

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

UI（视图）的代码：

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

使用System.Collections.Generic；
名称空间App1
{
公共密封部分类主页
{
公共主页（）
{
初始化组件（）；
DataContext=this；
var项目=新列表{“Iris”、“Paul”、“Ben”、“Cate”、“Daniel”、“Ryan”、“Iris 2”、“Paul 2”、“Ben 2”、“Cate 2”、“Daniel 2”、“Ryan 2”}；
gridView.ItemsSource=项目；
itemscontrol.ItemsSource=项目；
}
}
}

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

使用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继承。

在上面两个选项中，我会说GridView。因为您需要支持如此多不同的屏幕大小和比率，所以不应该有固定的大小

正如准则所述：

设计任何宽度都好看的应用程序，你会自动获得 支持不同的屏幕大小和方向。为您的应用程序规划 从全屏向下调整到最小宽度，以便用户界面 针对各种屏幕大小、窗口大小和尺寸，优雅地回流 方向

由于您还需要适应快照模式（您不能选择不在应用程序中使用该模式），因此使用按钮将添加更多的手动工作，这意味着需要大量难以维护的UI代码。如果使用gridview，可以将其与模板中的捕捉模式的listview（gridview表示完整模式，listview表示捕捉模式）配对

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

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

以下是：

当操作要导航到另一页时，不要使用按钮；使用 而是一个链接。例外情况：对于向导导航，请使用标有 “后退”和“下一步”

我会使用GriView和combine I

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 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>