学步园

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"