Windows8Metro应用开发入门(二)：MetroApp的几个新控件

基于Silverlight开发Metro App可以使用Silverlight原生的控件&＃xff0c;为了更好的开发Metro App&＃xff0c;控件库又专门增加了几个新的控件&＃xff0c;如&＃xff1a;GridView、Flipview、ProgressRing、SemanticZoom和VariableSizedWrapGrid等&＃xff0c;这些控件为平板设备提供了良好的触控体验&＃xff0c;这一章我们来介绍一下这几个控件的简单用法。

GridView是以网格样式展现一组数据&＃xff0c;在Web开发中就已经存在&＃xff0c;主要用于多行多列的数据显示中。Metro中以分组形式表达数据使用GridView更得心应手&＃xff0c;在Silverlight 5及以前版本中&＃xff0c;如果想实现分组数据展现要先写一堆数据模板&＃xff0c;而在Metro中&＃xff0c;这种展现方式得到了增强&＃xff0c;GridView 是专门用于分组数据的&＃xff0c;如果仅仅是列表数据&＃xff0c;则建议使用ListView。

GridView控件有几个非常重要的常用成员&＃xff1a;

&＃xff08;1&＃xff09; 数据源

如果是以分组形式展示数据&＃xff0c;则数据源必须是可分组的&＃xff0c;也即是有主从关系&＃xff0c;通常是主列表项中每一项可能存在着某一子列表。GridView的数据源依托于CollectionViewSource&＃xff0c;CollectionViewSource有一个属性IsSourceGrouped指明数据源是否是分组源数据集合&＃xff0c;还有一个属性ItemsPath指明查找子数据项的路径&＃xff0c;通常将可分组的源数据指定给CollectionViewSource对象的Source属性&＃xff0c;如下定义了年级与学生的主从关系&＃xff0c;年级包含了学生的数据列表&＃xff1a;

public class Grade{public Grade(){Students &＃61; new ObservableCollection();}public string Name { get; set; }public ObservableCollection Students { get; private set; }}public class Student{public string Name { get; set; }public DateTime Birthday { get; set; }public bool IsClassLeader { get; set; }public string Grade { get; set; }}

以下代码来模拟生成三个年级的学生&＃xff1a;

private List CreateGrades(){List Grades &＃61; new List();for (int i &＃61; 1; i <&＃61; 3; i&＃43;&＃43;){Grade grade &＃61; new Grade();grade.Name &＃61; "年级 " &＃43; i;for (int j &＃61; 1; j <&＃61; 5; j&＃43;&＃43;){grade.Students.Add(new Student(){Name &＃61; "王学生 " &＃43; j,IsClassLeader &＃61; true,Birthday &＃61; startDate.AddDays(j &＃43; 1),Grade &＃61; grade.Name});}Grades.Add(grade);}//MyGrades.Source &＃61; Grades;return Grades;}

那么&＃xff0c;对于这个方法生成的数据源即是可分组的。对于CollectionViewSource&＃xff0c;既可以使用静态资源的形式绑定到视图&＃xff0c;也可以以后台代码的形式绑定。

&＃xff08;2&＃xff09;使用GridView展示数据源

a)、项样式

如果要展示个性化的数据视图&＃xff0c;需要自定义DataTemplate来规划每组下的每个数据项的布局&＃xff0c;如下是对每个学生信息的展示布局&＃xff1a;

b)、组样式

也可以对每个分组的展示布局及样式自定义&＃xff0c;通过GroupStyle进行设定&＃xff0c;如下是对每个年级分组的样式定义&＃xff1a;

HidesIfEmpty属性指定当子项为空时是否隐藏组。

HeaderTemplate 定义组头样式。

效果图&＃xff1a;

c)、选定项事件

当选定项改变时触发事件SelectionChanged&＃xff0c;与Listview、DropDownlist等控件的效果差不多&＃xff0c;在事件处理程序中可以做相应处理&＃xff0c;如下&＃xff1a;

以下是完整的示例代码&＃xff1a;

XAML&＃xff1a;

View Code

C# 绑定数据&＃xff1a;

private List CreateGrades(){List Grades &＃61; new List();for (int i &＃61; 1; i <&＃61; 3; i&＃43;&＃43;){Grade grade &＃61; new Grade();grade.Name &＃61; "年级 " &＃43; i;for (int j &＃61; 1; j <&＃61; 5; j&＃43;&＃43;){grade.Students.Add(new Student(){Name &＃61; "王学生 " &＃43; j,IsClassLeader &＃61; true,Birthday &＃61; startDate.AddDays(j &＃43; 1),Grade &＃61; grade.Name});}Grades.Add(grade);}MyGrades.Source &＃61; Grades;return Grades;}

在基于横向排列分组时建议使用GridView&＃xff0c;在基于纵向排列分组时建议使用ListView&＃xff0c;关于ListView的使用请参考相关文档&＃xff0c;这里不再介绍。下面给一个ListView的分组效果图&＃xff1a;

