Как обернуть ItemsPanel в LongListSelector?

Я использую listbox и wrappanel для отображения данных.

Например:

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

Он выглядит так:

Теперь Мне нужно использовать LongListSelector и результат группировки:

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

Но это выглядит так:

Мне нужно получить:

Ваши предположения? Спасибо

Ответ 1

Проблема заключается в том, что свойство GroupItemsPanel не меняет ItemsPanel основного списка, а скорее ItemsPanel заголовков групп, как можно видеть здесь (изображение из http://www.windowsphonegeek.com/articles/wp7-longlistselector-in-depth--part2-data-binding-scenarios):

К сожалению, набор инструментов WP, похоже, не отображает ItemsPanel, который вам нужен, поэтому вам нужно будет изменить источник инструментария, чтобы получить нужное поведение.

Получите источник отсюда: https://phone.codeplex.com/SourceControl/changeset/view/80797
Разархивируйте, откройте решение Microsoft.Phone.Controls.Toolkit.WP7.sln в Visual Studio.
В проекте Microsoft.Phone.Controls.Toolkit.WP7 откройте "Темы/Generic.xaml"
Прокрутите вниз до Style, который применяется к LongListSelector (TargetType = "controls: LongListSelector" )

Измените TemplatedListBox.ItemsPanel на WrapPanel

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

Перестроить и ссылаться на новую dll, ваши элементы должны быть соответствующим образом перенесены!

Ответ 2

Вы можете переопределить его с помощью пользовательского стиля

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