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; }
}
运行效果:
源代码下载连接: