WPF笔记汇总之ListView控件

最新推荐文章于 2024-09-06 21:20:38 发布
最新推荐文章于 2024-09-06 21:20:38 发布
阅读量1.2w 收藏 45
点赞数 13
分类专栏： .NET 文章标签： wpf c# .net xaml listview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DahlinSky/article/details/108636050
版权

WPF控件之ListView控件

紧接上一篇《WPF笔记汇总之列表类控件与DataGrid控件》，这篇主要总结WPF中最复杂的控件之一，ListView控件，它类似ListBox和DataGrid，它可以实现上面两个控件的功能，但自定义制定的方式更加自由。

文章目录

1 ListView简单使用

默认的ListView实际上只是一个ListBox，具有不同的选择模式，ListViewItem派生自ContentControl类，所以可以指定WPF控件作为其内容。

<!--简单使用-->
<ListView Margin="10">
	<ListViewItem>A ListView</ListViewItem>
	<ListViewItem IsSelected="True">with several</ListViewItem>
	<ListViewItem>items</ListViewItem>
</ListView>
<!--有图片的ListViewItem-->
<ListView Margin="10">
	<ListViewItem>
		<StackPanel Orientation="Horizontal">
			<Image Source="/images/file.png" Margin="0,0,5,0" />
			<TextBlock>Green</TextBlock>
		</StackPanel>
	</ListViewItem>
	<ListViewItem>
		<StackPanel Orientation="Horizontal">
			<Image Source="/images/file.png" Margin="0,0,5,0" />
			<TextBlock>Blue</TextBlock>
		</StackPanel>
	</ListViewItem>
	<ListViewItem IsSelected="True">
		<StackPanel Orientation="Horizontal">
			<Image Source="/images/file.png" Margin="0,0,5,0" />
			<TextBlock>Red</TextBlock>
		</StackPanel>
	</ListViewItem>
</ListView>

简单使用截图

2 ListView数据绑定和ItemTemplate

<!--简单数据绑定-->
<ListView Margin="10" Name="lvDataBinding"></ListView>
<TextBlock></TextBlock>
<!--自定义模板-->
<ListView Margin="10" Name="lvDataBinding2">
	<ListView.ItemTemplate>
		<DataTemplate>
			<WrapPanel>
				<TextBlock Text="Name: " />
				<TextBlock Text="{Binding Name}" FontWeight="Bold" />
				<TextBlock Text=", " />
				<TextBlock Text="Age: " />
				<TextBlock Text="{Binding Age}" FontWeight="Bold" />
				<TextBlock Text=" (" />
				<TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
				<TextBlock Text=")" />
			</WrapPanel>
		</DataTemplate>
	</ListView.ItemTemplate>
</ListView>

public MainWindow()
{
	InitializeComponent();

	List<User> items = new List<User>();
	items.Add(new User() { Name = "John Doe", Age = 42, Mail = "john@doe-family.com" });
	items.Add(new User() { Name = "Jane Doe", Age = 39, Mail = "jane@doe-family.com" });
	items.Add(new User() { Name = "Sammy Doe", Age = 13, Mail = "sammy.doe@gmail.com" });
	lvDataBinding.ItemsSource = items;
	lvDataBinding2.ItemsSource = items;
}

public class User
{
	public string Name { get; set; }
	public int Age { get; set; }
	public string Mail { get; set; }
	public override string ToString()
	{
		return this.Name + ", " + this.Age + " years old";
	}
}

数据绑定运行截图

3 GridView模板

WPF内置了一个专门的视图：GridView，通过使用GridView，您可以在ListView中展示多列数据。Header属性用于指定列显示的文本，DisplayMemberBinding属性将值绑定到自定义数据类的属性。此外指定CellTemplate属性，可以完全控制内容在特定列单元格中的呈现方式。

<!--GridView简单使用-->
<ListView Margin="10" Name="lvUsers">
	<ListView.View>
		<GridView>
			<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />
			<GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />
			<GridViewColumn Header="Mail" Width="150" DisplayMemberBinding="{Binding Mail}" />
		</GridView>
	</ListView.View>
</ListView>

<!--CellTemplate属性-->
<ListView Margin="10" Name="lvUsers2">
	<ListView.View>
		<GridView>
			<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />
			<GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />
			<GridViewColumn Header="Mail" Width="150">
				<GridViewColumn.CellTemplate>
					<DataTemplate>
						<TextBlock Text="{Binding Mail}" TextDecorations="Underline" Foreground="Blue" Cursor="Hand" />
					</DataTemplate>
				</GridViewColumn.CellTemplate>
			</GridViewColumn>
		</GridView>
	</ListView.View>
</ListView>

