C# WPF ListView 操作 item(包括item子集中創建listview屬性)

這段代碼實現的功能

  1. listview的item中添加button
  2. listview的item中添加圖片
  3. 向item中添加其下的listview
  4. 可以對listview進行增刪改操作
  5. 對listview中任意一個item的子集中的listview中的item對象進行增刪改操作

前端代碼

<Window x:Class="ListviewInItemAddList.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:ListviewInItemAddList"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Loaded="Window_Loaded_1">
    <Grid>
        <ListView Name="list1" HorizontalAlignment="Left" Height="306" Margin="10,10,0,0" VerticalAlignment="Top" Width="401" SelectionChanged="list1_SelectionChanged">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="列1" Width="50" DisplayMemberBinding="{Binding Path=Name}"/>
                    <GridViewColumn Header="列2" Width="50" DisplayMemberBinding="{Binding Path=Id}"/>
                    <GridViewColumn Header="列3" Width="50" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Button Width="30" Content="刪除" Click="Button_Click1" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="列4" Width="50" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Button Width="30" Content="增加" Click="Button_Click" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>

                    <GridViewColumn Header="列5" Width="50" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Button Width="30" Content="修改" Click="Button_Click2"  />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn Header="圖片" Width="50">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Image  Source ="{Binding Path=MyImage}"  Height="30"></Image>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
        <ListView x:Name="list2" HorizontalAlignment="Left" Height="306" Margin="416,10,0,0" VerticalAlignment="Top" Width="307" ItemsSource="{Binding .}">
            <ListView.View>
                <GridView>
                    <GridViewColumn Header="添加音樂" DisplayMemberBinding="{Binding Path=Name2}"/>
                    <GridViewColumn Header=" " DisplayMemberBinding="{Binding Path=Id2}"/>
                    <GridViewColumn  Width="50" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Button Width="30" Content="刪除" Click="list2_Click" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn  Width="50" >
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Button Width="30" Content="修改" Click="list2_Click1" />
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                    <GridViewColumn  Width="50">
                        <GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <Image  Source ="{Binding Path=MyImage2}"  Height="30"></Image>
                            </DataTemplate>
                        </GridViewColumn.CellTemplate>
                    </GridViewColumn>
                </GridView>
            </ListView.View>
        </ListView>
    </Grid>
</Window>

我們還要對listview這個控件進行設置,下面的操作,要先選定listview控件的基礎上點擊右鍵。
在這裏插入圖片描述

