Using differently sized items in ItemsWrapGrid RRS feed

  • Question

  • Hello everybody!

    I encountered a "strange" situation and I can't find out what is the solution to the problem.

    So I'm creating an app targeting Windows 8.1 in C#/XAML and I need a GridView with one "highlighted" item that has different size than the other items. If I wouldn't need the virtualization than I would just put it in a VariableSizedWrapGrid and use it's RowSpan and ColumnSpan properties. But if I want the virtualization (and I want it), than I have to stick to the new ItemsWrapGrid. It really does it's job perfectly, virualizes the items even if the source is groupped... BUT I don't have any possible way to create that "highlighted" element (or at least I could find it yet).

    In the MSDN documentation it says:

    "Positions child elements sequentially from left to right or top to bottom. When elements extend beyond the container edge, elements are positioned in the next row or column."

    Now it seems like it's not the case because I couldn't get the items to span across multiple rows or columns with ItemContainerStyleSelector or DataTemplateSelector.

    So wrap up:

    If I use no virtualization (StackPanel + VariableSizedWrapGrid), then I have what I need, expect it is not virtualized and I have a lot of items, so I don't wan't to throw away the virtualization.

    If I use "half virtualization" (VirtualizingStackPanel + VariableSizedWrapGrid) then I have my groups virtualized (though it's not the ideal thing, because if I have a huge group, it still loads it at once) and the scrolling is jumping (i guess because of the different size of the groups).

    If I use "full virtualization" (ItemsWrapGrid), then I can't set the GroupStyle.Panel, I have virtualization (even if the source is groupped), but I don't have the "highlighted" item.

    Is there any solution to this problem? I really hope that I just did something wrong and this scenario is actually supported.

    Thanks in advance!

    • Edited by Emil Petró Thursday, October 24, 2013 3:22 PM mispell
    Thursday, October 24, 2013 12:39 PM

All replies

  • Hi Emil,

    Sounds like you are doing it correctly.  You have not provided a simple repro however so there is no way to assist further.

    Jeff Sanders (MSFT)

    @jsandersrocks - Windows Store Developer Solutions @WSDevSol
    Getting Started With Windows Azure Mobile Services development? Click here
    Getting Started With Windows Phone or Store app development? Click here
    My Team Blog: Windows Store & Phone Developer Solutions
    My Blog: Http Client Protocol Issues (and other fun stuff I support)

    Friday, October 25, 2013 12:10 PM
  • It is easy to reproduce (actually I was not able not to reproduce it):

    • First, you need a normal GridView (without any kind of fancy ItemTemplate or ItemsPanel definition), so you get the ItemsWrapGrid as ItemsPanel by default.
    • Actually you should define the ItemsPanel as an ItemsWrapGrid and set the ItemWidth and ItemHeight, because if you don't than every item will be as large as the first one.
    • Second, generate the ItemsSource with the Enumerable.Range(0, 100) operator.
    • Third, create an easy DataTemplateSelector or StyleSelector to make the first item (0) big, and every other item small.

      I used a code like this for the selector logic for both the DataTemplateSelector and StyleSelector
    public class CustomItemContainerStyleSelector : StyleSelector
        public Style Normal { get; set; }
        public Style Highlighted { get; set; }
        protected override Style SelectStyleCore(object item, DependencyObject container)
            if ((int)item == 0) return Highlighted;
            else return Normal;
    • For DataTemplates I just created two differently (but explicitily) sized Rectangles (so they could extend beyond the container edge, and for the StyleSelector I defined two Styles for the Highlighted and Normal items (GridViewItem) and set their size explicitly and for the highlighted element, the VariableSizedWrapGrid.ColumnSpan and RowSpan properties just in case if for some reason the ItemsWrapGrid would use that :)

    Or should I create an actual solution and upload it to Skydrive?

    Friday, October 25, 2013 1:57 PM
  • Hello,

    did you find a solution?

    I have the same problem here :(

    Wednesday, October 22, 2014 2:01 PM