CODEWITHSUNDEEP
windows-phone-7xamlwindows-phonewrappanellonglistselector
Serhii Kyslyi
Serhii Kyslyi

Reputation: 1823

How to wrap ItemsPanel in LongListSelector?

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

Upvotes: 12

Views: 3114

Answers (2)

Kert Kaelep
Kert Kaelep

Reputation: 163

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>

Upvotes: 3

woot
woot

Reputation: 2139

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.

  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!

Upvotes: 5

Related Questions