How to wrap ItemsPanel in LongListSelector?

Question

I am using listbox and wrappanel for displaying data.

For example:

    <ListBox ItemTemplate="{StaticResource ItemTemplateListBoxAnimation}">
        <ListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel ItemHeight="150" ItemWidth="150">
                </toolkit:WrapPanel>
            </ItemsPanelTemplate>
        </ListBox.ItemsPanel>
    </ListBox>

    <DataTemplate x:Key="ItemTemplateListBoxAnimation">
        <Grid Width="130" Height="130">
            <Image Source="{Binding Image}"/>
        </Grid>
    </DataTemplate>

It's look like:

Now I need to use LongListSelector and grouping result:

    <toolkit:LongListSelector ItemTemplate="{StaticResource ItemTemplateListBoxAnimation}">
        <toolkit:LongListSelector.GroupItemsPanel>
            <ItemsPanelTemplate>
                <toolkit:WrapPanel/>
            </ItemsPanelTemplate>
        </toolkit:LongListSelector.GroupItemsPanel>
    </toolkit:LongListSelector>

But it's look like:

I need to get:

Your assumptions? Thank you

Answer 1

The issue is that the GroupItemsPanel property is not changing the ItemsPanel of the main list, but rather the ItemsPanel of the group headers, as can be seen here (image from http://www.windowsphonegeek.com/articles/wp7-longlistselector-in-depth--part2-data-binding-scenarios):

Unfortunately the WP toolkit doesn't seem to expose the ItemsPanel that you want, so you'll have to modify the toolkit source to get the behavior that you want.

1. Get the source from here: https://phone.codeplex.com/SourceControl/changeset/view/80797

2. Unzip, open up the Microsoft.Phone.Controls.Toolkit.WP7.sln solution in Visual Studio.

3. Under the Microsoft.Phone.Controls.Toolkit.WP7 project, open Themes/Generic.xaml

4. Scroll down to the Style that applies to LongListSelector (TargetType="controls:LongListSelector")

5. Change the TemplatedListBox.ItemsPanel to a WrapPanel

                   <primitives:TemplatedListBox.ItemsPanel>
                       <ItemsPanelTemplate>
                           <controls:WrapPanel/>
                       </ItemsPanelTemplate>
                   </primitives:TemplatedListBox.ItemsPanel>
   

6. Rebuild and reference the new dll, your items should wrap appropriately!

Answer 2

You can override it by using custom style

<toolkit:LongListSelector 
                        Background="{StaticResource FCBackground}"  
                        HorizontalContentAlignment="Stretch" 
                        ItemsSource="{Binding NowShowingEvents}"
                        ItemTemplate="{StaticResource EventsListMediumItemTemplate}"  
                        IsFlatList="True" 
                        Style="{StaticResource LongListSelectorStyleCustom}"
                                >

                    </toolkit:LongListSelector>


   <Style x:Key="LongListSelectorStyleCustom" TargetType="toolkit:LongListSelector">
        <Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="toolkit:LongListSelector">
                    <toolkitPrimitives:TemplatedListBox x:Name="TemplatedListBox" Background="{TemplateBinding Background}">
                        <toolkitPrimitives:TemplatedListBox.ItemContainerStyle>
                            <Style TargetType="ListBoxItem">
                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                            </Style>

                        </toolkitPrimitives:TemplatedListBox.ItemContainerStyle>
                        <toolkitPrimitives:TemplatedListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel Margin="24,0,12,24"/>
                            </ItemsPanelTemplate>
                        </toolkitPrimitives:TemplatedListBox.ItemsPanel>
                    </toolkitPrimitives:TemplatedListBox>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>