public MainWindow()
{
	InitializeComponent();

	List<User> items = new List<User>();
	items.Add(new User() { Name = "John Doe", Age = 42, Mail = "john@doe-family.com" });
	items.Add(new User() { Name = "Jane Doe", Age = 39, Mail = "jane@doe-family.com" });
	items.Add(new User() { Name = "Sammy Doe", Age = 13, Mail = "sammy.doe@gmail.com" });
	lvUsers.ItemsSource = items;
	lvUsers2.ItemsSource = items;
}

public class User
{
	public string Name { get; set; }
	public int Age { get; set; }
	public string Mail { get; set; }
}

GridView运行截图

4 数据对齐与分组展示

Horizo​​ntalAlignment属性负责设置对齐方式。默认为Center，可以将其更改为Left等。CollectionView包含许多可能性，包括对项目进行分组的功能。通过向视图的GroupDescriptions添加所谓的PropertyGroupDescription来实现分组。


<!--更改数据对齐方式-->
<ListView Margin="10" Name="lvUsers">
	<ListView.Resources>
		<Style TargetType="{x:Type GridViewColumnHeader}">
			<Setter Property="HorizontalContentAlignment" Value="Left" />
		</Style>
	</ListView.Resources>
	<ListView.View>
		<GridView>
			<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />
			<GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />
			<GridViewColumn Header="Mail" Width="150" DisplayMemberBinding="{Binding Mail}" />
		</GridView>
	</ListView.View>
</ListView>
<!--分组展示-->
<ListView Name="lvUsers2">
	<ListView.View>
		<GridView>
			<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />
			<GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />
		</GridView>
	</ListView.View>

	<ListView.GroupStyle>
		<GroupStyle>
			<GroupStyle.HeaderTemplate>
				<DataTemplate>
					<TextBlock FontWeight="Bold" FontSize="14" Text="{Binding Name}"/>
				</DataTemplate>
			</GroupStyle.HeaderTemplate>
		</GroupStyle>
	</ListView.GroupStyle>
</ListView>
<TextBlock></TextBlock>
<!--折叠和扩展组-->
<ListView Name="lvUsers3">
	<ListView.View>
		<GridView>
			<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />
			<GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />
		</GridView>
	</ListView.View>
	<ListView.GroupStyle>
		<GroupStyle>
			<GroupStyle.ContainerStyle>
				<Style TargetType="{x:Type GroupItem}">
					<Setter Property="Template">
						<Setter.Value>
							<ControlTemplate>
								<Expander IsExpanded="True">
									<Expander.Header>
										<StackPanel Orientation="Horizontal">
											<TextBlock Text="{Binding Name}" FontWeight="Bold" Foreground="Gray" FontSize="18" VerticalAlignment="Bottom" />
											<TextBlock Text="{Binding ItemCount}" FontSize="18" Foreground="Green" FontWeight="Bold" FontStyle="Italic" Margin="10,0,0,0" VerticalAlignment="Bottom" />
											<TextBlock Text=" item(s)" FontSize="18" Foreground="Silver" FontStyle="Italic" VerticalAlignment="Bottom" />
										</StackPanel>
									</Expander.Header>
									<ItemsPresenter />
								</Expander>
							</ControlTemplate>
						</Setter.Value>
					</Setter>
				</Style>
			</GroupStyle.ContainerStyle>
		</GroupStyle>
	</ListView.GroupStyle>
</ListView>


public MainWindow()
{
	InitializeComponent();

	List<User> items = new List<User>();
	items.Add(new User() { Name = "John Doe", Age = 42, Mail = "john@doe-family.com", Sex = SexType.Male });
	items.Add(new User() { Name = "Jane Doe", Age = 39, Mail = "jane@doe-family.com", Sex = SexType.Female });
	items.Add(new User() { Name = "Sammy Doe", Age = 13, Mail = "sammy.doe@gmail.com", Sex = SexType.Male });
	lvUsers.ItemsSource = items;
	lvUsers2.ItemsSource = items;
	lvUsers3.ItemsSource = items;

	CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(lvUsers2.ItemsSource);
	PropertyGroupDescription groupDescription = new PropertyGroupDescription("Sex");
	view.GroupDescriptions.Add(groupDescription);
}


public enum SexType { Male, Female };

public class User
{
	public string Name { get; set; }
	public int Age { get; set; }
	public string Mail { get; set; }
	public SexType Sex { get; set; }
}

分组展示截图

5 排序与过滤

<TextBox DockPanel.Dock="Top" Margin="0,0,0,10" Name="txtFilter" TextChanged="txtFilter_TextChanged" />
<ListView Name="lvUsers">
	<ListView.View>
		<GridView>
			<GridViewColumn Header="Name" Width="120" DisplayMemberBinding="{Binding Name}" />
			<GridViewColumn Header="Age" Width="50" DisplayMemberBinding="{Binding Age}" />
		</GridView>
	</ListView.View>
</ListView>

