Question

我想为wrapgrid中的项做一个VariableSizedWrapGrid。 enter image description here

像这样的东西。上面的组标题将所有子项目显示在照片上。滚动到右手后，另一个组标题与子项如下所示。任何人都知道怎么做？

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

Answer 1

更新此内容是因为问题被提出以后出现了一些其他有用的东西。我的同事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)

Answer 2

您可以使用GridView的内置选择器属性。

请参阅我的博客entry。

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

您需要通过Blend或在线资源获取默认的GridViewItem样式模板，并创建默认的显式样式。然后创建新的样式基于明确的样式：

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

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

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

Answer 3

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

Answer 4

我不确定这样做的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＃版本。

希望这在某种程度上有所帮助。

如何制作VariableSized GridView项目？

4 个答案: