這段代碼實現的功能
- listview的item中添加button
- listview的item中添加圖片
- 向item中添加其下的listview
- 可以對listview進行增刪改操作
- 對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;
}
}
}
效果圖如下