[Winodows Phone 7控件详解]Silverlight toolkit for Windows Phone 7.1控件-8

9.LongListSelector

这个控件是一个归类列表，并且可以快速选择按类选择。这个控件最主要的是要把需要的数据进行绑定和分类，在sample中有一个People的例子（PeopleByFirstName.cs、PeopleInGroup.cs、Person.cs这几个文件可以看出如何实现）

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

            <toolkit:LongListSelector HorizontalAlignment="Left" Margin="12,46,0,0" Name="longListSelector1" VerticalAlignment="Top" Height="517" Width="438" ItemsSource="{StaticResource people}">

                <toolkit:LongListSelector.GroupItemsPanel>

                    <ItemsPanelTemplate>

                        <toolkit:WrapPanel Orientation="Horizontal"/>

                    </ItemsPanelTemplate>

                </toolkit:LongListSelector.GroupItemsPanel>

                <toolkit:LongListSelector.GroupItemTemplate>

                    <DataTemplate>

                        <Border Background="{Binding Converter={StaticResource groupbrush}}" Width="99" Height="99" Margin="6" IsHitTestVisible="{Binding HasItems}">

                            <TextBlock Text="{Binding Key}" 

                                       FontFamily="{StaticResource PhoneFontFamilySemiBold}"

                                       FontSize="36"

                                       Margin="{StaticResource PhoneTouchTargetOverhang}"

                                       Foreground="{StaticResource PhoneForegroundBrush}"                                        

                                       VerticalAlignment="Bottom"/>

                        </Border>

                    </DataTemplate>

                </toolkit:LongListSelector.GroupItemTemplate>



                <toolkit:LongListSelector.GroupHeaderTemplate>

                    <DataTemplate>

                        <Border Background="Transparent">

                            <Border Background="{StaticResource PhoneAccentBrush}" Width="75" Height="75" HorizontalAlignment="Left">

                                <TextBlock Text="{Binding Key}" 

                                           Foreground="{StaticResource PhoneForegroundBrush}" 

                                           Style="{StaticResource PhoneTextExtraLargeStyle}"

                                           VerticalAlignment="Bottom"/>

                            </Border>

                        </Border>

                    </DataTemplate>

                </toolkit:LongListSelector.GroupHeaderTemplate>



                <toolkit:LongListSelector.ItemTemplate>

                    <DataTemplate>

                        <Grid Margin="{StaticResource PhoneTouchTargetOverhang}">

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="Auto"/>

                                <ColumnDefinition Width="*"/>

                            </Grid.ColumnDefinitions>

                            <Image Width="110" Height="150" Source="{Binding ImageUrl}" VerticalAlignment="Top"/>

                            <StackPanel Grid.Column="1" VerticalAlignment="Top">

                                <TextBlock Text="{Binding FullName}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="12,-12,12,6"/>

                                <TextBlock Text="{Binding Email}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>

                                <StackPanel Orientation="Horizontal">

                                    <TextBlock Text="Mobile:" Style="{StaticResource PhoneTextSmallStyle}"/>

                                    <TextBlock Text="{Binding Mobile}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>

                                </StackPanel>

                                <StackPanel Orientation="Horizontal">

                                    <TextBlock Text="Home:" Style="{StaticResource PhoneTextSmallStyle}"/>

                                    <TextBlock Text="{Binding Home}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>

                                </StackPanel>

                            </StackPanel>

                        </Grid>

                    </DataTemplate>

                </toolkit:LongListSelector.ItemTemplate>

            </toolkit:LongListSelector>



        </Grid>

　　<toolkit:LongListSelector.GroupItemsPanel>//设置以什么样的方式显示分类列表，如果没有这个设置，分类列表以直列显示

 <toolkit:LongListSelector.GroupItemTemplate>//分类列表内的item显示内容和方式

  <toolkit:LongListSelector.GroupHeaderTemplate>//设置列表分类的头的显示内容和方式

    <toolkit:LongListSelector.ItemTemplate>//设置列表里的内容的显示方式

    <phone:PhoneApplicationPage.Resources>

        <data:PeopleByFirstName x:Key="people"/>

        <data:GroupToBrushValueConverter x:Key="groupbrush"/>

    </phone:PhoneApplicationPage.Resources>

xmlns:data="clr-namespace:testNewControls.Data"