黎东海 发表于 2013-1-4 01:16:47

WP7之LongListSelector控件

<div id="cnblogs_post_body">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; }   
}   
运行效果:
http://images.cnblogs.com/cnblogs_com/jacle169/201207/201207091524259912.pnghttp://images.cnblogs.com/cnblogs_com/jacle169/201207/201207091524266399.png
源代码下载连接:
/Files/jacle169/LongListSelector用法.rar
页: [1]
查看完整版本: WP7之LongListSelector控件