WP7之LongListSelector控件

 1.引用:Microsoft.Phone.Controls.Toolkit空間

2.xaml:

<toolkit:LongListSelector x:Name="LongList" Background="Transparent" Margin="0,0,0,0">
                <toolkit:LongListSelector.GroupItemsPanel>
                    <ItemsPanelTemplate>
                        <toolkit:WrapPanel Orientation="Horizontal"/>
                    </ItemsPanelTemplate>
                </toolkit:LongListSelector.GroupItemsPanel>

                <toolkit:LongListSelector.GroupItemTemplate>
                    <DataTemplate>
                        <Border Background="{StaticResource PhoneAccentBrush}" Width="99" Height="99" Margin="6" >
                            <TextBlock Text="{Binding GroupItem}"
                                           FontFamily="{StaticResource PhoneFontFamilySemiBold}"
                                           FontSize="48"
                                           Margin="8,0,0,0"
                                           Foreground="White"
                                           VerticalAlignment="Bottom"/>
                        </Border>
                    </DataTemplate>
                </toolkit:LongListSelector.GroupItemTemplate>

                <toolkit:LongListSelector.GroupHeaderTemplate>
                    <DataTemplate>
                        <Border Background="Transparent" Margin="12,8,0,8">
                            <Border Background="{StaticResource PhoneAccentBrush}"
                                        Padding="8,0,0,0" Width="62" Height="62"
                                        HorizontalAlignment="Left">
                                <TextBlock Text="{Binding GroupItem}"
                                               Foreground="#FFFFFF"
                                               FontSize="48"
                                               FontFamily="{StaticResource PhoneFontFamilySemiLight}"
                                               HorizontalAlignment="Left"
                                               VerticalAlignment="Bottom"/>
                            </Border>
                        </Border>
                    </DataTemplate>
                </toolkit:LongListSelector.GroupHeaderTemplate>

                <toolkit:LongListSelector.ItemTemplate>
                    <DataTemplate>
                        <Grid Margin="12,8,0,8">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <StackPanel Grid.Column="1" VerticalAlignment="Top">
                                <TextBlock Text="{Binding Name}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="12,-12,12,6"/>
                                <TextBlock Text="{Binding Content}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
                            </StackPanel>
                        </Grid>
                    </DataTemplate>
                </toolkit:LongListSelector.ItemTemplate>
            </toolkit:LongListSelector>
3.後臺cs代碼
public partial class MainPage : PhoneApplicationPage
{
    // Constructor
    public MainPage()
    {
        InitializeComponent();
        Loaded += new RoutedEventHandler(MainPage_Loaded);
        LongList.SelectionChanged += new SelectionChangedEventHandler(LongList_SelectionChanged);
    }
    void LongList_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        if (LongList.SelectedItem != null)
        {
            var d = LongList.SelectedItem as mydata;
            if (d != null)
            {

            }
        }
    }
    void MainPage_Loaded(object sender, RoutedEventArgs e)
    {
        List<Group<string, mydata>> dt = new List<Group<string, mydata>>();
        for (int i = 0; i < 10; i++)
        {
            dt.Add(new Group<string, mydata>(i.ToString(), getContent(i)));
        }
        LongList.ItemsSource = dt;
    }
    IEnumerable<mydata> getContent(int k)
    {
        List<mydata> dt = new List<mydata>();
        for (int i = 0; i < 10; i++)
        {
            dt.Add(new mydata() { Name = i.ToString() + "key", Content = i.ToString() + "val" });
        }
        return dt;
    }
}
public class Group<S, T> : IEnumerable<T>
{
    public Group(S groupItem, IEnumerable<T> items)
    {
        this.GroupItem = groupItem;
        this.Items = new List<T>(items);
    }
    public override bool Equals(object obj)
    {
        Group<S, T> other = obj as Group<S, T>;
        return (other != null) && (GroupItem.Equals(other.GroupItem));
    }
    public override int GetHashCode()
    {
        return GroupItem.GetHashCode();
    }
    public S GroupItem { get; set; }
    public IList<T> Items { get; set; }
    public IEnumerator<T> GetEnumerator()
    {
        return Items.GetEnumerator();
    }
    System.Collections.IEnumerator System.Collections.IEnumerable.GetEnumerator()
    {
        return Items.GetEnumerator();
    }
}
public class mydata
{
    public string Name { get; set; }
    public string Content { get; set; }
}

運行效果：