public MainWindow()
{
	InitializeComponent();
	List<User> items = new List<User>();
	items.Add(new User() { Name = "John Doe", Age = 42, Mail = "john@doe-family.com", Sex = SexType.Male });
	items.Add(new User() { Name = "Jane Doe", Age = 39, Mail = "jane@doe-family.com", Sex = SexType.Female });
	items.Add(new User() { Name = "Sammy Doe", Age = 13, Mail = "sammy.doe@gmail.com", Sex = SexType.Male });
	items.Add(new User() { Name = "Mike", Age = 13, Mail = "mike.doe@gmail.com", Sex = SexType.Male });
	lvUsers.ItemsSource = items;
	
	// 先使用年龄进行排序，当年龄相同时，使用名称排序。
	CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(lvUsers.ItemsSource);
	view.SortDescriptions.Add(new SortDescription("Age", ListSortDirection.Ascending));
	view.SortDescriptions.Add(new SortDescription("Name", ListSortDirection.Ascending));
	// 过滤
	view.Filter = UserFilter;

}

private bool UserFilter(object item)
{
	if (String.IsNullOrEmpty(txtFilter.Text))
		return true;
	else
		return ((item as User).Name.IndexOf(txtFilter.Text, StringComparison.OrdinalIgnoreCase) >= 0);
}

private void txtFilter_TextChanged(object sender, System.Windows.Controls.TextChangedEventArgs e)
{
	CollectionViewSource.GetDefaultView(lvUsers.ItemsSource).Refresh();
}

