[UWP] 使用SemanticZoom控件 - 其它

TOP

[UWP] 使用SemanticZoom控件(二)

2017-10-11 16:07:32 【大中小】浏览:8196次

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

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

1  //按拼音分组
2  List<AlphaKeyGroup<Picture>> groupData = AlphaKeyGroup<Picture>.CreateGroups(
3                 picturesList, (Picture s) => s.Title, true);
4 
5  foreach (var item in groupData)
6  {
7      AllPictures.Add(item);
8  }

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

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

View Code

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

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

开始写SemanticZoom

 1 <SemanticZoom >
 2             <SemanticZoom.Style>
 3                 <Style TargetType="SemanticZoom">
 4                     <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
 5                 </Style>
 6             </SemanticZoom.Style>
 7             <!--数据列表-->
 8             <SemanticZoom.ZoomedInView>
 9                 <ListView ItemsSource="{Binding Source={StaticResource CollectionViewSource}}"
10                                   SelectionMode="None" 
11                                   ShowsScrollingPlaceholders="True"
12                                   IsItemClickEnabled="True"
13                                   ItemClick="ListView_ItemClick">
14                     <ListView.ItemTemplate>
15                         <DataTemplate>
16                             <Grid  Padding="0,8"
17                                    BorderThickness="{StaticResource BorderThickness}" 
18                                    BorderBrush="{StaticResource BorderBrush}" >
19                                 <Grid.ColumnDefinitions>
20                                     <ColumnDefinition Width="2*"/>
21                                     <ColumnDefinition Width="3*"/>
22                                     <ColumnDefinition Width="Auto"/>
23                                 </Grid.ColumnDefinitions>
24                                 <Image Grid.Column="0" Stretch="Fill" HorizontalAlignment="Left" >
25                                     <Image.Source>
26                                         <BitmapImage UriSource="{Binding imageUri}"/>
27                                     </Image.Source>
28                                 </Image>
29                                 <Grid Grid.C

首页上一页 1 2 3 4 下一页尾页 2/4/4
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：[UWP] 使用SemanticZoom控件	下一篇：[UWP] 使用SemanticZoom控件