原文:重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView

[源码下载]

重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView

作者:webabcd

介绍
重新想象 Windows 8 Store Apps 之 ListView 和 GridView

  • ListView - 列表控件
  • GridView - 网格控件

示例
1、ListView 的 Demo
ListViewDemo.xaml

<Page
x:Class="XamlDemo.Controls.ListViewDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XamlDemo.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Page.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel Orientation="Vertical">
<TextBlock TextWrapping="Wrap" FontSize="14.667" Text="{Binding Name}" HorizontalAlignment="Left" />
<TextBlock TextWrapping="Wrap" FontSize="14.667" Text="{Binding Age}" HorizontalAlignment="Left"/>
</StackPanel>
</DataTemplate>
<Style x:Key="ItemContainerStyle" TargetType="ListViewItem">
<Setter Property="Width" Value="292" />
<Setter Property="Height" Value="80" />
<Setter Property="Padding" Value="0" />
<!--
即使将 Margin 设置为“0”,也无法去掉 item 之间的 margin
如果想要去掉 item 之间的 margin,请将此 Margin 属性设置为“-4”
-->
<Setter Property="Margin" Value="0" />
<Setter Property="Background" Value="Blue" />
</Style>
</Page.Resources> <Grid Background="Transparent">
<Grid Margin="120 0 0 0"> <TextBlock Name="lblMsg" FontSize="14.667" /> <StackPanel Orientation="Horizontal" VerticalAlignment="Top" Margin="0 30 0 0">
<CheckBox Name="chkIsSwipeEnabled" Content="IsSwipeEnabled" />
<CheckBox Name="chkIsItemClickEnabled" Content="IsItemClickEnabled" Margin="10 0 0 0" />
</StackPanel> <!--后台绑定方式为 ListView 提供数据-->
<ListView x:Name="listView" Width="300" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="0 60 10 10" BorderThickness="1" BorderBrush="Red" Background="LightBlue"
ItemTemplate="{StaticResource ItemTemplate}"
ItemContainerStyle="{StaticResource ItemContainerStyle}"
ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"
SelectionMode="Single"
SelectionChanged="listView_SelectionChanged_1"
IsSwipeEnabled="{Binding IsChecked, ElementName=chkIsSwipeEnabled}"
IsItemClickEnabled="{Binding IsChecked, ElementName=chkIsItemClickEnabled}"
ItemClick="listView_ItemClick_1">
</ListView> <!--
xaml 方式为 ListView 添加内容
<ListView>
<ListView.Items>
<ListViewItem>
...
</ListViewItem>
<ListViewItem>
...
</ListViewItem>
...
</ListView.Items>
</ListView>
-->
</Grid>
</Grid>
</Page>

ListViewDemo.xaml.cs

/*
* ListView - 列表控件
* IsItemClickEnabled - item 是否可被点击
* IsSwipeEnabled - 是否支持 swipe 操作(对于 ListView 来说,左右猛击 item 称之为 swipe)
* SelectionMode - item 的选中模式(Windows.UI.Xaml.Controls.ListViewSelectionMode 枚举)
* None - 不能被选中
* Single - 只能单选
* Multiple - 仅通过鼠标多选
* Extended - 通过鼠标和辅助键多选(ctrl 或 shift)
* SelectedItems - 被选中的 items 集合
* ItemClick - item 被单击时触发的事件
* SelectAll() - 选中全部 items
* ScrollIntoView(object item, ScrollIntoViewAlignment alignment) - 滚动到指定的 item
* ScrollIntoViewAlignment.Default - 与该 item 的最近边缘对齐
* ScrollIntoViewAlignment.Leading - 与该 item 的前边缘对齐
*
*
* 注:
* IsItemClickEnabled == false && IsSwipeEnabled == false 无法响应单击事件,单击则意味着选中,无法 swipe
* IsItemClickEnabled == true && IsSwipeEnabled == false 可以响应单击事件,无法响应选中事件,无法 swipe
* IsItemClickEnabled == false && IsSwipeEnabled == true 无法响应单击事件,单击和 swipe 均意味着选中
* IsItemClickEnabled == true && IsSwipeEnabled == true 可以响应单击事件,swipe 则意味着选中
*
* 关于 SemanticZoom, item的拖动, item的尺寸可变等之后通过 GridView 来介绍
*
* 关于分页加载内容在“数据绑定”一节做介绍
*/ using System.Collections.Generic;
using Windows.UI.Xaml.Controls;
using XamlDemo.Model; namespace XamlDemo.Controls
{
public sealed partial class ListViewDemo : Page
{
public ListViewDemo()
{
this.InitializeComponent(); // 绑定数据
List<Employee> dataSource = TestData.GetEmployees();
listView.ItemsSource = dataSource;
} // 单击行为的事件
private void listView_ItemClick_1(object sender, ItemClickEventArgs e)
{
lblMsg.Text = "被单击的 employee 的 name 为:" + (e.ClickedItem as Employee).Name;
} // 选中行为的事件
private void listView_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count > )
lblMsg.Text = "此次操作被选中的 employee 的 name 为:" + (e.AddedItems[] as Employee).Name;
else
lblMsg.Text = "此次操作没有被选中的 employee";
}
}
}

