CODEWITHSUNDEEP
c#xamlwindows-8windows-runtimewinrt-xaml
Tommy
Tommy

Reputation: 583

Different-sized Tiles in Windows App

I know that I can use the ListView and GridView to create "Tiles"/Items whatever size I want, but how can I create different-sized Tiles for use within my app? This will need to work with a ListView or GridView.

I have tried so many things but I just have absolutely no idea how to do this. Any help will be much appreciated.

In case I haven't described what I am trying to achieve properly, here is a pic:

enter image description here

Upvotes: 3

Views: 1068

Answers (2)

Jawahar
Jawahar

Reputation: 4885

A simple way is to create a new class inheriting from GridView and override the PrepareContainerForItemOverride method. In which you can set the Column Span and RowSpan to Child item based on the model data. Consider your model class contains the Spanning information.

public class VariableGrid : GridView
{
    protected override void PrepareContainerForItemOverride(DependencyObject element, object item)
    {
        ITileItem tile = item as ITileItem;
        if (tile != null)
        {
            GridViewItem griditem = element as GridViewItem;
            if (griditem != null)
            {
                VariableSizedWrapGrid.SetColumnSpan(griditem, tile.ColumnSpan);
                VariableSizedWrapGrid.SetRowSpan(griditem, tile.RowSpan);
            }
        }
        base.PrepareContainerForItemOverride(element, item);
    }
}

More information : http://wpfplayground.blogspot.in/2013/03/different-sized-tile-items-in-winrt.html

Upvotes: 2

Filip Skakun
Filip Skakun

Reputation: 31724

You need to set ItemsPanel/ItemsPanelTemplate of your list to VariableSizedWrapGrid and set Grid.RowSpan/ColumnSpan of your list items to the values you want. I believe you can do that in ItemContainerStyle of the list control, which is best extracted by right-clicking the control in VS XAML design view or in Blend and selecting "Edit Additional Templates"/"Edit Generated Item Container".

Upvotes: 1

Related Questions