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:

enter image description here

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:

enter image description here

I need to get:

enter image description here

Your assumptions? Thank you

score 5 · Answer 1 · answered Nov 05 '12 at 23:57

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):

group headers wrapped

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.

Get the source from here: https://phone.codeplex.com/SourceControl/changeset/view/80797
Unzip, open up the Microsoft.Phone.Controls.Toolkit.WP7.sln solution in Visual Studio.
Under the Microsoft.Phone.Controls.Toolkit.WP7 project, open Themes/Generic.xaml
Scroll down to the Style that applies to LongListSelector (TargetType="controls:LongListSelector")

Change the TemplatedListBox.ItemsPanel to a WrapPanel

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

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

Excellent answer! Although a bit to hacky for me, so I'll stick with ListBox for now. — MEMark, Jan 04 '14 at 13:08

score 3 · Answer 2 · answered Oct 09 '13 at 09:27

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>

How to wrap ItemsPanel in LongListSelector?

2 Answers2