如何制作可变大小的 GridView 项目？答案

【问题标题】：How to make VariableSized GridView Item?如何制作可变大小的 GridView 项目？
【发布时间】：2024-01-22 12:23:02
【问题描述】：

我想为 wrapgrid 中的项目创建一个 VariableSizedWrapGrid。

类似的东西。上面的组标题存储照片上显示的所有子项。滚动到右侧后，另一个带有子项的组标题如下所示。有人知道怎么做吗？

我能够显示带有子项的组标题，如下所示。我唯一无法实现的是子项的可变大小。

【问题讨论】：

标签： c# xaml data-binding windows-8 microsoft-metro

【解决方案1】：

我不确定这样做的 C# 和 XMAL 代码。但是在 Javascript 中，您可以通过执行以下操作在 javascript 中创建项目模板，而不是在 HTML 中创建模板

function MyItemTemplate(itemPromise) {
    return itemPromise.then(function (currentItem) {
        var result = document.createElement("div");

        //use source data to decide what size to make the
        //ListView item and apply different css class to it
        result.className = currentItem.data.type;
        result.style.overflow = "hidden";

        // Display image
        var image = document.createElement("img");
        image.className = "regularListIconTextItem-Image";
        image.src = currentItem.data.picture;
        result.appendChild(image);

        var body = document.createElement("div");
        body.className = "regularListIconTextItem-Detail";
        body.style.overflow = "hidden";

        // Display title
        var title = document.createElement("h4");
        title.innerText = currentItem.data.title;
        body.appendChild(title);

        // Display text
        var fulltext = document.createElement("h6");
        fulltext.innerText = currentItem.data.text;
        body.appendChild(fulltext);

        result.appendChild(body);
        return result;
    });
}

此代码的源代码位于consumer preview sample package 的 ListView 项模板示例中。不幸的是，我找不到它的 C# 版本。

希望这在一定程度上有所帮助。

【讨论】：

谢谢回复。是的。我正在寻找这个的正式版本。虽然我只能搜索 Javascript。由于时间问题，我无法实现 Javascript，因为我没有与 Javascript b4 交互。我需要 C# n XAML 样式的变量网格视图>

【解决方案2】：

这是一个在 C# 中执行此操作的解决方案：http://leeontech.wordpress.com/2012/03/01/customizing-gridview-items-in-metro-app-4/

【讨论】：

它也没有分组。我已经浏览了所有在线资源。

【解决方案3】：

更新此内容是因为自提出问题以来出现了一些其他有用的信息。我的同事 Jerry Nixon 有一篇很好的文章，描述了如何在 GridView 中创建可变大小的项目：

Windows 8 Beauty Tip: Using a VariableSizedWrapGrid in a GridView makes Grids Prettier

短版，你可以自定义GridView，实现PrepareContainerForItemOverride。

Mark Rideout 发布的早期示例（5 月）中还有更多详细信息：

How To: Create a Variable Sized Grouped GridView (like the store)

【讨论】：

【解决方案4】：

您可以采用的一种方法是使用 GridView 的内置选择器属性。

见我的博客entry。

简而言之，您可以创建自定义样式选择器。您所要做的就是覆盖您的 StyleSelectorCore() 方法并输入您的逻辑来选择定义列或行跨度的样式。

您需要通过 Blend 或在线资源获取默认的 GridViewItem 样式模板，并创建默认的显式样式。然后根据显式创建新样式，如下所示：

<Style x:Key="DoubleHeightGridViewItemStyle"
       BasedOn="{StaticResource DefaultGridViewItemStyle}"
       TargetType="GridViewItem">
       <Setter Property="VariableSizedWrapGrid.RowSpan"
               Value="2" />
</Style>

为此，您还需要更改 GridView 的 ItemsPanel 模板以使用 VariableSizedWrapGrid。

最后，通过创建自定义 DataTemplateSelector，您将能够更改绑定项目的 DataTemplate。除非您的超大项目可以使用与默认尺寸相同的 DataTemplate，否则您需要这样做。

【讨论】：