wp8.1 Study7: ListView 和GridView应用
對于列表控件,WP8.1常用的是ListView、GridView、ListBox控件。其中前兩個是從第三個繼承來的。
1、ListView控件
它是展示垂直列表的,如下圖所示。它十分適合展示數(shù)據(jù)。
2、GridView控件
它是行列表展示數(shù)據(jù)的控件,排列圖如下。通常用來展示基于圖片的數(shù)據(jù)。
3、控件的Templates
常用的有HeaderTemplate、FooterTemplate、ItemTemplate。本文最下面有相關代碼。
(其中還有ItemContainerStyle、ItemsPanel
4、屬性:重新排序Reordering
WP8.1中:MyListView.ReorderMode = ListViewReorderMode.Enabled;
Win8.1中:MyListView.CanReorderItems = false;
但Grouped Lists (分組列表)不能重新排序。
5、屬性:多種選定MultiSelection
當開啟MultiSelection后,列表會變?yōu)橄聢D。開啟MultiSelection代碼為:MyListView.SelectionMode =? ListViewSelectionMode.Multiple;
6、運用實例:
xaml代碼:
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0"><ListView Name="view1"SelectionMode="None"AllowDrop="True"CanDragItems="True"IsSwipeEnabled="True"><ListView.HeaderTemplate><DataTemplate><StackPanel><Canvas Height="15" Background="#962381E0"><TextBlock Text="header"><TextBlock.Foreground><LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="Black" Offset="0"/><GradientStop Color="#FFF9F5F5" Offset="1"/></LinearGradientBrush></TextBlock.Foreground></TextBlock></Canvas></StackPanel></DataTemplate></ListView.HeaderTemplate><ListView.ItemTemplate><DataTemplate><StackPanel Orientation="Horizontal"><TextBlock Text="{Binding Id}" Style="{ThemeResource ListViewItemTextBlockStyle}" Width="100"/><TextBlock Text="{Binding Name}" Style="{ThemeResource ListViewItemTextBlockStyle}"/></StackPanel></DataTemplate></ListView.ItemTemplate><ListView.FooterTemplate><DataTemplate><TextBlock Foreground="Red" Text="這是個學習的好例子"/></DataTemplate></ListView.FooterTemplate></ListView></Grid></Grid><Page.BottomAppBar><CommandBar><CommandBar.SecondaryCommands><AppBarButton Label="appbarbutton"/></CommandBar.SecondaryCommands><AppBarButton Name="AllApps" Icon="AllApps" Label="多選" Click="AllApps_Click"/><AppBarButton Name="viewall" Icon="ViewAll" Label="appbarbutton" Click="viewall_Click"/></CommandBar></Page.BottomAppBar>相應的部分C#代碼:
List<School> items = new List<School>();public string[] str=new string[]{"華農(nóng)","華工","中大","華師","暨大","廣工","廣外","廣大","深大","廣中醫(yī)","南醫(yī)大"};Random random = new Random();for (int i = 0; i < 100; i++){items.Add(new School { Id = i, Name = str[random.Next(0,10)] });}this.view1.ItemsSource = items;...private void AllApps_Click(object sender, RoutedEventArgs e){if (view1.SelectionMode == ListViewSelectionMode.Multiple){view1.SelectionMode = ListViewSelectionMode.Single;}elseview1.SelectionMode = ListViewSelectionMode.Multiple;}private void viewall_Click(object sender, RoutedEventArgs e){if ( view1.ReorderMode == ListViewReorderMode.Enabled){view1.ReorderMode = ListViewReorderMode.Disabled;}elseview1.ReorderMode = ListViewReorderMode.Enabled;}private void gotopage2_Click(object sender, RoutedEventArgs e){Frame.Navigate(typeof(Page2));}}?---------------------------------------------------------------------------------------------------------------------------------------------
2015年2月26號添加
一、ListView或GridView控件的GroupStyle
使用GroupStyle屬性可以更好為App展示數(shù)據(jù),效果圖如下:
這種樣式十分容易弄出來,步驟如下:
step1:
1 在Page.Resoures添加 2 <CollectionViewSource x:Name="collectionItems" IsSourceGrouped="True" Source="{Binding Items}" ItemsPath="Codes"/>step2:
添加GroupStyle <ListView Name="listCode" ItemClick="listViewCode_ItemClick" ItemsSource="{Binding Source={StaticResource collectionItems}}" ItemTemplate="{StaticResource StandardTripleLineItemTemplate}"IsItemClickEnabled="True"><ListView.GroupStyle><GroupStyle><GroupStyle.HeaderTemplate><DataTemplate><Grid><Border Opacity="0.8" Width="350" CornerRadius="0,30,30,0" Background="{StaticResource MyFavoriteBrush}"><TextBlock Text="{Binding Title}" FontSize="30" Padding="5"/></Border></Grid></DataTemplate></GroupStyle.HeaderTemplate></GroupStyle></ListView.GroupStyle></ListView>即可
ps:collectionItems綁定的數(shù)據(jù)格式可參考https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh780627.aspx?f=255&MSPPError=-2147217396
還可以使用SemanticZoom控件加強用戶體驗,demo地址:https://msdn.microsoft.com/zh-cn/library/windows/apps/xaml/hh781234
轉(zhuǎn)載于:https://www.cnblogs.com/NEIL-X/p/4149522.html
總結(jié)
以上是生活随笔為你收集整理的wp8.1 Study7: ListView 和GridView应用的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: careercup-树与图 4.9
- 下一篇: 查看imooc服务器文件