2、GridView 的 Demo
GridView/Demo.xaml

<Page
x:Class="XamlDemo.Controls.GridView.Demo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:XamlDemo.Controls.GridView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"> <Page.Resources>
<DataTemplate x:Key="ItemTemplate">
<StackPanel Orientation="Vertical">
<TextBlock TextWrapping="Wrap" FontSize="14.667" Text="{Binding Name}" HorizontalAlignment="Left" />
<TextBlock TextWrapping="Wrap" FontSize="14.667" Text="{Binding Age}" HorizontalAlignment="Left"/>
</StackPanel>
</DataTemplate>
<Style x:Key="ItemContainerStyle" TargetType="GridViewItem">
<Setter Property="Width" Value="292" />
<Setter Property="Height" Value="80" />
<!--
即使将 Margin 设置为“0”,也无法去掉 item 之间的 margin
如果想要去掉 item 之间的 margin,请将此 Margin 属性设置为“-4”
-->
<Setter Property="Margin" Value="0" />
<Setter Property="Background" Value="Blue" />
</Style>
<ItemsPanelTemplate x:Key="ItemsPanel">
<!--
注:WrapGrid 继承自 VirtualizingPanel,而 VariableSizedWrapGrid 并未继承 VirtualizingPanel
-->
<WrapGrid MaximumRowsOrColumns="3" Orientation="Vertical" VerticalChildrenAlignment="Top" HorizontalChildrenAlignment="Left" />
</ItemsPanelTemplate>
</Page.Resources> <Grid Background="Transparent">
<StackPanel Margin="120 0 0 0"> <TextBlock Name="lblMsg" FontSize="14.667" /> <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
<CheckBox Name="chkIsSwipeEnabled" Content="IsSwipeEnabled" />
<CheckBox Name="chkIsItemClickEnabled" Content="IsItemClickEnabled" Margin="10 0 0 0" />
</StackPanel> <!--后台绑定方式为 ListView 提供数据-->
<GridView x:Name="gridView" VerticalAlignment="Top" Margin="0 10 10 0" BorderThickness="1" BorderBrush="Red" Background="LightBlue"
ItemTemplate="{StaticResource ItemTemplate}"
ItemContainerStyle="{StaticResource ItemContainerStyle}"
ItemsPanel="{StaticResource ItemsPanel}"
ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.HorizontalScrollBarVisibility="Auto"
SelectionMode="Single"
SelectionChanged="gridView_SelectionChanged_1"
IsSwipeEnabled="{Binding IsChecked, ElementName=chkIsSwipeEnabled}"
IsItemClickEnabled="{Binding IsChecked, ElementName=chkIsItemClickEnabled}"
ItemClick="gridView_ItemClick_1">
</GridView> <!--
xaml 方式为 ListView 添加内容
<GridView>
<GridView.Items>
<GridViewItem>
...
</GridViewItem>
<GridViewItem>
...
</GridViewItem>
...
</GridView.Items>
</GridView>
-->
</StackPanel>
</Grid>
</Page>

GridView/Demo.xaml.cs

/*
* GridView - 网格控件
* IsItemClickEnabled - item 是否可被点击
* IsSwipeEnabled - 是否支持 swipe 操作(对于 GridView 来说,上下猛击 item 称之为 swipe)
* SelectionMode - item 的选中模式(Windows.UI.Xaml.Controls.ListViewSelectionMode 枚举)
* None - 不能被选中
* Single - 只能单选
* Multiple - 仅通过鼠标多选
* Extended - 通过鼠标和辅助键多选(ctrl 或 shift)
* SelectedItems - 被选中的 items 集合
* ItemClick - item 被单击时触发的事件
* SelectAll() - 选中全部 items
* ScrollIntoView(object item, ScrollIntoViewAlignment alignment) - 滚动到指定的 item
* ScrollIntoViewAlignment.Default - 与该 item 的最近边缘对齐
* ScrollIntoViewAlignment.Leading - 与该 item 的前边缘对齐
*
*
* 注:
* IsItemClickEnabled == false && IsSwipeEnabled == false 无法响应单击事件,单击则意味着选中,无法 swipe
* IsItemClickEnabled == true && IsSwipeEnabled == false 可以响应单击事件,无法响应选中事件,无法 swipe
* IsItemClickEnabled == false && IsSwipeEnabled == true 无法响应单击事件,单击和 swipe 均意味着选中
* IsItemClickEnabled == true && IsSwipeEnabled == true 可以响应单击事件,swipe 则意味着选中
*/ using System.Collections.Generic;
using Windows.UI.Xaml.Controls;
using XamlDemo.Model; namespace XamlDemo.Controls.GridView
{
public sealed partial class Demo : Page
{
public Demo()
{
this.InitializeComponent(); // 绑定数据
List<Employee> dataSource = TestData.GetEmployees();
gridView.ItemsSource = dataSource;
} // 单击行为的事件
private void gridView_ItemClick_1(object sender, ItemClickEventArgs e)
{
lblMsg.Text = "被单击的 employee 的 name 为:" + (e.ClickedItem as Employee).Name;
} // 选中行为的事件
private void gridView_SelectionChanged_1(object sender, SelectionChangedEventArgs e)
{
if (e.AddedItems.Count > )
lblMsg.Text = "此次操作被选中的 employee 的 name 为:" + (e.AddedItems[] as Employee).Name;
else
lblMsg.Text = "此次操作没有被选中的 employee";
}
}
}

