VariableSizedWrapGrid on an ItemPanelTemplate in WP8

Question

On WP8 I Would like to display a list on a page like this :

I am aware that I can do this easily with WP8.1 and the VariableSizedWrapGrid Control. But I need to make it work on WP8.0. So I try the toolkit from Kinnara : https://www.nuget.org/packages/WPtoolkit.Kinnara/ Which contains a VariableSizedWrapGrid.

I can do the display that I want (see the screenshot) but I can't use it in a LongListSelector or a ListBox as an ItemPanelTemplate.

Here is the code that I tried (it is inspired from a method that works on Windows 8, but unfortunately it doesn't seem to work on WP8) and also from this blog post : http://mtaulty.com/CommunityServer/blogs/mike_taultys_blog/archive/2012/09/14/windows-8-xaml-and-displaying-multiple-sized-items.aspx .

           <local:SpecificListBox x:Name="LB_Wings" ItemTemplate="{StaticResource IT_Wings}" >
                <local:SpecificListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:VariableSizedWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="4"></toolkit:VariableSizedWrapGrid>
                    </ItemsPanelTemplate>
                </local:SpecificListBox.ItemsPanel>
                <local:SpecificListBox.ItemContainerStyle>
                    <Style TargetType="ListBoxItem">
                    <Setter Property="toolkit:VariableSizedWrapGrid.RowSpan"   Value="{Binding ItemSize}" />
                        <Setter Property="toolkit:VariableSizedWrapGrid.ColumnSpan"  Value="{Binding ItemSize}" />
                    </Style>
                </local:SpecificListBox.ItemContainerStyle>
            </local:SpecificListBox>

the data template :

  <DataTemplate x:Key="IT_Wings">          
            <Grid Margin="0,0,12,12" >
                <Image Source="{Binding BI_List}" Stretch="UniformToFill" </Image>
            </Grid>
    </DataTemplate>

The SpecificListBox is just a class that inherit ListBox and overridde the PrepareContainerForItemOverride method :

class SpecificListBox : ListBox
{
    public SpecificListBox() { }
    protected override void PrepareContainerForItemOverride(System.Windows.DependencyObject element, object item)
    {    
        dynamic lateBoundItem = item;

        int sizeFactor = (int)lateBoundItem.ItemSize;

        element.SetValue(VariableSizedWrapGrid.ColumnSpanProperty, sizeFactor);
        element.SetValue(VariableSizedWrapGrid.RowSpanProperty, sizeFactor);  
        base.PrepareContainerForItemOverride(element, item);
    }
}

Now in the code behind I just populate LB_Wings with a list of items (that have the ItemSize property) :

LB_Wings.ItemsSource = listOfItems; //a list of items that have the ItemSize property.

Unfortunately I get the error : "Cannot create Instance of type : SpecificListBox" when I Initialize my page.

I think I 'm close to the solution. Can anyone help me to do this kind of diplay (which seems natural on WP8) but with a ListBox and an ItemPanelTemplate ?

Thanks a lot

Answer 1

All you have to do is make SpecificListBox a public class. :)

public class SpecificListBox : ListBox

Edit

Also, you don't need the bindings in the ItemContainerStyle of the SpecificListBox. I changed those with Horizontal/VerticalContentAlignment = Stretch, because I feel it looks better this way. Without this the control in the DataTemplate does not take all the place for the item. Here's the changed xaml:

<local:SpecificListBox x:Name="LB_Wings" ItemTemplate="{StaticResource IT_Wings}" >
    <local:SpecificListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <toolkit:VariableSizedWrapGrid ItemWidth="100" ItemHeight="100" MaximumRowsOrColumns="4"></toolkit:VariableSizedWrapGrid>
        </ItemsPanelTemplate>
    </local:SpecificListBox.ItemsPanel>
    <local:SpecificListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />
        </Style>
    </local:SpecificListBox.ItemContainerStyle>
</local:SpecificListBox>