[UWP] 使用SemanticZoom控件

在写一个看新闻软件的时候，用到了SemanticZoom控件，遇到了一些问题，比如如何根据首字母分类，以及放大视图中有数据的和没数据的通过背景色或前景色区分，幸运的是，all solved。

先来个效果图

主要是参考了msdn的一篇博客，地址已经放在参考链接里了。

首先是一个SemanticZoom控件，这个控件有ZoomedInView和ZoomedOutView两种视图。

ZoomedOutView视图就是这个

[UWP] 使用SemanticZoom控件

而ZoomedInView视图就是一个带有列表头的列表的样子，还是上个图好了，我个人不喜欢看一大段的纯文字

[UWP] 使用SemanticZoom控件

首先弄个Model，这里叫Picture

1  public class Picture
2     {
3         public string ImageUri { get; set; }
4         public string Title { get; set; }
5     }

然后再加个ViewModel，叫MainPageViewModel，类里写一个数据集合和加载数据的方法

1  public ObservableCollection<AlphaKeyGroup<Picture>> AllPictures { get; set; }

关于加载数据的方法，很显然，我们要把数据按照Title的首字母分组，按首字母分组说实话我不会，然后我在msdn找到了一个类叫AlphaKeyGroup，这个类可以用来按首字母分组

 1 public class AlphaKeyGroup<T> : List<T>
 2     {
 3         /// <summary>
 4         /// The delegate that is used to get the key information.
 5         /// </summary>
 6         /// <param name="item">An object of type T</param>
 7         /// <returns>The key value to use for this object</returns>
 8         public delegate string GetKeyDelegate(T item);
 9 
10         /// <summary>
11         /// The Key of this group.
12         /// </summary>
13         public string Key { get; private set; }
14 
15         /// <summary>
16         /// Public constructor.
17         /// </summary>
18         /// <param name="key">The key for this group.</param>
19         public AlphaKeyGroup(string key)
20         {
21             Key = key;
22         }
23 
24         /// <summary>
25         /// Create a list of AlphaGroup<T> with keys set by a SortedLocaleGrouping.
26         /// </summary>
27         /// <param name="slg">The </param>
28         /// <returns>Theitems source for a LongListSelector</returns>
29         private static List<AlphaKeyGroup<T>> CreateGroups(SortedLocaleGrouping slg)
30         {
31             List<AlphaKeyGroup<T>> list = new List<AlphaKeyGroup<T>>();
32 
33             foreach (string key in slg.GroupDisplayNames)
34             {
35                 list.Add(new AlphaKeyGroup<T>(key));
36             }
37 
38             return list;
39         }
40 
41         /// <summary>
42         /// Create a list of AlphaGroup<T> with keys set by a SortedLocaleGrouping.
43         /// </summary>
44         /// <param name="items">The items to place in the groups.</param>
45         /// <param name="ci">The CultureInfo to group and sort by.</param>
46         /// <param name="getKey">A delegate to get the key from an item.</param>
47         /// <param name="sort">Will sort the data if true.</param>
48         /// <returns>An items source for a LongListSelector</returns>
49         public static List<AlphaKeyGroup<T>> CreateGroups(IEnumerable<T> items, CultureInfo ci, GetKeyDelegate getKey, bool sort)
50         {
51             SortedLocaleGrouping slg = new SortedLocaleGrouping(ci);
52             List<AlphaKeyGroup<T>> list = CreateGroups(slg);
53 
54             foreach (T item in items)
55             {
56                 int index = 0;
57                 if (slg.SupportsPhonetics)
58                 {
59                     //check if your database has yomi string for item
60                     //if it does not, then do you want to generate Yomi or ask the user for this item.
61                     //index = slg.GetGroupIndex(getKey(Yomiof(item)));
62                 }
63                 else
64                 {
65                     index = slg.GetGroupIndex(getKey(item));
66                 }
67                 if (index >= 0 && index < list.Count)
68                 {
69                     list[index].Add(item);
70                 }
71             }
72 
73             if (sort)
74             {
75                 foreach (AlphaKeyGroup<T> group in list)
76                 {
77                     group.Sort((c0, c1) => { return ci.CompareInfo.Compare(getKey(c0), getKey(c1)); });
78                 }
79             }
80 
81             return list;
82         }
83 
84     }

AlphaKeyGroup