下面介绍一下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。
接下来就是把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>
运行效果如图所示:
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>
这样再运行的时候就可以显示多个控件了:
注释:直接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;
- }
此时再运行,选中某项之后点击按钮便会发现按钮的内容发生了改变:
其中返回的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();
- }
- }
- }