How to make a gridview element with a variable variable?

Question

I would like to make VariableSizedWrapGrid for an element in a wrapgrid.

Something like that. The group heading above stores all the shows of the children's subject in the photograph. After scrolling to the right, another group header with a child is shown below. Does anyone know how to do this?

I was able to display the name of the group with a child, as shown below. The only thing I cannot achieve is the size of the variable of the child.

Answer 1

One way you can go is to use the built-in properties of the GridView selector.

See my blog post .

In a nutshell, you can create your own StyleSelector. All you have to do is override the StyleSelectorCore () method and put in your logic a style selection that defines spaces in a column or row.

You will need to get the default GridViewItem style template through Blend or an online resource and create an explicit default style. Then create new BasedOn styles explicitly, for example:

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

For this, you will also need to modify the GridView ItemsPanel template to use VariableSizedWrapGrid.

Finally, by creating your own DataTemplateSelector, you can modify the DataTemlates of your related items. You will need to do this if your large-sized items cannot use the same DataTemplate as the default size.

Answer 2

Updating this because some other useful things appeared after the question was asked. My colleague Jerry Nixon has a good article on how to create variable-sized objects in a GridView:

• Windows 8 tip: Using VariableSizedWrapGrid in a GridView makes meshes more attractive

Short version, you can create a custom GridView that implements PrepareContainerForItemOverride .

An earlier example (since May) also contains more details about what Mark Rideout posted:

• How to create a variable dimension group GridView (for example, a store)

Answer 3

Here is the solution for this in C #: http://leeontech.wordpress.com/2012/03/01/customizing-gridview-items-in-metro-app-4/

Answer 4

I am not sure about the C # and XMAL code for this. But in Javascript, instead of creating a template in HTML, you can create an element template in javascript by doing something like this

 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; }); } 

The source of this code is contained in the sample ListView item templates in the sample preview package . Unfortunately, I could not find the C # version.

Hope this helps to some extent.