How to get gridview with variable size gridview elements?

Question

I want to display images in a grouped gridview. Now all images will have different heights and widths. So I want to show the images in the original width. I tried WrapGrid , VariableSizedWrapGrid and VirtualizingStackPanel but did not get the result. Please note that my model class contains the image name (path), height and width. So, how can I show the images as below?

Answer 1

No, I doubt you tried WrapPanel. There are no WinRTs.

Using VariableSizedWrapGrid, you get the result something like this:

Using WrapGrid, you will get the result something like this:

Presto! 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 is one. I am setting the width of the WrapPanel incorrectly. In the above code, by default I did not use it until 2000 (which is ridiculous). You will need to understand this part and post your decision here. (I can't do everything) Otherwise, this is what you are asking 100% for.

WinRT WrapPanel is on my blog http://jerrynixon.com (in the left column)

Good luck, Farhan.

See also: ms forum, where you asked the same message

Answer 2

Well, if this is the layout you want, you do not need the Grid view for the layout, since it is not a grid. A GridView will determine the size of all elements based on the first element size. For this layout, you most likely will need a custom implementation of ItemsControl .

Answer 3

If you have options for using html / winjs for the application, you can try the sample list item list template - “Creating a template function that can span multiple cells”. Here you can choose to use a smaller grid block and define several css classes. In the fn element template based on image size, use the best suitable css class to scale the image.

eg:

 .square-image { width: 200px; height: 200px; } // 4:3 aspect ratio .landscape-image { width: 200px; height: 150px; } // aspect ratio 4:6 portrait-image { width: 200px; height: 300px; } 

you get the idea. you can define more css classes with different proportions. In this case, you need to use -ms-grid-row-align: center for one dimension and another dimension as 100% for the element to ensure that the image matches the cell and is not distorted.

If you cannot use winjs, I see some examples that talk about the size of the grid variable in a GridView for C #. but I have not tried them. These links may be helpful.

• Grouped variable size gridview
• Grid with variable elements