ListView的使用和数据绑定

下面介绍一下ListView的相关使用，新建一个叫做TestList的项目。

在主页面的后台代码中加入一堆数据：

[csharp] view plaincopy

protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (e.NavigationMode == NavigationMode.New)
{
List<string>myList = new List<string>;
myList.Add("Why Test 1");
myList.Add("Why Test 2");
myList.Add("Why Test 3");
myList.Add("Why Test 4");
}
}

然后在xaml页面拖拽一个Listview到页面上，并且命名为list1。

接下来就是把ListView的数据源绑定到后台定义的集合中。

只需要设置ListView的ItemsSource即可。完整的代码如下：

[csharp] view plaincopy

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍
namespace TestList
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。Parameter
/// 属性通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (e.NavigationMode == NavigationMode.New)
{
List<string>myList = new List<string>();
myList.Add("Why Test 1");
myList.Add("Why Test 2");
myList.Add("Why Test 3");
myList.Add("Why Test 4");
list1.ItemsSource = myList;
}
}
}
}

对应的xaml的完整代码如下：

[html] view plaincopy

<Page
x:Class="TestList.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestList"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ListView x:Name="list1" HorizontalAlignment="Center" Height="600" VerticalAlignment="Center" Width="500"/>
</Grid>
</Page>

运行效果如图所示：

ItemsSource为界面上显示的数据集合。

但是这样简单的显示一般很难满足需求，我们需要自定义复杂的ListView才行。

在xaml中如下修改：

[html] view plaincopy

<Page
x:Class="TestList.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestList"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ListView x:Name="list1" HorizontalAlignment="Center" Height="600" VerticalAlignment="Center" Width="500">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding}"/>
<Button Content="{Binding}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Page>

这样再运行的时候就可以显示多个控件了：

注释：直接Text="{Binding}"就是说数值直接等于上下文。

接下来看看ListView的其他用法。

1.选定模式：SelectionMode

SelectionMode="None"：列表中的各项无法被选择

SelectionMode="Single"：只能单项被选择

SelectionMode="Multiple"：可以多选模式

那么如何获得选中的对象呢？

拖一个按钮来做实验：

[html] view plaincopy

<Page
x:Class="TestList.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TestList"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ListView x:Name="list1" SelectionMode="Multiple"
HorizontalAlignment="Center" Height="150" VerticalAlignment="Center" Width="500">
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBox Text="{Binding}"/>
<Button Content="{Binding}"/>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
<Button Content="获得选中的对象" HorizontalAlignment="Center" Margin="0,200,0,0" VerticalAlignment="Center"/>
</Grid>
</Page>

双击按钮添加监听：

[csharp] view plaincopy

private void Button_Click_1(object sender, RoutedEventArgs e)
{
//选中的单个项目：list1.SelectedItem
//选中的多个项目：list1.SelectedItems
Button button = (Button)sender;
button.Content = list1.SelectedItem;
}

此时再运行，选中某项之后点击按钮便会发现按钮的内容发生了改变：

其中返回的SelectedItem为选中项的数据上下文。

2.选中事件：ItemClick

在使用这个事件之前需要启用ItemClick，开启方式： IsItemClickEnabled="True"。

接下来在控件的属性窗口可以找到有一个事件（小闪电图标），将其命名：Item_Click，按下回车。

自动跳转到了后台的代码页面，并且创建了相应的相应方法：

[csharp] view plaincopy

private void Item_Click(object sender, ItemClickEventArgs e)
{
}

e.ClickedItem为点击的选项。

可以用下面的代码来做一段测试：

[csharp] view plaincopy

private void Item_Click(object sender, ItemClickEventArgs e)
{
MessageDialog msg = new MessageDialog(e.ClickedItem.ToString());
msg.ShowAsync();
}

此时再点击就会出现选中的对应的数据了。

那么如何做到动态加载数据呢？比如从网上加载信息，加载多少显示多少是怎么实现的呢？

实现INotifyCollectionChanged接口即可。

当然win8中有自带的集合类：ObservableCollection，实现了INotifyCollectionChanged接口，其他操作基本和List一样。

