本文結合模板的應用初步介紹ListView的應用
一、Xaml中如何建立數據資源
大部分數據都會來自於后台代碼,如何Xaml同樣的建立數據源呢?比如建立一個學生List:
首先引入命名空間: xmlns:c="clr-namespace:System.Collections;assembly=mscorlib"
然后代碼如下:
<c:ArrayList x:Key="stuList">
<local:Student Id="1" Name="小明" Grade="研一" Professional="計算機技術" HasJob="true"></local:Student>
<local:Student Id="2" Name="小李" Grade="大一" Professional="網絡工程" HasJob="true"></local:Student>
<local:Student Id="3" Name="小張" Grade="研一" Professional="軟件工程" HasJob="False"></local:Student>
<local:Student Id="4" Name="小王" Grade="研一" Professional="自動化控制" HasJob="true"></local:Student>
<local:Student Id="5" Name="大王" Grade="研一" Professional="軟件設計" HasJob="False"></local:Student>
</c:ArrayList>
二、定義數據展示模板
展示數據使用的是ListView的View屬性,MSDN解釋:Gets or sets an object that defines how the data is styled and organized in a ListView control. 說明是可以在里面放一些數據樣式和一些控件模板的。其實這個Control暫時只能是GridView。每一個Student就是一列數據,我們要把學生顯示到列上,所以就用到了GridView的GridViewColumn屬性。關於GridView不在細說,請查閱MSDN。
最終數據是展示在GridViewColumn上面的,那么我們就開始設計我們GridViewColumn的數據模板,代碼如下:
<DataTemplate x:Key="NameDt"> <TextBox x:Name="textboxName" Text="{Binding Name}" GotFocus="textboxName_GotFocus"></TextBox> </DataTemplate> <DataTemplate x:Key="GradeDt"> <TextBox x:Name="textboxGrade" Text="{Binding Grade}"></TextBox> </DataTemplate> <DataTemplate x:Key="ProfessionalDt"> <TextBox x:Name="textboxProfessional" Text="{Binding Professional}"></TextBox> </DataTemplate> <DataTemplate x:Key="HasJobDt"> <CheckBox x:Name="CheckBocHasJob" IsChecked="{Binding HasJob}"></CheckBox> </DataTemplate>
我們為每列數據定義了數據展示模板,當然你也可以自己定義別的,我僅僅是示例下!
三、使用ListView展示數據
有了以上的准備,下面就是通過ListView把數據和數據模板,通過綁定等聯接起來了,需要注意的是,我們第二步定義的模板應用到的是CellTemplate上面,其實就是單元格的數據模板。
代碼如下:
<ListView x:Name="ListViewStudent" ItemsSource="{StaticResource stuList}"> <ListView.View> <GridView> <GridViewColumn Header="ID" DisplayMemberBinding="{Binding Id}"></GridViewColumn> <GridViewColumn Header="姓名" CellTemplate="{StaticResource NameDt}"></GridViewColumn> <GridViewColumn Header="年級" CellTemplate="{StaticResource GradeDt}"></GridViewColumn> <GridViewColumn Header="專業" CellTemplate="{StaticResource ProfessionalDt}"></GridViewColumn> <GridViewColumn Header="已工作" CellTemplate="{StaticResource HasJobDt}"></GridViewColumn> </GridView> </ListView.View> </ListView>
這樣與運行程序,成功實現了綁定,並通過自己自定義的模板顯示了數據,而且數據顯示格式是自定義的,當然你可以不用模板,使用默認的模板,這樣是不能改動數據的。默認的我就不介紹了。
四、ListView之數據操作
數據展示完了,那么數據操作呢?
比如我們有這么一個需求:當點擊CheckBox時候,需要獲取學生的信息,然后進行相關操作等。
我們在CheckBox的Checked事件下面寫如下代碼:
private void CheckBocHasJob_Checked(object sender, RoutedEventArgs e)
{
CheckBox tb = e.OriginalSource as CheckBox;
ContentPresenter cp = tb.TemplatedParent as ContentPresenter;
Student stu = cp.Content as Student;
MessageBox.Show(stu.Name + stu.Grade + stu.Professional);
}
這段代碼不難理解,首先通過 e.OriginalSource獲取是那個控件觸發的事件,通過控件的TemplatedParent屬性,查找到上層的數據展示模板(其實是ListView視覺樹里面的數據呈現模板)。這樣通過Content屬性即可獲得Student的相關信息了。
五、Listview之控件查找
比如有這么一個需求:我想知道我點擊選中checkbox的時候,這個CheckBox的控件名字是什么?
首先分析一下,CheckBox是模板里面的,不在邏輯樹上,肯定要是用VaisualTreeHelper這個類,實現這個功能之前需要借助一個函數,此函數功能是獲取控件邏輯樹或視覺樹上的指定類型控件。如下:
private ChildType FindVisualChild<ChildType>(DependencyObject obj) where ChildType : DependencyObject { for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++) { DependencyObject child = VisualTreeHelper.GetChild(obj,i); if (child!=null&& child is ChildType) { return child as ChildType; } else { ChildType childOfChildren = FindVisualChild<ChildType>(child); if (childOfChildren!=null) { return childOfChildren; } } } return null; }
有了以上這個函數,功能就很好實現了,ListviewItem作為參數傳入,查找CheckBox類型的控件即可:修改Checked事件代碼如下:
private void CheckBocHasJob_Checked(object sender, RoutedEventArgs e) { //訪問業務邏輯數據 CheckBox tb = e.OriginalSource as CheckBox; ContentPresenter cp = tb.TemplatedParent as ContentPresenter; Student stu = cp.Content as Student; MessageBox.Show(stu.Name + stu.Grade + stu.Professional); // this.ListViewStudent.SelectedItem = stu; //訪問界面元素 ListViewItem lvi = this.ListViewStudent.ItemContainerGenerator.ContainerFromItem(stu) as ListViewItem; CheckBox cb = FindVisualChild<CheckBox>(lvi); MessageBox.Show(cb.Height + cb.Name + cb.Width); }
OK,這樣你就可以成功獲取到你想要的任何東西了~~~
全部代碼:
Xaml:

<Window x:Class="ContentDataTemplate.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:c="clr-namespace:System.Collections;assembly=mscorlib" xmlns:local="clr-namespace:ContentDataTemplate" Title="MainWindow" Height="350" Width="525"> <Window.Resources> <c:ArrayList x:Key="stuList"> <local:Student Id="1" Name="小明" Grade="研一" Professional="計算機技術" HasJob="true"></local:Student> <local:Student Id="2" Name="小李" Grade="大一" Professional="網絡工程" HasJob="true"></local:Student> <local:Student Id="3" Name="小張" Grade="研一" Professional="軟件工程" HasJob="False"></local:Student> <local:Student Id="4" Name="小王" Grade="研一" Professional="自動化控制" HasJob="true"></local:Student> <local:Student Id="5" Name="大王" Grade="研一" Professional="軟件設計" HasJob="False"></local:Student> </c:ArrayList> <DataTemplate x:Key="NameDt"> <TextBox x:Name="textboxName" Text="{Binding Name}" GotFocus="textboxName_GotFocus"></TextBox> </DataTemplate> <DataTemplate x:Key="GradeDt"> <TextBox x:Name="textboxGrade" Text="{Binding Grade}"></TextBox> </DataTemplate> <DataTemplate x:Key="ProfessionalDt"> <TextBox x:Name="textboxProfessional" Text="{Binding Professional}"></TextBox> </DataTemplate> <DataTemplate x:Key="HasJobDt"> <CheckBox x:Name="CheckBocHasJob" IsChecked="{Binding HasJob}" Checked="CheckBocHasJob_Checked"></CheckBox> </DataTemplate> </Window.Resources> <Grid Margin="5"> <ListView x:Name="ListViewStudent" ItemsSource="{StaticResource stuList}"> <ListView.View> <GridView> <GridViewColumn Header="ID" DisplayMemberBinding="{Binding Id}"></GridViewColumn> <GridViewColumn Header="姓名" CellTemplate="{StaticResource NameDt}"></GridViewColumn> <GridViewColumn Header="年級" CellTemplate="{StaticResource GradeDt}"></GridViewColumn> <GridViewColumn Header="專業" CellTemplate="{StaticResource ProfessionalDt}"></GridViewColumn> <GridViewColumn Header="已工作" CellTemplate="{StaticResource HasJobDt}"></GridViewColumn> </GridView> </ListView.View> </ListView> </Grid> </Window>
C# CODE:

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace ContentDataTemplate { class Student { public int Id { get; set; } public string Name { get; set; } public string Grade { get; set; } public string Professional { get; set; } public bool HasJob { get; set; } } /// <summary> /// MainWindow.xaml 的交互邏輯 /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); } private void textboxName_GotFocus(object sender, RoutedEventArgs e) { //訪問業務邏輯數據 TextBox tb = e.OriginalSource as TextBox; ContentPresenter cp = tb.TemplatedParent as ContentPresenter; Student stu = cp.Content as Student; MessageBox.Show(stu.Name + stu.Grade + stu.Professional); // this.ListViewStudent.SelectedItem = stu; //訪問界面元素 ListViewItem lvi = this.ListViewStudent.ItemContainerGenerator.ContainerFromItem(stu) as ListViewItem;//獲取ListViewItem CheckBox cb = FindVisualChild<CheckBox>(lvi); MessageBox.Show(cb.Name); } /// <summary> /// 尋找某個控件下的子控件 /// </summary> /// <typeparam name="ChildType"></typeparam> /// <param name="obj"></param> /// <returns></returns> private ChildType FindVisualChild<ChildType>(DependencyObject obj) where ChildType : DependencyObject { for (int i = 0; i < VisualTreeHelper.GetChildrenCount(obj); i++) { DependencyObject child = VisualTreeHelper.GetChild(obj,i); if (child!=null&& child is ChildType) { return child as ChildType; } else { ChildType childOfChildren = FindVisualChild<ChildType>(child); if (childOfChildren!=null) { return childOfChildren; } } } return null; } private void CheckBocHasJob_Checked(object sender, RoutedEventArgs e) { //訪問業務邏輯數據 CheckBox tb = e.OriginalSource as CheckBox; ContentPresenter cp = tb.TemplatedParent as ContentPresenter; Student stu = cp.Content as Student; MessageBox.Show(stu.Name + stu.Grade + stu.Professional); // this.ListViewStudent.SelectedItem = stu; //訪問界面元素 ListViewItem lvi = this.ListViewStudent.ItemContainerGenerator.ContainerFromItem(stu) as ListViewItem; CheckBox cb = FindVisualChild<CheckBox>(lvi); MessageBox.Show(cb.Height + cb.Name + cb.Width); } } }
后面我會繼續深入介紹ListView的使用,包括樣式、分組、排序等,敬請期待。
---------------------------------------------------------------------------------------------------------------------------------------------
作者:GavinDream(GavinJune主頁 博客園) 出處:http://www.cnblogs.com/fuchongjundream/ 任何轉載必須保留完整文章,在顯要地方顯示署名以及原文鏈接。如您有任何疑問或者授權方面的協商,請發郵件給我 或者 留言。