[Win8]Windows8开发笔记(九):ListView的使用和数据绑定

时间:2022-12-28 23:07:29

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

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

 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。

[Win8]Windows8开发笔记(九):ListView的使用和数据绑定


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

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

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的完整代码如下:

<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>

运行效果如图所示:

[Win8]Windows8开发笔记(九):ListView的使用和数据绑定


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

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

在xaml中如下修改:

<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>

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

[Win8]Windows8开发笔记(九):ListView的使用和数据绑定


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


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

1.选定模式:SelectionMode

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

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

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

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

拖一个按钮来做实验:

<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>

双击按钮添加监听:

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

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

[Win8]Windows8开发笔记(九):ListView的使用和数据绑定

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


2.选中事件:ItemClick

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

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

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

        private void Item_Click(object sender, ItemClickEventArgs e)
{

}

e.ClickedItem为点击的选项。

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

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

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


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

实现INotifyCollectionChanged接口即可。

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

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

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();
}
}
}