zoukankan      html  css  js  c++  java
  • 快速构建Windows 8风格应用5ListView数据控件

    本篇博文主要介绍什么是ListView数据控件、如何构建ListView数据控件。

    什么是ListView数据控件?

    1)  ListView数据控件用来显示数据集合。

    2)  继承自ItemsControl。

    3)  大多数情况是纵向显示数据,显示的数据通常是排序过的。

    4)  在切换到Snap View(贴靠视图)时,通常使用ListView显示数据集合。

    如何构建ListView数据控件?

    首先我们需要了解一下ListView控件中一些重要属性和事件:

    1)  IsItemClickEnabled属性:获取或设置点击列表项是否会触发Click事件;

    2)  SelectionMode属性:获取或设置选择的模式;

    3)  HeaderTemplate属性:获取或设置列表标题的模版,改变标题的外观;

    4)  GroupStyle属性:获取GroupStyle对象集合,定义每组的外观;

    5)  SelectionChanged事件:当选择的项改变时触发;

    6)  ItemClick事件:当点击列表项,并且IsItemClickEnabled属性值为true时,将触发该事件;

    另外我们在使用ListView进行数据呈现的时候,需要考虑ListView控件的交互模式:

    ListView的SelectionMode属性为枚举类型,其中包含值有:

    1)  None:没有已选择项;

    2)  Single:只有一项可选择;

    3)  Multiple:有多项可选择;

    4)  Extended:有多项可选择并且选择项可以不连续;

    下面我们来看一下几种常用ListView呈现数据的样式效果:

    效果一:静态列表。

    那么我们如何在应用程序中实现这种ListView样式呢?

    XAML代码中:

    可以看到ListView控件中ItemTemplate引用了名字为StoreFrontTitleTemplate的静态资源,并且设置SelectionMode值为None。StoreFrontTitleTemplate的静态资源代码如下:

    C#代码中将数据绑定到ListView控件上,代码如下: 

    效果二:点击左侧列表某一项,右侧显示详细信息。

    这种效果是点击左边列表中某一项,右边显示该项的详细信息,那么我们如何在代码中实现这种样式效果呢?

    首先我们来看左侧列表实现ListView的XAML代码:

    其中设置ListView控件的ItemTemplate为名称为MessageListImageTemplate的静态资源,ItemPanel为名称为MessageListItemsPanelTemplate的静态资源。

    MessageListImageTemplate静态资源XAML代码如下: 

    MessageListItemsPanelTemplate静态资源XAML代码如下: 

    我们了解了如何实现ListView的XAML后,下面来看一下效果图中右侧XAML代码是如何实现的。 

    其实效果图中右侧定义了一个ScrollViewer控件,它的DataContext属性值设置为ListView的SelectedItem属性。

    最后我们在C#代码中将数据绑定到ListView控件上:

    效果三:左侧列表只能进行单选,右侧列表可以进行多项选择。

    这里我们想实现列表中项能够进行单选或者多选,只需要设置ListView的SelectionMode属性值为Single;Multiple或Extended。

    我们可以设置ListView列表中的Header,XAML代码如下:

    实现效果:红色框体内是我们设定的ListView控件Hearder。

    当然我们也可以将数据在ListView控件进行分组呈现。XAML代码设置如下:

    实现效果:红色框体内是我们设定的ListView控件分组。

  • 相关阅读:
    做代码的曲线问题
    全书目录
    关于《Delphi源代码分析》的讨论
    说说“从编程到工程”专栏的由来
    CF285E Positions in Permutations
    CF264B Good Sequences
    CF115E Linear Kingdom Races
    CF633F The Chocolate Spree
    CF767C Garland
    CF559C Gerald and Giant Ches
  • 原文地址:https://www.cnblogs.com/wzk89/p/2685117.html
Copyright © 2011-2022 走看看