天天看點

WPF簡單執行個體,ListView資料綁定,CheckBox/Button删除操作

實作功能如下圖,顯示一個list的資料内容,并為每行添加checkbox複選框和單獨按鈕,來實作批量删除和單行删除.

WPF簡單執行個體,ListView資料綁定,CheckBox/Button删除操作

資料源的結構非常簡單,隻有三個屬性,分别是uid,username,password,分别對應使用者id,使用者名,密碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace WPFGridView
{
    public class User
    {
        int uid;

        public int Uid
        {
            get { return uid; }
            set { uid = value; }
        }
        string username;

        public string Username
        {
            get { return username; }
            set { username = value; }
        }
        string password;

        public string Password
        {
            get { return password; }
            set { password = value; }
        }
    }
}
           

maiwindow界面,xaml代碼如下

<Window x:Class="WPFGridView.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="600" d:DesignWidth="800" SizeToContent="WidthAndHeight">
    <Grid Name="grid">
        
        <ListView Height="303" HorizontalAlignment="Left" Name="listView1" VerticalAlignment="Top" Width="778" ItemsSource="{Binding Path=lists}">
            <ListView.View>
                <GridView>
                    <GridViewColumn x:Name="gvc">
                        <GridViewColumn.Header>
                            <CheckBox Click="CheckBox_Click_1">全選</CheckBox>
                        </GridViewColumn.Header>
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <CheckBox Click="CheckBox_Click" Tag="{Binding Path=Uid}"></CheckBox>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="使用者id" DisplayMemberBinding="{Binding Path=Uid}" />
                    <GridViewColumn Header="使用者名" DisplayMemberBinding="{Binding Path=Username}" />
                    <GridViewColumn Header="密  碼" DisplayMemberBinding="{Binding Path=Password}" />
                    <GridViewColumn Header="操作">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Button Content="删除"  Width="75" Height="23" Click="Button_Click" CommandParameter="{Binding Path=Uid}"/>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <Grid Height="252" HorizontalAlignment="Left" Margin="0,309,0,0" Name="grid1" VerticalAlignment="Top" Width="778">
            <Button Content="删除" Height="23" HorizontalAlignment="Left" Margin="6,27,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
        </Grid>
        <Button Content="Button" Height="2" HorizontalAlignment="Left" Margin="29,9,0,0" Name="button2" VerticalAlignment="Top" Width="3" />
    </Grid>
</Window>
           

通過listview來進行綁定,建立自定義模闆"gridview資源"來進行展示.

<Grid Name="grid">
<ListView Height="303" HorizontalAlignment="Left" Name="listView1" VerticalAlignment="Top" Width="778">
<ListView.View>
<GridView>
<GridViewColumn Header="使用者id" DisplayMemberBinding="{Binding Path=Uid}" />
<GridViewColumn Header="使用者名" DisplayMemberBinding="{Binding Path=Username}" />
<GridViewColumn Header="密  碼" DisplayMemberBinding="{Binding Path=Password}" />
</GridView>
</ListView.View>
</ListView>
</Grid>
           

首先

<GridViewColumn Header="使用者id" DisplayMemberBinding="{Binding Path=Uid}" />

<GridViewColumn Header="使用者名" DisplayMemberBinding="{Binding Path=Username}" />

<GridViewColumn Header="密  碼" DisplayMemberBinding="{Binding Path=Password}" />

分别綁定每列資料和列頭名,DisplayMemberBinding屬性指定資料的來源,這裡綁定了"User"類的三個屬性.

然後使用<GridViewColumn.CellTemplate><DataTemplate>來自定義模闆,添加多選框checkbox和每行的删除按鈕.

<GridViewColumn x:Name="gvc">
<GridViewColumn.Header>
<CheckBox Click="CheckBox_Click_1">全選</CheckBox>
</GridViewColumn.Header>
<GridViewColumn.CellTemplate>
<DataTemplate>
<CheckBox Click="CheckBox_Click" Tag="{Binding Path=Uid}"></CheckBox>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
<GridViewColumn Header="操作">
<GridViewColumn.CellTemplate>
<DataTemplate>
<Button Content="删除"  Width="75" Height="23" Click="Button_Click" CommandParameter="{Binding Path=Uid}"/>
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
           