使用的方法很简单，将原来的代码稍作修改即可：

[csharp] view plaincopy

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Popups;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
// “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍
namespace TestList
{
/// <summary>
/// 可用于自身或导航至 Frame 内部的空白页。
/// </summary>
public sealed partial class MainPage : Page
{
ObservableCollection<string> myList = new ObservableCollection<string>();
public MainPage()
{
this.InitializeComponent();
}
/// <summary>
/// 在此页将要在 Frame 中显示时进行调用。
/// </summary>
/// <param name="e">描述如何访问此页的事件数据。Parameter
/// 属性通常用于配置页。</param>
protected override void OnNavigatedTo(NavigationEventArgs e)
{
if (e.NavigationMode == NavigationMode.New)
{
myList.Add("Why Test 1");
myList.Add("Why Test 2");
myList.Add("Why Test 3");
myList.Add("Why Test 4");
list1.ItemsSource = myList;
}
}
private void Button_Click_1(object sender, RoutedEventArgs e)
{
//选中的单个项目：list1.SelectedItem
//选中的多个项目：list1.SelectedItems
myList.Add(DateTime.Now.ToString());
}
private void Item_Click(object sender, ItemClickEventArgs e)
{
MessageDialog msg = new MessageDialog(e.ClickedItem.ToString());
msg.ShowAsync();
}
}
}

ListView的使用和数据绑定相关推荐

【转】 ASP.NET 3.5中使用新的ListView控件
ASP.NET中新的ListView控件为显示和CURD数据库操作提供了基于模板的布局,使之成为一项极好的方式,建立以数据为中心的Web应用程序. 当你编写以用户为中心的应用程序时,总需要某种形式的数 ...
在ASP.NET 3.5中使用新的ListView控件(3)
在清单1中,SqlDataSource通过设置ConnectionString 和SelectCommand 属性控制从AdventureWorks数据库的Product表中检索数据,Connecti ...
WebForms VS. MVC（翻译）
(本文翻译自CodeProject上阿三写的一篇文章,原文地址:http://www.codeproject.com/Articles/528117/WebForms-vs-MVC,讲了有关ASP.A ...
给GridView编辑列按钮添加客户端提示信息
看到题目是不是觉得有点老掉牙啊?这个好像是在asp.net 1.1时代就有人开始研究的东西,怎么现在还在拿出来说啊?是有点老套,写在这里纯粹只是为了做个笔记,为以后提供点方便. 在使用GridView ...
智能厨房重构-使用Bmob后端云实现朋友圈的功能
上一篇智能厨房重构-使用Bmob后端云实现用户注册登录的功能,初步介绍了Bmob的一些简单用法,现在我们来介绍一下稍微高级的东西,实现朋友圈的功能.上一篇我们已经实现了用户注册的功能,现在我们就要让这 ...
.NET-3.Xamarin2.学习与总结
Xamarin2 前言组件 1.ScrollView 2.ListView控件一.数据绑定 1.基本绑定 2.绑定模式二.Xamarin.Forms 触发器三.MessagingCenter( ...
Windows Phone 7 不温不火学习之《ListBox 数据与Android ListView 数据绑定》
Windows Phone 7 可以把它看成是Android 的 ListView ,WP7 只是预先在XAML里面为它的数据模板规定了格式,而Android 可以通过后期引入数据的方式为其添加数据模 ...
数据绑定控件之ListView
一.绑定控件之ListView 在往下进行前我们下来讨论下Asp.net的特性,对于Asp.net微软为我们封装了众多的控件,将控件拖拽到页面上就可以使用控件进行编程,而且值得称道的是有些封装良好的控 ...
『原创』.Net CF下ListView的数据绑定
首先,需要说明的是,在网络上已经有很多关于ListView数据绑定的文章了,但是,大部分是针对Winform的,那么对于很多新手来说可能对从Winform移植代码到.net cf平台会感觉很难,因为很 ...

ListView的使用和数据绑定

ListView的使用和数据绑定相关推荐

最新文章

热门文章