初步探討WPF的ListView控件(涉及模板、查找子控件)

     本文結合模板的應用初步介紹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/ 任何轉載必須保留完整文章，在顯要地方顯示署名以及原文鏈接。如您有任何疑問或者授權方面的協商，請發郵件給我 或者 留言。