GridView and VariableSizedWrapGrid templating windows store app

Question

I'm writing a windows store app, the main page is a GridView of grouped items. I already managed to get the templates of the different tiles of the GridView, but the problem is as follows:

I have bound the ItemsSource to my viewModel's collection that holds 12 items. there is 2 different problems: First, how can I make the GridView to always not show the last one or two items, in that way that the there is always a missing tile or two as shown in the picture, although there is "room" for more items in the bounded collection.

Second, I'm using an ItemTemplateSelector for different templates for the items based on an index. my design is that in every last item I need to select a template without an image(for the example). How can I get the last visible item in the GridView?

This is my code to create the different tile sizes:

 protected override void PrepareContainerForItemOverride(Windows.UI.Xaml.DependencyObject element, object item)
        {
            try
            {
                IIndexable viewModel = item as IIndexable;
                element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, viewModel.Index == 0 ? 2 : 1);
                element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, viewModel.Index == 0 ? 2 : 1);
            }
            catch
            {
                element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.ColumnSpanProperty, 1);
                element.SetValue(Windows.UI.Xaml.Controls.VariableSizedWrapGrid.RowSpanProperty, 1);
            }
            finally
            {
                base.PrepareContainerForItemOverride(element, item);
            }
        }

Thanks.

Answer 1

In order to do that, you'll either have to write your own control or you can have your viewmodel (which should store your itemssource) return a subset of the items.

If you do write your own control, you'll want to override the ArrangeOverride and MeasureOverride methods. You'll then be able to create a dependency property of something like "MaximumColumns". Your Arrange and Measure methods can then determine whether or not to add a child to the tree based on if there's enough room. I suggest creating a two-dimensional array of bools to keep track of which cells are occupied, then having a "Fit" function that attempts to find if there is room for the object you are adding.

For returning the subset of items, you can either have your viewmodel calculate how much space each one will take and return a new collection of the proper items, or you can just hard limit it to a given value.