分别為checkbox和button按鈕加上事件,為删除做準備.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
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 WPFGridView
{
    /// <summary>
    /// MainWindow.xaml 的互動邏輯
    /// </summary>
    public partial class MainWindow : Window
    {
        private List<int> selectUid = new List<int>();//儲存多選使用者ID
        private List<int> allUid = new List<int>();//儲存全選使用者ID
        private List<User> list = new List<User>();//使用者清單源資料
        

        public MainWindow()
        {
            InitializeComponent();
            this.DataBinding();
        }


        /// <summary>
        /// 清單資料初始化并綁定
        /// </summary>
        private void DataBinding()
        {
            for (int i = 0; i < 5; i++)
            {
                User user = new User()
                {
                    Uid = i + 1,
                    Username = "username" + i,
                    Password = "password"
                };
                list.Add(user);
            }
            this.listView1.ItemsSource = list;//為ListView綁定資料源
        }

        /// <summary>
        /// 複選框删除使用者
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            this.DeleteUsers(selectUid);
            this.listView1.Items.Refresh();//重新整理資料
        }

        
        
        /// <summary>
        /// 由ChecBox的Click事件來記錄被選中行的
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void CheckBox_Click(object sender, RoutedEventArgs e)
        {
            CheckBox cb = sender as CheckBox;
            int uid = Convert.ToInt32(cb.Tag.ToString()); //擷取該行id
            if (cb.IsChecked == true)
            {
                selectUid.Add(uid);  //如果選中就儲存id
            }
            else
            {
                selectUid.Remove(uid);   //如果選中取消就删除裡面的id
            }
        }

        /// <summary>
        /// 批量删除使用者
        /// </summary>
        private void DeleteUsers(List<int> selectUid)
        {
            if (selectUid.Count > 0) 
            {
                foreach (var uid in selectUid)
                {
                    list.Remove(list[uid - 1]);
                }
            }
        }

        /// <summary>
        /// 按鈕單行删除
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button b = sender as Button;
            int uid = Convert.ToInt32(b.CommandParameter);
            this.DeleteUser(uid);
            this.listView1.Items.Refresh();
        }

        /// <summary>
        /// 删除一個使用者
        /// </summary>
        /// <param name="uid"></param>
        private void DeleteUser(int uid)
        {
            list.Remove(list[uid - 1]);
        }

        /// <summary>
        /// 全選
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void CheckBox_Click_1(object sender, RoutedEventArgs e)
        {
            CheckBox cb = sender as CheckBox;
            if (cb.IsChecked == true)
            {
                
                allUid = list.Select(l => l.Uid).ToList();
            }
            else
            {
                allUid.Clear();
            }
        }
    }
}

           

DataBinding()中,循環建立一個包含五個使用者的集合,通過該集合為ListView綁定資料源,或者使用<ListView>标簽中的ItemsSource="{Binding Path=list}"屬性來達到綁定資料源的效果.

複選框的删除思路和按鈕删除思路及代碼編寫方式相同,(複選框删除借鑒了WPF之DataGrid應用中的方法).

Button是通過CommandParameter屬性,再使用{Binding Path=Uid}"綁定該行使用者ID作為參數傳給事件進行删除處理.

CheckBox同理,則是通過Tag屬性綁定使用者id,每次點選複選框通過判斷選擇狀态IsChecked的值,來把該行使用者id存入到記錄已選擇的使用者id的集合中selectUid,最後調用DeleteUsers方法進行批量删除操作.

在學習使用CheckBox的過程中,還搜尋到另一種方式擷取CheckBox的值:給資料源對象添加一個bool值屬性或其他類型如用int類型 0和1(這點利用了WPF的ListView資料綁定的模式Model:TwoWay,文本框和複選框的屬性預設為TwoWay),然後周遊ListView.Items,通過True/False來判斷該Item的CheckBox是否被選中,再進行相應的處理.不過,此執行個體并未采用該方法進行編碼,因為設想實際項目中從資料庫擷取對應的資料實體,其後需要另外建立一個繼承該實體的ViewModel,并添加判斷CheckBox的自定義屬性如:bool isEnable,再對該ViewModel進行指派.這個過程則多了一個指派過程,消耗了資源.(對于如何使用ViewModel和資料實體Model的認識本人還尚淺,希望各位閱讀此文的朋友指點.)

繼續閱讀