OK
[源码下载]

重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView的更多相关文章

  1. 重新想象 Windows 8 Store Apps (14) - 控件 UI: RenderTransform, Projection, Clip, UseLayoutRounding

    原文:重新想象 Windows 8 Store Apps (14) - 控件 UI: RenderTransform, Projection, Clip, UseLayoutRounding [源码下 ...

  2. 重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree

    原文:重新想象 Windows 8 Store Apps (17) - 控件基础: Measure, Arrange, GeneralTransform, VisualTree [源码下载] 重新想象 ...

  3. 重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState, VisualStateManager

    原文:重新想象 Windows 8 Store Apps (15) - 控件 UI: 字体继承, Style, ControlTemplate, SystemResource, VisualState ...

  4. 重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试

    原文:重新想象 Windows 8 Store Apps (16) - 控件基础: 依赖属性, 附加属性, 控件的继承关系, 路由事件和命中测试 [源码下载] 重新想象 Windows 8 Store ...

  5. 重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom

    原文:重新想象 Windows 8 Store Apps (13) - 控件之 SemanticZoom [源码下载] 重新想象 Windows 8 Store Apps (13) - 控件之 Sem ...

  6. 重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示

    原文:重新想象 Windows 8 Store Apps (12) - 控件之 GridView 特性: 拖动项, 项尺寸可变, 分组显示 [源码下载] 重新想象 Windows 8 Store Ap ...

  7. 重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom

    原文:重新想象 Windows 8 Store Apps (10) - 控件之 ScrollViewer 特性: Chaining, Rail, Inertia, Snap, Zoom [源码下载] ...

  8. 重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础

    原文:重新想象 Windows 8 Store Apps (9) - 控件之 ScrollViewer 基础 [源码下载] 重新想象 Windows 8 Store Apps (9) - 控件之 Sc ...

  9. 重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGrid, VariableSizedWrapGrid

    原文:重新想象 Windows 8 Store Apps (7) - 控件之布局控件: Canvas, Grid, StackPanel, VirtualizingStackPanel, WrapGr ...

随机推荐

  1. C语言之基本算法35—数组上三角之积 主对角之积 副对角之积

    //数组算法 /* ============================================================= 题目:求四阶矩阵上三角之积.主对角之积,副对角之积: 如 ...

  2. 动态创建按钮的JS

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEA ...

  3. Modular Fibonacci

    http://acm.hust.edu.cn/vjudge/contest/view.action?cid=30506#problem/U fib数列对2^m取模的循环节为3*(2^(m-1)) #i ...

  4. hdu 3832 Earth Hour (最短路变形)

    Earth Hour Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 125536/65536 K (Java/Others) Tota ...

  5. JavaScript 中的事件类型4(读书笔记思维导图)

    Web 浏览器中可能发生的事件有很多类型.如前所述,不同的事件类型具有不同的信息,而“ DOM3级事件”规定了以下几类事件. UI(User Interface,用户界面)事件:当用户与页面上的元素交 ...

  6. sql server数据库保存图片或者其他小文件

    原文:sql server数据库保存图片或者其他小文件 测试用sql server数据库保存图片或者其他小文件. 文件流字段用varbinary类型. static void Main() { App ...

  7. hdu1267(递推)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1267 题意:假定一个字符串由m个H和n个D组成,从左到右扫描该串,如果字符H的累计数总是不小于字符D的 ...

  8. ASP.NET程序发布流程

    1.在要发布的项目上 右键->发布,如下图所示 “目标位置”选择要发布到的本地目录,点击“发布” 2.打开IIS,在右键“网站”,选择“添加网站”,出现如下所示的对话框 在“网站名称”处添加一个 ...

  9. (白书训练计划)UVa 120 Stacks of Flapjacks(构造法)

    题目地址:UVa 120 水题. 从最大的開始移,每次都把大的先翻到最上面,再翻到以下. 代码例如以下: #include <iostream> #include <cstdio&g ...

  10. Struts2第一个工程helloStruts极其基本配置

    前面已经准备好了Struts-2.3.15,现在就可以直接搭建Struts2的工程了.前面http://blog.csdn.net/huangchnegdada/article/details/917 ...