Windows8 Metro应用开发之C#(3)- 数据控件ListView、GridView、FlipView
介绍:
本节主要对Windows 8 中对于Metro应用开发提供的数据控件ListView、GridView、FlipView进行讲解。
ListView数据控件
ListView 控件允许你在一个可自定义的显示项列表显示数据,如果你在项目开发中需要以列表的形式单一的显示你的数据,你可以用ListBox,但是如果你觉得列表的样式单一的展示数据不能满足你的要求,这时你可以使用ListView自定义显示项样式。 下面我们看示例:
1.ListView.xaml
2 x:Class="BlankApplication.Controls.ListView"
3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5 xmlns:local="using:BlankApplication.Controls"
6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8 mc:Ignorable="d"
9 d:DesignHeight="400"
10 d:DesignWidth="500">
11 <UserControl.Resources>
12 <CollectionViewSource
13 x:Name="groupedItemsViewSource"
14
15 IsSourceGrouped="true"
16 ItemsPath="Items"
17 />
18
19 </UserControl.Resources>
20 <Grid Background="#FFAA6C6C" MinWidth="500" MinHeight="500">
21 <ListView x:Name="listview" Background="Black" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" Width="500" Height="500">
22 <!--定义显示项样式-->
23 <ListView.GroupStyle>
24 <GroupStyle>
25 <GroupStyle.HeaderTemplate>
26 <DataTemplate>
27 <StackPanel Orientation="Horizontal">
28 <Image Source="{Binding ImageSrc}" Width="150" Height="150"/>
29 <StackPanel >
30 <TextBlock Text="{Binding Title}" FontSize="20"/>
31 <TextBlock Text="{Binding Author}" />
32 <TextBlock Text="{Binding Datetime}" />
33 </StackPanel>
34 </StackPanel>
35 </DataTemplate>
36 </GroupStyle.HeaderTemplate>
37 </GroupStyle>
38 </ListView.GroupStyle>
39 </ListView>
40
41 </Grid>
42 </UserControl>
2.ListView.xaml.cs
2 using System.Collections.Generic;
3 using System.Collections.ObjectModel;
4 using System.IO;
5 using System.Linq;
6 using BlankApplication.DataModel;
7 using Windows.Foundation;
8 using Windows.Foundation.Collections;
9 using Windows.UI.Xaml;
10 using Windows.UI.Xaml.Controls;
11 using Windows.UI.Xaml.Controls.Primitives;
12 using Windows.UI.Xaml.Data;
13 using Windows.UI.Xaml.Input;
14 using Windows.UI.Xaml.Media;
15 using Windows.UI.Xaml.Navigation;
16
17
18
19 namespace BlankApplication.Controls
20 {
21 public sealed partial class ListView : UserControl
22 {
23 public ListView()
24 {
25 this.InitializeComponent();
26 ///获取数据源
27 groupedItemsViewSource.Source = new ListViewDataSource().ItemGroups;
28 }
29
30 }
31 }
3.ListViewDataSource.cs
2 using System.Collections.Generic;
3 using System.Collections.ObjectModel;
4 using System.Linq;
5 using System.Text;
6 using System.Threading.Tasks;
7
8 namespace BlankApplication.DataModel
9 {
10
11 public sealed class ListViewDataSource
12 {
13 private ObservableCollection<Painting> _itemGroups = new ObservableCollection<Painting>();
14 public ObservableCollection<Painting> ItemGroups { get { return this._itemGroups; } }
15
16
17 public ListViewDataSource()
18 {
19 _itemGroups.Add(
20 new Painting() { Title = "异度空间", Author = "Donli", ImageSrc = "/Assets/atacertaintime_512x512x32.png", Datetime = "2012/03/17 10:50" }
21 );
22 _itemGroups.Add(
23 new Painting() { Title = "异度空间1", Author = "Donli", ImageSrc = "/Assets/franziska_512x512x32.png", Datetime = "2012/03/17 10:50" }
24 );
25 _itemGroups.Add(
26 new Painting() { Title = "异度空间2", Author = "Donli", ImageSrc = "/Assets/lotte_512x512x32.png", Datetime = "2012/03/17 10:50" }
27 );
28 _itemGroups.Add(
29 new Painting() { Title = "异度空间3", Author = "Donli", ImageSrc = "/Assets/reachingnewyork_512x512x32.png", Datetime = "2012/03/17 10:50" }
30 );
31 _itemGroups.Add(
32 new Painting() { Title = "异度空间4", Author = "Donli", ImageSrc = "/Assets/thebluebridge_512x512x32.png", Datetime = "2012/03/17 10:50" }
33 );
34 _itemGroups.Add(
35 new Painting() { Title = "异度空间5", Author = "Donli", ImageSrc = "/Assets/turintales_512x512x32.png", Datetime="2012/03/17 10:50" }
36 );
37 _itemGroups.Add(
38 new Painting() { Title = "异度空间6", Author = "Donli", ImageSrc = "/Assets/kungfupanda_01.png", Datetime = "2012/03/17 10:50" }
39 );
40 _itemGroups.Add(
41 new Painting() { Title = "异度空间7", Author = "Donli", ImageSrc = "/Assets/kungfupanda_02.png", Datetime = "2012/03/17 10:50" }
42 );
43 _itemGroups.Add(
44 new Painting() { Title = "异度空间8", Author = "Donli", ImageSrc = "/Assets/kungfupanda_03.png", Datetime = "2012/03/17 10:50" }
45 );
46 _itemGroups.Add(
47 new Painting() { Title = "异度空间9", Author = "Donli", ImageSrc = "/Assets/kungfupanda_04.png", Datetime = "2012/03/17 10:50" }
48 );
49 }
50
51 }
52 public class Painting
53 {
54 public string Title { get; set; }
55 public string Author { get; set; }
56 public string ImageSrc { get; set; }
57 public string Datetime { get; set; }
58 }
59 }
GridView数据控件
GridView控件描述一个专用的已排序的列表视图。
1.DataView.xaml
2 x:Class="BlankApplication.Controls.GridView"
3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5 xmlns:local="using:BlankApplication.Controls"
6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8 mc:Ignorable="d"
9 d:DesignHeight="300"
10 d:DesignWidth="400">
11 <UserControl.Resources>
12 <CollectionViewSource
13 x:Name="groupedItemsViewSource"
14
15 IsSourceGrouped="true"
16 ItemsPath="Items"
17 />
18
19 </UserControl.Resources>
20 <Grid>
21 <!--定义GridView控件-->
22 <GridView Background="Black" x:Name="gridview" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" Width="500" Height="500" >
23 <GridView.GroupStyle>
24 <GroupStyle>
25 <GroupStyle.HeaderTemplate>
26 <!--定义样式-->
27 <DataTemplate>
28 <StackPanel Orientation="Horizontal">
29 <Image Source="{Binding ImageSrc}" Width="150" Height="150"/>
30 <StackPanel>
31 <TextBlock Text="{Binding Title}" FontSize="20"/>
32 <TextBlock Text="{Binding Author}" />
33 <TextBlock Text="{Binding Datetime}" />
34 </StackPanel>
35 </StackPanel>
36 </DataTemplate>
37 </GroupStyle.HeaderTemplate>
38 </GroupStyle>
39 </GridView.GroupStyle>
40 </GridView>
41 </Grid>
42 </UserControl>
2.GridView.xaml.cs
2 using System.Collections.Generic;
3 using System.IO;
4 using System.Linq;
5 using BlankApplication.DataModel;
6 using Windows.Foundation;
7 using Windows.Foundation.Collections;
8 using Windows.UI.Xaml;
9 using Windows.UI.Xaml.Controls;
10 using Windows.UI.Xaml.Controls.Primitives;
11 using Windows.UI.Xaml.Data;
12 using Windows.UI.Xaml.Input;
13 using Windows.UI.Xaml.Media;
14 using Windows.UI.Xaml.Navigation;
15
16
17 namespace BlankApplication.Controls
18 {
19 public sealed partial class GridView : UserControl
20 {
21 public GridView()
22 {
23 this.InitializeComponent();
24 groupedItemsViewSource.Source = new ListViewDataSource().ItemGroups;
25 }
26 }
27 }
FlipView数据控件
FlipView控件提供一个通过对子元素项进行翻动显示下一个子元素的数据控件。
1.FlipView.xaml
2 x:Class="BlankApplication.Controls.FlipView"
3 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
4 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
5 xmlns:local="using:BlankApplication.Controls"
6 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
7 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
8 mc:Ignorable="d"
9 d:DesignHeight="300"
10 d:DesignWidth="400">
11 <UserControl.Resources>
12 <CollectionViewSource
13 x:Name="groupedItemsViewSource"
14
15 IsSourceGrouped="true"
16 ItemsPath="Items"
17 />
18
19 </UserControl.Resources>
20 <Grid>
21
22 <FlipView Background="Black" ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}" Width="500" Height="500">
23 <FlipView.GroupStyle>
24 <GroupStyle>
25 <GroupStyle.HeaderTemplate>
26 <DataTemplate>
27 <StackPanel Orientation="Horizontal">
28 <Image Source="{Binding ImageSrc}" Width="150" Height="150"/>
29 <StackPanel >
30 <TextBlock Text="{Binding Title}" FontSize="20"/>
31 <TextBlock Text="{Binding Author}" />
32 <TextBlock Text="{Binding Datetime}" />
33 </StackPanel>
34 </StackPanel>
35 </DataTemplate>
36 </GroupStyle.HeaderTemplate>
37 </GroupStyle>
38 </FlipView.GroupStyle>
39 </FlipView>
40
41 </Grid>
42 </UserControl>
2.FlipView.xaml.cs
2 using System.Collections.Generic;
3 using System.IO;
4 using System.Linq;
5 using BlankApplication.DataModel;
6 using Windows.Foundation;
7 using Windows.Foundation.Collections;
8 using Windows.UI.Xaml;
9 using Windows.UI.Xaml.Controls;
10 using Windows.UI.Xaml.Controls.Primitives;
11 using Windows.UI.Xaml.Data;
12 using Windows.UI.Xaml.Input;
13 using Windows.UI.Xaml.Media;
14 using Windows.UI.Xaml.Navigation;
15
16 namespace BlankApplication.Controls
17 {
18 public sealed partial class FlipView : UserControl
19 {
20 public FlipView()
21 {
22 this.InitializeComponent();
23 groupedItemsViewSource.Source = new ListViewDataSource().ItemGroups;
24 }
25 }
26 }
OK.
转载于:https://www.cnblogs.com/lmyhao/archive/2012/03/22/2398140.html
Windows8 Metro应用开发之C#(3)- 数据控件ListView、GridView、FlipView相关推荐
- Windows8 Metro应用开发之C#(1)- 项目模板(Project Templates)
Windows8 Metro应用开发之C#(1)- 项目模板(Project Templates) 新建模板 打开Visual Studio 11,新建项目 -> 展开Visual C# -&g ...
- python日历gui_python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例...
PyQt5日期时间控件QDateTimeEdit介绍 QDateTimeEdit是一个允许用户编辑日期时间的控件,可以使用键盘上的上下键头按钮来增加或减少日期的时间值,QDateTimeEdit通过s ...
- WinForm界面开发之“HTML内容编辑控件”
做过了很多Winform的共享软件,对界面的设计有了一定的经验和积累,准备开一个"WinForm界面开发"系列文章,介绍下相关的Winform界面设计和相关控件的使用,促进相互交流 ...
- Winform开发之ComboBox和ComboBoxEdit控件绑定key/value数据
使用 ComboBox 控件绑定key/value值: 因为 ComboBox 是有 DataSource 属性的,所以它可以直接绑定数据源,如 DataTable.ListItem 等. 使用 Da ...
- (0066)iOS开发之UITableViewCell上子控件通过superView找对应的cell的探究
转载自:http://www.cnblogs.com/XYQ-208910/p/6663677.html 一.简单介绍 UITableViewCell是UITableView的核心部分,我们在开发中因 ...
- 快速构建Windows 8风格应用6-GridView数据控件
原文:快速构建Windows 8风格应用6-GridView数据控件 本篇博文主要介绍什么是GridView数据控件.如何构建常用的GridView数据呈现样式. 什么是GridView数据控件? G ...
- ASP.NET的五大数据控件分析
ASP.NET 数据控件:GridView,DataList,Repeater ,DetailsView,FormView. ASP.NET 数据控件综述: 1.前3个用于呈现多条记录,后面2个用于呈 ...
- 一起谈.NET技术,浅析五大ASP.NET数据控件
ASP.NET数据控件综述: 1. 前3个(GridView 控件,DetailsView 控件,FormView 控件)用于呈现多条记录,后面2个(Repeater 控件,DataList 控件)用 ...
- 前端开发之vue可视化数据图表组件(Chart.js)
前端开发之vue可视化数据图表组件(Chart.js) 前言 制作好的效果图 vue2中使用Chart.js 1.在项目中安装Chart.js 组件 2.vue文件 vue3中使用Chart.js v ...
最新文章
- jmeter http并发测试时报错
- 使用脚本编写 Vim 编辑器,第 4 部分: 字典
- 315道Python常见面试题
- JAVA分代收集机制详解
- python两个集合相减_python集合的运算,两个集合相减是什么意思
- 【Tyvj1783】【codevs2418】【BZOJ1856】字符串,厉害的组合数与模型转换
- java fx 多个窗口_JavaFX Scene Builder(窗口各种设置)
- 从h264码流中获取图像的宽高---版本2(简洁版)
- odbc驱动程序配置失败_如何使用ODBC驱动程序配置链接服务器
- Java三大器之过滤器(Filter)的工作原理和代码演示
- 邀请您加入移动开发专家联盟
- AAAI'22 | 中稿的论文网友找出致命漏洞?
- 字节还有打游戏、听音乐这种神仙工作?
- Scrum:The Definition of Done —— 作业有没有写完呢?
- 数据库常用sql语句总结
- 2022全新【趣盒】iapp源码带后台非常好看
- Linux的PDF工具,Linux 系统中的pdf阅读器以及工具
- 第7节 简单抓包实验及帧结构分析——基于科来网络分析系统
- Linux 如何从网上下载文件
- 4*4矩阵键盘原理分析以及代码展示
热门文章
- python语言程序设计实践教程实验八答案_Python程序设计实验报告: 实验八 文件...
- linux命令大全私房菜,linux命令大全(自己制作,基于鸟书私房菜以及man)-D
- git 公钥提交代码_gitlab上传公钥和项目代码
- Android NDK开发之 NDK类型签名
- wap建站程序源码_角点科技:企业搭建网站选择建站公司需要注意什么?
- Vscode快捷键整理
- java中的事件派发机制_事件派发器模式
- mvc core2.1 Identity.EntityFramework Core 导航状态栏(六)
- 高可用结合gfs2,,实现集群文件系统以及集群逻辑卷。
- Html 中判断某个class的个数