Flipview允许基于“上一页”“下一页”的方式浏览一系列视图&＃xff0c;视图可以是图片&＃xff0c;也可以是其他的自定义布局。现在很多网站上都有对图片的类似浏览方式&＃xff0c;如网易的图片新闻&＃xff0c;上一页的导航在整个视图的左侧&＃xff0c;下一页的导航在右侧&＃xff0c;这种导航非常适合在触摸设备中使用。如下&＃xff1a;

Flipview控件来源于ItemsControl&＃xff0c;它的使用比较简单&＃xff0c;类似于一个容器&＃xff0c;只需要往里塞视图即可&＃xff0c;至于如何处理上下页的翻转&＃xff0c;内部都已经完全实现好了&＃xff0c;不仅可以往里面旋转图片&＃xff0c;还可以放置其他的视图。如下&＃xff1a;

Image可以与Grid共存。Flipview同样有SelectionChanged事件&＃xff0c;在事件处理程序中可以获取导航到当前的视图项。

在Windows 8 中有一个新的进度条&＃xff0c;就是几个点围绕一个圆旋转&＃xff08;当用户登录到Windows8系统时可以看到&＃xff09;。Metro应用程序也提供了这一效果的控件。如下&＃xff1a;

它的使用非常的简单&＃xff1a;

它有一个很重要的属性IsActive来控制它的活动与休眠。

SemanticZoom控件提供了同一个数据源两种视图的展现形式&＃xff0c;这是一个很有意思的控件&＃xff0c;也可以说一个是近景视图ZoomedInView一个是远景视图ZoomedOutView&＃xff0c;我们暂且称它人近景、远景吧。在近景视图中可以浏览每个项的详细信息&＃xff0c;远景视图类似预览图&＃xff0c;一般是浏览项的简略数据&＃xff0c;如下分别是视图ZoomedInView和视图ZoomedOutView&＃xff1a;

注意看视图ZoomedInView的右下角有个红圈围起来的一个“一”字按钮&＃xff0c;点它可以切换到远景视图&＃xff0c;当点击远景视图中的一个项时又切换回近景视图。这通常在快速预览数据列表时很有用&＃xff0c;可以向用户隐藏一些不必要的数据。

SemanticZoom有两个非常重要的属性ZoomedInView和ZoomedOutView&＃xff0c;当向这两个视图提供布局时该控件才可进行近远景视图的切换。如下&＃xff1a;

bool CanChangeViews 指明是否可以进行视图切换

bool IsZoomedInViewActive 指明近景视图ZoomedInView是否为活动视图

在视图切换时会触发两个事件&＃xff1a;ViewChangeStarted和ViewChangeCompleted。

代码&＃xff1a;

public class SemanticItem{public string Name { get; set; }public DateTime DueDate { get; set; }public bool Complete { get; set; }}private void InitDataSource(){List ds &＃61; new List();for (int i &＃61; 0; i <20; i&＃43;&＃43;){ds.Add(new SemanticItem() { Name &＃61; "S " &＃43; i, DueDate &＃61; DateTime.Now, Complete &＃61; true });}this.gv1.ItemsSource &＃61; this.gv2.ItemsSource &＃61; ds;}

如果你想向用户提供两个非常修改化的视图&＃xff0c;当然可以发挥你的丰富想象力来实现布局。

在Silverlight/WPF有一个扩展控件WrapPanel&＃xff0c;它是根据自身的宽高和子元素的宽高对子元素进行“换行”排列&＃xff0c;当指定子元素横排列优先时&＃xff0c;如果横向布局不足容纳全部子元素&＃xff0c;则会自动从下一行开始排列&＃xff0c;纵向排列优先时类似。Metro应用提供了一个类似的控件VariableSizedWrapGrid&＃xff0c;它比WrapPanel有更多的控制&＃xff0c;比如&＃xff0c;它可以指定子元素的宽和高&＃xff0c;还可以指定当前用于布局子元素的行和列数&＃xff0c;并且它还能指定某个子元素占用几行或几列&＃xff0c;非常强大&＃xff01;如下图&＃xff1a;

XAML&＃xff1a;

VariableSizedWrapGrid有几个非常重要的属性&＃xff1a;

double ItemHeight 设置每个子项的高

double ItemWidth 设置每个子项的宽

Orientation Orientation 子元素的排列方向

int MaximumRowsOrColumns获取或设置影响换行点同时说明 Orientation 的值。

DependencyProperty RowSpanProperty 子元素占据的行数&＃xff0c;如上图中的白色块。

DependencyProperty ColumnSpanProperty 子元素占据的列数&＃xff0c;如上图中的绿色块。

这一章简单介绍了5个控件的常用方法&＃xff0c;其实有过Silverlight/WPF经验的都很容易理解&＃xff0c;也参考MSDN的相关文档。