如何制作VariableSized GridView项目？

我想为包装内的物品做一个VariableSizedWrapGrid。 enter image description here 如何制作VariableSized GridView项目？

就是这样。上面的组标题存储照片上的所有子项目显示。滚动到右手后，显示如下所示的另一个组标题。任何人有任何想法如何做？

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

来源

2012-03-20 Carson Lee

一个可以去的方式是使用GridView的内置选择属性。

查看我的博客entry。

简而言之，您可以创建一个自定义StyleSelector。您只需重写StyleSelectorCore（）方法并将其放入逻辑中以选择定义列或行跨度的样式。

您需要通过Blend或在线资源获取默认的GridViewItem样式模板并创建默认的显式样式。于是别出心裁支持算法FMP明确一个像这样：

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

对于这个工作，你还需要改变GridView的ItemsPanel模板使用VariableSizedWrapGrid。

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

来源

2013-03-12 17:31:17 SergioL

我不确定这样做的C＃和XMAL代码。但在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; 
    }); 
}

这段代码的来源JavaScript创建的项目模板是consumer preview sample package的ListView项模板样本。不幸的是，我无法找到它的C＃版本。

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

来源

2012-03-20 16:40:32

Thx for reply。 Yupz。我正在寻找这个官方版本。虽然我只能搜索Javascript。由于时间问题，我无法实现Javascript，因为我没有与Javascript b4交互。我需要C＃n XAML风格的可变网格视图>< – 2012-03-20 17:17:06

也许在msdn上提出同样的问题？或者开始学习javascript：P .. – 2012-03-20 17:49:53

下面是在C＃中做一个解决方案：http://leeontech.wordpress.com/2012/03/01/customizing-gridview-items-in-metro-app-4/

来源

2012-03-28 15:23:07

它也没有分组。我已经查看所有在线资源。 – 2012-03-28 18:01:24

更新，是因为一些其他有用的东西已经出现，因为有人问。我的同事杰里尼克松有一个很好的职位描述如何在GridView创建可变大小的物品：