如何使用 C# 在 UWP 中制作 ItemsWrapGrid？答案

【问题标题】：How to make a ItemsWrapGrid in UWP using C#?如何使用 C# 在 UWP 中制作 ItemsWrapGrid？
【发布时间】：2016-07-15 15:25:15
【问题描述】：

问题：如何在 C# 中使用 ItemsWrapGrid 布局创建 Grid？

上下文

UWP
Visual Studio 2015
Windows 10
C#

背景

我知道如何在 XAML 中制作它。在 Visual Studio 2015 中创建新的 UWP 应用程序后，XAML 为：

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

    <Grid x:Name="thisGrid">
        <GridView x:Name="thisGridView" IsItemClickEnabled="True">
            <GridView.ItemsPanel>
                <ItemsPanelTemplate>
                    <ItemsWrapGrid
                            x:Name="thisItemsWrapGrid"
                            Orientation="Horizontal"
                            MaximumRowsOrColumns="5"
                        />
                </ItemsPanelTemplate>
            </GridView.ItemsPanel>
            <TextBlock Text="#1"/>
            <TextBlock Text="#2"/>
            <TextBlock Text="#3"/>
        </GridView>
    </Grid>
</Page>

为了以编程方式实现，我已将其从 XAML 中取出：

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

并试图在Page的构造函数中重现它：

public MainPage()
{
    this.InitializeComponent();

    // Make the Grid and set it to be the Page's .Content:
    Grid grid = new Grid();
    this.Content = grid;

    // Make the GridView for the Grid, then set it:
    GridView gridView = new GridView();
    grid.Children.Add(gridView);

    // Make the ItemsPanelTemplate; necessary?
    ItemsPanelTemplate itemsPanelTemplate = new ItemsPanelTemplate();
    gridView.ItemsPanel = itemsPanelTemplate;

    // Make the ItemsWrapGrid.  Can't figure out how to set this.
    ItemsWrapGrid itemsWrapGrid = new ItemsWrapGrid();
    // When I traced the XAML version, its ItemsWrapGrid was apparently under
    //      gridView.ItemsPanelRoot
    // , but that's a get-only property.  I can't find a place to set it.

    // Add the TextBlock's with "#1", "#2", and "#3":
    for (int i = 1; i <= 3; ++i)
    {
        TextBlock textBlock = new TextBlock();
        textBlock.Text = "#" + i.ToString();
        gridView.Items.Add(textBlock);
    }

    // All done.  However, this Grid will show contents with a vertical alignment
    // rather than a horizontal one.
}

我需要添加哪些额外代码才能在 C# 中设置 ItemsWrapGrid，就像在 XAML 中设置的那样？目前，C# 代码创建了ItemsWrapGrid，但实际上并没有在任何地方设置ItemsWrapGrid，因为到目前为止，每次尝试使用它都会导致某种错误。

【问题讨论】：

您可以将ItemsPanelTemplate作为资源并在代码中使用。
@tao：我可以使用var itemsPanelTempate = new ItemsPanelTemplate(); 轻松创建ItemsPanelTemplate，但我不确定在C# 中以编程方式生成这些内容后如何将其设置为Grid 或GridView .
删除所有内容并使用正确的 XAML 和 DataBinding。没有理由在基于 XAML 的技术中的过程代码中创建或操作 UI 元素。这就是 XAML 的用途。无论你想做什么，你的方法都是错误的。
@ChemicalEngineer 是的，你可以这样做。简单的部分是创建 UI，困难的部分是解析文本。 XAML 不限于任何方式的静态布局。我建议您阅读 ItemsControl，这是 WPF / XAML 中所有基于项目的 UI 的基础。
@ChemicalEngineer 在 XAML 加载后调用它。或者您可以将 xaml 作为字符串并使用 XamlReader 加载它。

标签： c# xaml user-interface dynamic uwp

【解决方案1】：

你需要的是 XamlReader

string template =
                "<ItemsPanelTemplate xmlns=\"http://schemas.microsoft.com/winfx/2006/xaml/presentation\" xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\"><ItemsWrapGrid VerticalAlignment = \"Top\" "
                + " ItemWidth = \""
                + itemWidth
                + "\" Orientation = \"Horizontal\"/></ItemsPanelTemplate> ";
yourgridview.ItemsPanel = (ItemsPanelTemplate)XamlReader.Load(template);

【讨论】：

【解决方案2】：

事实上，ItemsWrapGrid 是 GridView 的默认面板。 ItemsPanelTemplate 不能通过属性拥有 ItemsWrapGrid 并使用 XamlReader，这并不好。加载 gridview 后，它会在 ItemsPanelRoot 处获得一个默认 ItemsWrapGrid。

yourgridview.Loaded += yourgridview_Loaded;

和功能

private void yourgridview_Loaded(object sender, RoutedEventArgs e)
{
    var a = sender as GridView;
    var b = a.ItemsPanelRoot;
    var c = b as ItemsWrapGrid;
    c.MaximumRowsOrColumns = 2;c.Orientation = Orientation.Horizontal;
}

【讨论】：