首页 > 代码库 > windows phone 8.1 listbox 分组显示

windows phone 8.1 listbox 分组显示

2024-07-31 10:21:18   220人阅读

初次了解list分组的朋友可以先看看，如下链接！
http://www.cnblogs.com/linzheng/archive/2014/09/28/3999217.html

链接的内容 只是介绍了基本雏形，我下面把我个人的一些修改加了进去，
希望能对大家有所帮助！ 如果发现我哪有不足，请提出，相互交流才可以更好的进步

.xaml  代码

  1. <!--分组 缩略list 背景颜色-->
  2.     <Page.Resources>
  3.         <prim:JumpListItemBackgroundConverter x:Key="BackgroundConverter"  Enabled="#FF0086D0" Disabled="{ThemeResource ContentDialogDimmingThemeBrush}"/>
  4.         <prim:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
  5.     </Page.Resources>

  7.     <Grid>
  8.         <Grid.Resources>
  9.             <!--创建数据源对象，注意ItemContent属性就是数据源中真正的基础数据的列表的属性，必须设置该属性的值数据源才能定位到实际绑定的数据实体对象-->
  10.             <CollectionViewSource x:Name="itemcollectSource" IsSourceGrouped="true" ItemsPath="InternalList" />
  11.         </Grid.Resources>
  12.         <SemanticZoom x:Name="semanticZoom">
  13.             <SemanticZoom.ZoomedInView>
  14.                 <!-- 在这里放置GridView(或ListView)以表示放大视图 -->
  15.                 <ListView x:Name="inView">
  16.                     <ListView.GroupStyle>
  17.                         <GroupStyle HidesIfEmpty="True">
  18.                             <!--用于显示列表头的数据项的模板-->
  19.                             <GroupStyle.HeaderTemplate >
  20.                                 <DataTemplate>
  21.                                     <Border Background="#FF0086D0" Height="50" Width="50">

  23.                                         <TextBlock Text="{Binding Key}" FontSize="37.333" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
  24.                                     </Border>
  25.                                 </DataTemplate>
  26.                             </GroupStyle.HeaderTemplate>
  27.                         </GroupStyle>
  28.                     </ListView.GroupStyle>
  29.                     <!--用于显示列表的数据项的模板-->
  30.                     <ListView.ItemTemplate>
  31.                         <DataTemplate>
  32.                             <StackPanel>
  33.                                 <TextBlock Text="{Binding Title}" Height="40" FontSize="30"></TextBlock>
  34.                             </StackPanel>
  35.                         </DataTemplate>
  36.                     </ListView.ItemTemplate>
  37.                 </ListView>
  38.             </SemanticZoom.ZoomedInView>
  39.             <SemanticZoom.ZoomedOutView>
  40.                 <!-- 在这里放置GridView(或ListView)以表示缩小视图 -->
  41.                 <GridView x:Name="outView" Background="#7F000000" Margin="0,10,0,0">
  42.                     <!--用于显示弹出的分组列表视图的数据项的模板-->
  43.                     <GridView.ItemTemplate>
  44.                         <DataTemplate>
  45.                             <Grid Width="90" Height="90">
  46.                                 <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Margin="0,10,10,0" >
  47.                                     <TextBlock Text="{Binding Group.Key}" FontSize="37.333" HorizontalAlignment="Left" VerticalAlignment="Bottom"
  48.                                                Foreground="{Binding Converter={StaticResource ForegroundConverter}}"/>
  49.                                 </Border>
  50.                             </Grid>
  51.                         </DataTemplate>
  52.                     </GridView.ItemTemplate>
  53.                 </GridView>
  54.             </SemanticZoom.ZoomedOutView>
  55.         </SemanticZoom>
  56.     </Grid>
复制代码

,cs 代码


  2. public void fun()
  3.         {
  4.             this.InitializeComponent();
  5.             // 先创建一个普通的数据集合
  6.             List<Item> mainItem = new List<Item>();
  7.             for (int i = 0; i < 10; i++)
  8.             {
  9.                 mainItem.Add(new Item { Content = "A", Title = "Test A" + i });
  10.                 mainItem.Add(new Item { Content = "B", Title = "Test B" + i });
  11.                 mainItem.Add(new Item { Content = "C", Title = "Test C" + i });

  13.                 mainItem.Add(new Item { Content = "D", Title = "Test A" + i });
  14.                 mainItem.Add(new Item { Content = "F", Title = "Test B" + i });
  15.                 mainItem.Add(new Item { Content = "G", Title = "Test C" + i });

  17.                 mainItem.Add(new Item { Content = "C", Title = "Test C" + i });
  18.                 mainItem.Add(new Item { Content = "C", Title = "Test C" + i });
  19.                 mainItem.Add(new Item { Content = "C", Title = "Test C" + i });

  21.                 mainItem.Add(new Item { Content = "H", Title = "Test A" + i });
  22.                 mainItem.Add(new Item { Content = "I", Title = "Test B" + i });
  23.                 mainItem.Add(new Item { Content = "M", Title = "Test C" + i });

  25.                 mainItem.Add(new Item { Content = "N", Title = "Test A" + i });
  26.                 mainItem.Add(new Item { Content = "O", Title = "Test B" + i });
  27.                 mainItem.Add(new Item { Content = "P", Title = "Test C" + i });

  29.                 mainItem.Add(new Item { Content = "Q", Title = "Test A" + i });
  30.                 mainItem.Add(new Item { Content = "R", Title = "Test B" + i });
  31.                 mainItem.Add(new Item { Content = "S", Title = "Test C" + i });

  33.                 mainItem.Add(new Item { Content = "T", Title = "Test A" + i });
  34.                 mainItem.Add(new Item { Content = "W", Title = "Test B" + i });
  35.                 mainItem.Add(new Item { Content = "V", Title = "Test C" + i });

  37.                 mainItem.Add(new Item { Content = "U", Title = "Test A" + i });
  38.                 mainItem.Add(new Item { Content = "X", Title = "Test B" + i });
  39.                 mainItem.Add(new Item { Content = "Y", Title = "Test C" + i });
  40.                 mainItem.Add(new Item { Content = "Z", Title = "Test C" + i });
  41.             }
  42.             // 使用LINQ语法把普通的数据集合转换成分组的数据集合
  43.             //List<ItemInGroup> Items = (from item in mainItem group item by item.Content into newItems select new ItemInGroup { Key = newItems.Key, ItemContent = newItems.ToList() }).ToList();

  45.             List<AlphaKeyGroup<Item>> Items = AlphaKeyGroup<Item>.CreateGroups(
  46.                                                                                         mainItem,
  47.                                                                                         (Item s) => { return s.Title; },
  48.                                                                                         true);

  50.             // 设置CollectionViewSource对象的数据源
  51.             this.itemcollectSource.Source = Items;
  52.             // 分别对两个视图进行绑定
  53.             outView.ItemsSource = itemcollectSource.View.CollectionGroups;
  54.             inView.ItemsSource = itemcollectSource.View;
  55.         }
  56.     }
  57.     // 分组的实体类，也就是分组的数据集合最外面的数据项的实体类
  58.     public class ItemInGroup
  59.     {
  60.         // 分组的组头属性
  61.         public string Key { get; set; }
  62.         // 分组的数据集合
  63.         public List<Item> ItemContent { get; set; }
  64.     }
  65.     // 列表的数据实体类
  66.     public class Item
  67.     {
  68.         public string Title { get; set; }
  69.         public string Content { get; set; }
  70.     }
复制代码

windows phone 8.1 listbox 分组显示


联系
我们