[UWP] 使用SemanticZoom控件

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

先来个效果图

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

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

ZoomedOutView视图就是这个

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

首先弄个Model，这里叫Picture

  public class Picture
     {
         public string ImageUri { get; set; }
         public string Title { get; set; }
     }

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

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

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

 public class AlphaKeyGroup<T> : List<T>
     {
         /// <summary>
         /// The delegate that is used to get the key information.
         /// </summary>
         /// <param name="item">An object of type T</param>
         /// <returns>The key value to use for this object</returns>
         public delegate string GetKeyDelegate(T item);

         /// <summary>
         /// The Key of this group.
         /// </summary>
         public string Key { get; private set; }

         /// <summary>
         /// Public constructor.
         /// </summary>
         /// <param name="key">The key for this group.</param>
         public AlphaKeyGroup(string key)
         {
             Key = key;
         }

         /// <summary>
         /// Create a list of AlphaGroup<T> with keys set by a SortedLocaleGrouping.
         /// </summary>
         /// <param name="slg">The </param>
         /// <returns>Theitems source for a LongListSelector</returns>
         private static List<AlphaKeyGroup<T>> CreateGroups(SortedLocaleGrouping slg)
         {
             List<AlphaKeyGroup<T>> list = new List<AlphaKeyGroup<T>>();

             foreach (string key in slg.GroupDisplayNames)
             {
                 list.Add(new AlphaKeyGroup<T>(key));
             }

             return list;
         }

         /// <summary>
         /// Create a list of AlphaGroup<T> with keys set by a SortedLocaleGrouping.
         /// </summary>
         /// <param name="items">The items to place in the groups.</param>
         /// <param name="ci">The CultureInfo to group and sort by.</param>
         /// <param name="getKey">A delegate to get the key from an item.</param>
         /// <param name="sort">Will sort the data if true.</param>
         /// <returns>An items source for a LongListSelector</returns>
         public static List<AlphaKeyGroup<T>> CreateGroups(IEnumerable<T> items, CultureInfo ci, GetKeyDelegate getKey, bool sort)
         {
             SortedLocaleGrouping slg = new SortedLocaleGrouping(ci);
             List<AlphaKeyGroup<T>> list = CreateGroups(slg);

             foreach (T item in items)
             {
                 int index = ;
                 if (slg.SupportsPhonetics)
                 {
                     //check if your database has yomi string for item
                     //if it does not, then do you want to generate Yomi or ask the user for this item.
                     //index = slg.GetGroupIndex(getKey(Yomiof(item)));
                 }
                 else
                 {
                     index = slg.GetGroupIndex(getKey(item));
                 }
                 if (index >=  && index < list.Count)
                 {
                     list[index].Add(item);
                 }
             }

             if (sort)
             {
                 foreach (AlphaKeyGroup<T> group in list)
                 {
                     group.Sort((c0, c1) => { return ci.CompareInfo.Compare(getKey(c0), getKey(c1)); });
                 }
             }

             return list;
         }

     }

AlphaKeyGroup

使用的时候这样，CreateGroups方法有三个参数，第一个是要分组的数据，第二个参数是分组的方法，第三个参数是是否排序，该方法返回了一个List<AlphaKeyGroup<Picture>>类型的数据，

  //按拼音分组
  List<AlphaKeyGroup<Picture>> groupData = AlphaKeyGroup<Picture>.CreateGroups(
                 picturesList, (Picture s) => s.Title, true);

  foreach (var item in groupData)
  {
      AllPictures.Add(item);
  }

当然首先要在picturesList里加一些示例数据

  picturesList.Add(new Picture { ImageUri = "http://t3.gstatic.com/images?q=tbn:ANd9GcQ_ih-aN2gxUz435mPC733IFDNhk1vqFQSVKshWMHEtzxKfKqbs", Title = "OOO" });
             picturesList.Add(new Picture { ImageUri = "http://4.bp.blogspot.com/-v4cAAv3ViZk/T3w0jsZocUI/AAAAAAAACE0/l21tSjKnSUI/s640/Cool_facebook_timeline_covers+%252814%2529.jpg", Title = "ZZZ" });
             picturesList.Add(new Picture { ImageUri = "http://t3.gstatic.com/images?q=tbn:ANd9GcTv1Kx5oic3I39RTIoAMrFOKQxaIKNtXSNSr5B5bUGsX5mRMMBl_Q", Title = "DDD" });
             picturesList.Add(new Picture { ImageUri = "http://t0.gstatic.com/images?q=tbn:ANd9GcRFzgy_qOhDZ3GAQVxIOi1oTg8VSToo8hX_0cxoD6ZqUW9K-r9p", Title = "BBB" });

然后开始写UI部分，当然要先把Page的DataContext设置到MainPageViewModel的实例，比较简单这里就不写了， 再在Xaml里加上一个CollectionViewSource，用来给SemanticZoom提供数据，ItemsPath填的是集合属性的名字，至于为什么填这个，看看AlphaKeyGroup类的源码就知道了，里面有个List<T>类型的 InternalList，数据就是被存在这里的，IsSourceGrouped意思是要把AllPictures分组

 <CollectionViewSource x:Key="CollectionViewSource" IsSourceGrouped="True"
                                           ItemsPath="InternalList"
                                           Source="{Binding AllPictures}"/>

