Q:

How to get gridview with variable sized gridview items?

I want to show images in grouped gridview. Now all the images will have various height & width So I want to show images in it's original height width. I tried WrapGrid, VariableSizedWrapGrid & VirtualizingStackPanel but didn't get the output. Please note my model class contains image name (path), height & width. So how can I show images like given below ?

A:

No, I doubt you tried a WrapPanel. There's not one in WinRT.
Using VariableSizedWrapGrid you get a result something like this:

Using a WrapGrid you get a result something like this:

Presto! The trick?
public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
    }
}

public class MyViewModel
{
    public MyViewModel()
    {
        var _Random = new Random((int)DateTime.Now.Ticks);
        var _Colors = typeof(Windows.UI.Colors)
            // using System.Reflection;
            .GetRuntimeProperties()
            .Select((c, i) => new
            {
                Title = c.Name,
                Color = (Windows.UI.Color)c.GetValue(null),
                ColSpan = _Random.Next(20, 300),
                RowSpan = _Random.Next(20, 300),
            });
        this.Groups = new System.Collections.ObjectModel.ObservableCollection<object>();
        this.Groups.Add(new { Title = "Mostly Red", Children = _Colors.Where(x => x.Color.R > 200) });
        this.Groups.Add(new { Title = "Mostly Green", Children = _Colors.Where(x => x.Color.G > 200) });
        this.Groups.Add(new { Title = "Mostly Blue", Children = _Colors.Where(x => x.Color.B > 200) });
    }
    public System.Collections.ObjectModel.ObservableCollection<object> Groups { get; private set; }
}

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

    <Grid.DataContext>
        <local:MyViewModel />
    </Grid.DataContext>

    <Grid.Resources>
        <CollectionViewSource 
            x:Name="MyCsv"
            IsSourceGrouped="True"
            ItemsPath="Children"
            Source="{Binding Groups}"
            d:Source="{Binding Groups, Source={d:DesignInstance Type=local:MyViewModel, IsDesignTimeCreatable=True}}" />
    </Grid.Resources>

    <GridView ItemsSource="{Binding Source={StaticResource MyCsv}}">
        <GridView.GroupStyle>
            <GroupStyle>
                <GroupStyle.HeaderTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <Rectangle Height="20" Width="20" Fill="{Binding Brush}" Margin="0,0,10,0" />
                            <TextBlock FontSize="40" Text="{Binding Title}" />
                        </StackPanel>
                    </DataTemplate>
                </GroupStyle.HeaderTemplate>
                <GroupStyle.Panel>
                    <ItemsPanelTemplate>
                        <local:WrapPanel Orientation="Vertical" Width="2000" />
                        <!--<VariableSizedWrapGrid Margin="0,0,80,0" ItemHeight="1" ItemWidth="1" />-->
                    </ItemsPanelTemplate>
                </GroupStyle.Panel>
            </GroupStyle>
        </GridView.GroupStyle>
        <GridView.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" Margin="0,0,80,0" />
            </ItemsPanelTemplate>
        </GridView.ItemsPanel>
        <GridView.ItemTemplate>
            <DataTemplate>
                <Grid Height="{Binding RowSpan}" Width="{Binding ColSpan}">
                    <Grid.Background>
                        <SolidColorBrush Color="{Binding Color}" />
                    </Grid.Background>
                </Grid>
            </DataTemplate>
        </GridView.ItemTemplate>
    </GridView>

</Grid>

But there's one gotcha. I am not correctly setting the width of the WrapPanel. In the code above, I've defaulted it to 2000 (which is ridiculous). You'll have to figure that part out and post your solution here. (I can't do everything) Otherwise, it's what you are asking for 100%.
The WinRT WrapPanel is on my blog http://jerrynixon.com (on the left column)
Good luck, Farhan.
See also: ms forum where you asked the same thing

