Using differently sized items in ItemsWrapGrid

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!

Answer 1

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)

Answer 2

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?

Answer 3

Hello,

did you find a solution?

I have the same problem here :(