[Winodows Phone 7 control details] Silverlight toolkit for Windows Phone 7.1 control-8

9. longlistselector

This control is a category list, and you can quickly select by class. The most important thing about this control is to bind and classify the required data. In the sample, there is a people example (peoplebyfirstname. CS, peopleingroup. CS, person. how to implement these CS files)

        <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> // sets the way in which the category list is displayed. If this setting is not set, the category list is displayed in a direct column.

<Toolkit: longlistselector. groupitemtemplate> // display content and method of items in the category list

<Toolkit: longlistselector. groupheadertemplate> // sets the display content and method of the header of the List category.

<Toolkit: longlistselector. itemtemplate> // sets the display mode of the content in the list.

    <phone:PhoneApplicationPage.Resources>        <data:PeopleByFirstName x:Key="people"/>        <data:GroupToBrushValueConverter x:Key="groupbrush"/>    </phone:PhoneApplicationPage.Resources>

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