C#代碼
C#代碼我是直接拷貝過來的直接可以運行的;裏面寫了註釋很詳細,不過都是在自己理解的很多地方不透徹,你們可以自己運行一下看看效果。

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
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 ListviewInItemAddList
{
    /// <summary>
    /// MainWindow.xaml 的交互邏輯
    /// </summary>
    /// 
    public partial class MainWindow : Window
    {
        //_maillist中存放的都是class1的構造函數類型(相當於一個列表);
        private static ObservableCollection<Class1> _maillist = new ObservableCollection<Class1>();
   
        //ListView 的item中要添加圖片需要先創建一個圖片類,用來指定圖片來源;
        Image image = new Image();

        //定義一個靜態變量用來存儲當前button所屬的是那一條item,在增加事件中給其賦值;
        private static Class1 ssss = new Class1();
        public MainWindow()
    {
        InitializeComponent();

        image.Source = new BitmapImage(new Uri("E:/cc.png"));
    }

    private void list1_SelectionChanged(object sender, SelectionChangedEventArgs e)
    {
            //emp 當前選中的item對象,它的類型的Class1 類型
             Class1 emp = list1.SelectedItem as Class1;
            if (emp != null && emp is Class1)
            {
                //設置當前item對象下的列表內容
                list2.ItemsSource = emp.ListModel2;
            }
     }
        //Liast1中增加
        private void Button_Click(object sender, RoutedEventArgs e)
        {
           
            var btn = sender as Button; //btn 是一個button對象

            var c = btn.DataContext as Class1; //c 表示 btn所屬的list1 中的那一條itme,其類型的Class1類型;

            ssss = c;
           
            if (c != null && c is Class1)
        {
                for (int i = 0; i < 7; i++)
                {
                    Class2 _listmodel = new Class2(name: "sz"+i, id: "2z"+i, myImage: image.Source);//Class2也是一個構造函數類型和Class1一樣,用來當做list1的item中listView中的內容;

                    c.ListModel2.Add(_listmodel);//添加list1中ListModel2屬性的內容(就是添加到當前選中的list1中那個item中)

                    DataContext = _listmodel;//將數據綁定到當前上下文中
                }
               list2.ItemsSource = c.ListModel2;//把數據添加到第二個listview中(list1中item中所屬的內容);
            }
        
        }
        //Liast1中修改
        private void Button_Click2(object sender, RoutedEventArgs e)
        {
            var btn = sender as Button;

            var c = btn.DataContext as Class1;

            c.Id = "zhou";//我只是將當前list1中的Id進行了修改,來說明數據是修改成功的;

            MessageBox.Show(c.Id + "  " + c.Name + "  ");
        }
        //Liast1中刪除
        private void Button_Click1(object sender, RoutedEventArgs e)
        {
        var btn = sender as Button;
        var c = btn.DataContext as Class1;
        //Class1 emp = list1.SelectedItem as Class1;
        if (c != null && c is Class1)
        {
             c.ListModel2.Clear();//先清除list2中的數據

                _maillist.Remove(c);//在清除list1中的數據

            }

        }

        private void Window_Loaded_1(object sender, RoutedEventArgs e)
        {
            //在窗體初始化的時候就添加了list1中的數據
            list1.ItemsSource = null;

            for (int i = 0; i < 7; i++)
            {
                ObservableCollection<Class2> _listmodel = new ObservableCollection<Class2>();//_listmodel一定要在添加list1中數據的時候和list1中的數據一起創建出來,它們數據是綁定的;

                Class1 k = new Class1(name: "s" + i, id: "2" + i, myImage: image.Source, listmodel: _listmodel);

                DataContext = k;

                _maillist.Add(k);
            }
            list1.ItemsSource = _maillist;
        }
        //修改list2
        private void list2_Click1(object sender, RoutedEventArgs e)
        {
            var btn = sender as Button;

            var c = btn.DataContext as Class2;
            c.Id2 = "zhou";
            MessageBox.Show(c.Id2 + "  " + c.Name2 + "  ");
        }
        //刪除list2
        private void list2_Click(object sender, RoutedEventArgs e)
        {
            var btn = sender as Button;
            
            var c = btn.DataContext as Class2;
            foreach(var item in _maillist)
            {
                if (ssss == item)//爲了判斷你當前點擊添加的時候是屬於list1中的那一條item
                {
                    ssss.ListModel2.Remove(c);//刪除的是list1中ListModel2屬性中的你點擊要刪除的list2中的那個item數據(有點繞);
                }
            }
        }
    }
    class Class1 : INotifyPropertyChanged
{
    private string _name;
    private string _id;
    private ImageSource _myImage;
    private ObservableCollection<Class2> _listmodel2;
    public event PropertyChangedEventHandler PropertyChanged;
    public string Name
    {
        get
        {
            return _name;
        }
        set
        {
            _name = value;
            if (this.PropertyChanged != null)//激發事件,參數爲Age屬性    
            {
                this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("Name"));
            }
        }
    }

    public string Id
    {
        get
        {
            return _id;
        }
        set
        {
            _id = value;
            if (this.PropertyChanged != null)//激發事件,參數爲Age屬性    
            {
                this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("Id"));
            }
        }
    }

    public ImageSource MyImage
    {
        get
        {
            return _myImage;
        }
        set
        {
            _myImage = value;
            if (this.PropertyChanged != null)//激發事件,參數爲Age屬性    
            {
                this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("MyImage"));
            }
        }
    }
        public ObservableCollection<Class2> ListModel2
        {
            get
            {
                return _listmodel2;
            }
            set
            {
                _listmodel2 = value;
                if (this.PropertyChanged != null)//激發事件,參數爲Age屬性    
                {
                    this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("ListModel2"));
                }
            }
        }
        public Class1() { }
    public Class1(string name, string id, ImageSource myImage , ObservableCollection<Class2> listmodel)
    {
        this._name = name;
        this._id = id;
        this._myImage = myImage;
        this._listmodel2 = listmodel;
    }
  }
    class Class2 : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;
        private string _name2;
        private string _id2;
        private ImageSource _myImage2;

        public string Name2
        {
            get
            {
                return _name2;
            }
            set
            {
                _name2 = value;
                if (this.PropertyChanged != null)//激發事件,參數爲Age屬性    
                {
                    this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("Name2"));
                }
            }
        }
        public string Id2
        {
            get
            {
                return _id2;
            }
            set
            {
                _id2 = value;
                if (this.PropertyChanged != null)//激發事件,參數爲Age屬性    
                {
                    this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("Id2"));
                }
            }
        }
        public ImageSource MyImage2
        {
            get
            {
                return _myImage2;
            }
            set
            {
                _myImage2 = value;
                if (this.PropertyChanged != null)//激發事件,參數爲Age屬性    
                {
                    this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs("MyImage2"));
                }
            }
        }
        public Class2() { }
        public Class2(string name, string id, ImageSource myImage)
        {
            this._name2 = name;
            this._id2 = id;
            this._myImage2 = myImage;
        }
    }
}

效果圖如下

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章