如何在LongListSelector中包装ItemsPanel？

Question

我正在使用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>

但是看起来像：

我需要获得：

您的假设是什么？ 谢谢

- Serhii Kyslyi

Answer 1

问题在于，GroupItemsPanel 属性没有改变主列表的 ItemsPanel，而是改变了组标题的 ItemsPanel，如下图所示（图片来源：http://www.windowsphonegeek.com/articles/wp7-longlistselector-in-depth--part2-data-binding-scenarios）：

不幸的是，WP 工具包似乎没有暴露出您想要的 ItemsPanel，因此您将需要修改工具包源代码以获得所需的行为。

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!

- codechinchilla

---

非常好的答案！虽然对我来说有点太hacky了，所以我现在还是会坚持使用ListBox。 - MEMark

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

- Kert Kaelep