开始写SemanticZoom

 <SemanticZoom >
             <SemanticZoom.Style>
                 <Style TargetType="SemanticZoom">
                     <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                 </Style>
             </SemanticZoom.Style>
             <!--数据列表-->
             <SemanticZoom.ZoomedInView>
                 <ListView ItemsSource="{Binding Source={StaticResource CollectionViewSource}}"
                                   SelectionMode="None"
                                   ShowsScrollingPlaceholders="True"
                                   IsItemClickEnabled="True"
                                   ItemClick="ListView_ItemClick">
                     <ListView.ItemTemplate>
                         <DataTemplate>
                             <Grid  Padding="0,8"
                                    BorderThickness="{StaticResource BorderThickness}"
                                    BorderBrush="{StaticResource BorderBrush}" >
                                 <Grid.ColumnDefinitions>
                                     <ColumnDefinition Width="2*"/>
                                     <ColumnDefinition Width="3*"/>
                                     <ColumnDefinition Width="Auto"/>
                                 </Grid.ColumnDefinitions>
                                 <Image Grid.Column="0" Stretch="Fill" HorizontalAlignment="Left" >
                                     <Image.Source>
                                         <BitmapImage UriSource="{Binding imageUri}"/>
                                     </Image.Source>
                                 </Image>
                                 <Grid Grid.Column="1" Margin="5,2">
                                     <TextBlock Text="{Binding Title}" VerticalAlignment="Top" TextWrapping="Wrap"/>
                                 </Grid>
                             </Grid>
                         </DataTemplate>
                     </ListView.ItemTemplate>
                     <ListView.ItemContainerStyle>
                         <Style TargetType="ListViewItem">
                             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                             <Setter Property="Margin" Value="0"/>
                         </Style>
                     </ListView.ItemContainerStyle>
                     <!--列表头-->
                     <ListView.GroupStyle>
                         <GroupStyle HidesIfEmpty="True" >
                             <GroupStyle.HeaderTemplate>
                                 <DataTemplate>
                                     <TextBlock Text="{Binding Key}" FontSize="25" Foreground="Red"/>
                                 </DataTemplate>
                             </GroupStyle.HeaderTemplate>
                         </GroupStyle>
                     </ListView.GroupStyle>
                 </ListView>
             </SemanticZoom.ZoomedInView>
             <!--排序列表-->
             <SemanticZoom.ZoomedOutView>
                 <GridView ItemsSource="{Binding Source={StaticResource CollectionViewSource},Path=CollectionGroups}">
                     <GridView.ItemsPanel>
                         <ItemsPanelTemplate>
                             <WrapGrid MaximumRowsOrColumns="4" VerticalAlignment="Top" Orientation="Horizontal"/>
                         </ItemsPanelTemplate>
                     </GridView.ItemsPanel>
                     <GridView.ItemTemplate>
                         <DataTemplate>
                             <Border Background="{Binding Converter={StaticResource BackgroundConverter}}">
                                 <TextBlock Text="{Binding Group.Key}" HorizontalAlignment="Center"
                                                    VerticalAlignment="Center"
                                                    Foreground="{Binding Converter={StaticResource ForegroundConverter}}"/>
                             </Border>
                         </DataTemplate>
                     </GridView.ItemTemplate>

                     <GridView.ItemContainerStyle>
                         <Style TargetType="GridViewItem">
                             <Setter Property="HorizontalAlignment" Value="Center"/>
                             <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                             <Setter Property="VerticalAlignment" Value="Center"/>
                             <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                         </Style>
                     </GridView.ItemContainerStyle>
                     <GridView.Template>
                         <ControlTemplate>
                             <ScrollViewer ScrollViewer.VerticalScrollMode="Enabled">
                                 <Viewbox Stretch="Uniform" Margin="8"  VerticalAlignment="Top"
                                              ScrollViewer.VerticalScrollMode="Enabled" StretchDirection="Both" >
                                     <ItemsPresenter  />
                                 </Viewbox>
                             </ScrollViewer>
                         </ControlTemplate>
                     </GridView.Template>
                 </GridView>
             </SemanticZoom.ZoomedOutView>
         </SemanticZoom>

SemanticZoom

注意到排序列表的GridView.ItemTemplate ,用到了两个Converter，即BackgroundConverter和ForegroundConverter

      <Border Background="{Binding Converter={StaticResource BackgroundConverter}}">
             <TextBlock Text="{Binding Group.Key}" HorizontalAlignment="Center"
                        VerticalAlignment="Center"
                        Foreground="{Binding Converter={StaticResource ForegroundConverter}}"/>
      </Border>

我一直想实现在ZoomedOutView里那种有数据的和没数据的用颜色区分的功能，自己写Converter没写出来，然后发现了这个

这两个Converter是系统自带的，用的时候设置好Enabled和Disabled的颜色，有数据的时候显示Enabled的颜色，没有就显示Disabled的颜色

 <JumpListItemBackgroundConverter x:Key="BackgroundConverter" Enabled="Red"
                                          Disabled="Transparent"/>
 <JumpListItemBackgroundConverter x:Key="ForegroundConverter" Enabled="White" Disabled="Black"/>

附上demo

SemanticZoomDemo

还有一个待解决的问题，在ZoomOutView中如何将无数据的项变成不可点击状态？既然那两个Converter能知道哪个是没数据的，说明一定有办法，Pending……

参考链接

http://blogs.msdn.com/b/msgulfcommunity/archive/2013/06/18/implementing-longlistselector-as-jumplists-in-windows-phone-8-alphabetical-list.aspx