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

[源码下载]

[align=center]重新想象 Windows 8 Store Apps (11) - 控件之 ListView 和 GridView[/align]

作者：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 > 0)
lblMsg.Text = "此次操作被选中的 employee 的 name 为：" + (e.AddedItems[0] 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 > 0)
lblMsg.Text = "此次操作被选中的 employee 的 name 为：" + (e.AddedItems[0] as Employee).Name;
else
lblMsg.Text = "此次操作没有被选中的 employee";
}
}
}

OK
[源码下载]