public enum SexType { Male, Female };
public class User
{
	public string Name { get; set; }
	public int Age { get; set; }
	public string Mail { get; set; }
	public SexType Sex { get; set; }
}
卷儿哥
关注
专栏目录
【愚公系列】2023年10月 WPF+上位机+工业互联 002-WPF布局控件
时光隧道
09-07 4万+
WPF布局是指在Windows Presentation Foundation（WPF）中定义和管理用户界面元素的方式。WPF提供了不同类型的布局容器，如Grid、StackPanel、WrapPanel和DockPanel等，使得开发人员能够轻松地创建灵活和可扩展的用户界面。WPF布局可通过XAML标记语言或代码实现。它提供了一种分离界面和逻辑的方式，使得开发人员能够更容易地管理用户界面的外观和行为。控件功能Canvas。
WPF基础系列二：控件简介
iceberg7012的博客
04-06 1470
控件简介 文章目录控件简介前言一、控件二、控件类型三、控件详解1.ContentControl 类2.HeaderedContentControl 类3.ItemsControl 类4.其他 前言 控件就是显示数据和响应用户操作的UI元素，也即：控件就是数据和行为的载体。在WPF中，是数据驱动UI，数据是核心，处于主动的，UI从属于数据并表达数据，是被动的。因此，就重要性而言，WPF数据第一，控件第二，尽管如此，控件也占有非常重要的地位。 一、控件 控件的实质： 我们先从UI上分析，UI的功能是
WPF ListView控件的详细使用教程
最新发布
weixin_39604653的博客
09-06 1140
WPF 中的 ListView 是一个强大的控件，可以显示列表数据。它继承自 ListBox，并支持更多的功能，包括使用不同的 View 模板（例如 GridView）。ListView 可以用于创建复杂的表格结构，并且通过数据绑定功能，能够轻松地与数据模型交互。
C# WPF ListView 操作 item（包括item子集中创建listview属性）
豫
09-28 1万+
这段代码实现的功能 listview中添加button listview中添加图片 向item中添加其下的listview 可以对listview进行增删改操作 对listview中任意一个item的子集中的listview中的item对象进行增删改操作 前端代码 <Window x:Class="ListviewInItemAddList.MainWindow" xml...
wpf中使用ListView
故里2130
09-15 1万+
1.xaml代码，给标题自定义文字，此处使用了控件模板的方法，把需要修改的内容格式都放在控件模板中2.cs不变{
wpf listview 使用
热门推荐
Alsmile的专栏
08-25 1万+
单列：
WPF ListView
lishuangquan1987的博客
09-09 2389
最近在研究WPF ListView数据绑定就不说了，想将ListView的样式弄成跟Winform一样的，就是每一个row能够设置不同的背景色和前景色，经过查询可以用下面的方法：ListViewItem item = this.listView.ItemContainerGenerator.ContainerFromIndex(0) as ListViewItem; Stud
WPF真入门教程12--ListView控件
hqwest的专栏
12-08 4265
ListView 控件在Windows应用程序中常用，用于表示数据列表。如果您以前使用过 WinForms，那么您对ListView的实用性有一个很好的了解，但您应该意识到 WPF中的ListView 不像WinForms版本那样使用。再一次的主要区别在于，虽然WinForms ListView只是调用Windows API 函数来呈现常见的Windows ListView 控件，但WPF ListView是一个独立的控件，不依赖于 Windows API，WPF ListView以完全不同的方式处理项目图
WPF学习笔记（3）：ListView根据内容自动调整列宽
weixin_30709061的博客
01-06 675
WPF学习笔记（3）：ListView根据内容自动调整列宽 原文:WPF学习笔记（3）：ListView根据内容自动调整列宽DataGrid中，只要不设置DataGrid的宽度和列宽度，或者将宽度设置为Auto，那么表格就会根据内容自动调整宽度，以显示所有内容。但如果是ListView，按以上方法设置，却达不到列宽自动调整的效果， 列宽在控件第...
c语言 listview,C语言 SDK编程之通用控件的使用－－ListView
weixin_29094775的博客
05-23 623
一、ListView控件属于通用控件CONTROL中的一种，在SDK编程方式时要使用通用控件必须包含comctl32.dll，所以代码中要有头文件: commctrl.h 导入库：comctl32.lib在使用通用控件之前应该先调用InitCommonControls();初始化它以ListView控件为例：InitCommonControls();//子窗口形式使用LISTVIEWCrea...
WPF ListView 漂亮样式
12-30
WPF ListView 漂亮样式，自己还可以根据自己的需求进行样式修改，表头、列表都可以根据注释进行拓展，很实用
C# WPF ListView控件的实例详解
12-31
C# WPF ListView控件的实例详解 C#的WPF作为现在微软主流的桌面程序开发平台，相比过去的MFC时代，有了非常多的不同。本人刚从MFC平台转过来，以为可以轻松上手，哪知碰到了很多问题，十分不解。不得不乖乖回去看了本书，再继续回到边左边边学的路上。在这边也推荐《深入浅出WPF》这本书，拿来上手还是极好的。     由于WPF以数据驱动UI的设计理念，很多控件用起来都与之前平台的相差很多，ListView控件算是有代表性的，这是进化的成果。关于该控件的应该，很多参考了这篇博文，如觉本人记述不清楚，可去查阅。     WPF的代码分为前端和后端两部分，前端为UI，负责与用户进行交互
WPF中listview显示列表的删除和显示
01-11
WPF中listview显示列表的删除和显示,增加了读取和删除的按钮和事件。仅供学习交流。
wpf 带表格线的listview
11-18
默认的listview不带表格线，这个实现的已经算是完美的了
WPF的ListView控件自定义布局用法实例
09-02
主要介绍了WPF的ListView控件自定义布局的方法,结合实例形式分析了WPF中ListView控件的布局方法,需要的朋友可以参考下
【WPF应用31】WPF基本控件-ListView的详解与示例
qq_35320456的博客
04-03 4995
WPF基本控件-ListView的详解与示例
依赖属性非常重要的特点-属性值沿UI元素向下传递
dxm809的博客
05-24 303
依赖属性的重要特点是当没有拥有该依赖属性的控件指定该属性时候，它会把所在容器的该依赖属性借过来使用 <Window x:Class="WpfApp10.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://sc
WPF ListView ,XML
david9779的博客
10-22 146
<?xml version="1.0" encoding="utf-8" ?><PersonList> <Person Id="1"> <Name>Fred</Name> </Person> <Person Id="2"> <Name>Sophie</Name> ...
WPF 实现 DataGrid/ListView 分页控件
06-13
WPF 中的 DataGrid 和 ListView 都没有内置的分页控件，但可以通过一些方法来实现分页功能。 一种实现方式是使用 CollectionView，它是用于对集合进行排序、过滤和分组的类。可以使用 CollectionViewSource 创建 CollectionView，并在 XAML 中绑定到分页控件中。 以下是一个示例，其中使用 CollectionViewSource 来创建 CollectionView，并将其绑定到 ListView 控件中： ```xml <Grid> <Grid.Resources> <CollectionViewSource x:Key="cvs" Source="{Binding Items}" PageSize="10"/> </Grid.Resources> <ListView ItemsSource="{Binding Source={StaticResource cvs}}" /> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center"> <Button Content="Prev" Command="{Binding Source={StaticResource cvs}, Path=PageUpCommand}" /> <TextBlock Text="{Binding Source={StaticResource cvs}, Path=PageIndex}" /> <Button Content="Next" Command="{Binding Source={StaticResource cvs}, Path=PageDownCommand}" /> </StackPanel> </Grid> ``` 在上面的示例中，CollectionViewSource 用于创建 CollectionView，并使用 PageSize 属性来指定每页的项数。ListView 控件绑定到 CollectionViewSource 中的 CollectionView。 同时，使用按钮来切换分页，每个按钮都绑定到 CollectionViewSource 中的 PageUpCommand 和 PageDownCommand 命令，以便在前一页和后一页之间切换。 还有其他的实现方式，例如手动分页和使用第三方分页控件等等。具体实现方式可以根据项目需求来选择。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值