ListView顾名思义用来做列表数据展示，也是我们在开发中经常使用的控件之一，接下来将展示下它的一些使用场景，以满足不同的需求。
基本用法
在页面代码中展示数据，如果是一些固定的数据项，可以使用此方法进行数据展示。
<Grid> <ListView> <ListViewItem>1</ListViewItem> <ListViewItem>2</ListViewItem> <ListViewItem>3</ListViewItem> </ListView> </Grid>
将数据源绑定到ListView的ItemsSource，在后台构建数据源，并且可以动态改变，即时显示在视图界面。
using Demo.Base; using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Linq; using System.Text; using System.Threading.Tasks; namespace Demo.ViewModel { public class ListViewDemoViewModel: NotifyPropertyObject { ObservableCollection<string> _items= new ObservableCollection<string>(); public ObservableCollection<string> Items { get { return _items; } set { _items = value; this.RaisePropertyChanged("Items"); } } public ListViewDemoViewModel() { Items.Add("测试1"); Items.Add("测试2"); Items.Add("测试3"); Items.Add("测试4"); } } }
<Window x:Class="Demo.View.ListViewDemoView" 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:Demo.View" mc:Ignorable="d" Title="ListViewDemo" Height="450" Width="800"> <Grid> <ListView ItemsSource="{Binding Items}"></ListView> </Grid> </Window>
展示更加丰富的内容
如果需要展示更加丰富的内容，比如在一个数据项中展示标题，描述，图片等内容，我们需要使用到数据模板DataTemplate。在Listview的ItemTemplate中构建代码，如下：
<ListView.ItemTemplate> <DataTemplate> <Border BorderBrush="#50E3C2" BorderThickness="1,1,1,1" CornerRadius="1,1,1,1" Margin="10"> <Grid Margin="5"> <Grid.ColumnDefinitions> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> <ColumnDefinition></ColumnDefinition> </Grid.ColumnDefinitions> <Image Width="40" Height="40" Grid.Column="0" Source="{Binding Image}"></Image> <Grid Grid.Column="1"> <Label Content="{Binding Name}"></Label> </Grid> <Button Grid.Column="2" Content="{Binding Status}" Command="{Binding DataContext.SignInCommand,RelativeSource={RelativeSource AncestorType=Window}}" CommandParameter="{Binding Path=.}"></Button> </Grid> </Border> </DataTemplate> </ListView.ItemTemplate>
大概的样式可以如下，我们显示了图标，标题，还有按钮等内容：
网络异常，图片无法展示
|
横向展示
ListView中的显示默认是竖向显示的，若要改成横向显示，我们可以修改ItemsPanel，如下：
<ListView.ItemsPanel> <ItemsPanelTemplate> <WrapPanel/> </ItemsPanelTemplate> </ListView.ItemsPanel>
若需要能够自动换行，我们设置ScrollViewer.HorizontalScrollBarVisibility="Disabled"即可实现。
展示表格
ListView和GridView结合起来使用，显示表格数据。
using Demo.Base; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace Demo.Model { public class ListViewModel: NotifyPropertyObject { private string _name; public string Name { get { return _name; } set { _name = value; this.RaisePropertyChanged("Name"); } } private int _score; public int Score { get { return _score; } set { _score = value; this.RaisePropertyChanged("Score"); } } } }
using Demo.Base; using Demo.Model; using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Linq; using System.Text; using System.Threading.Tasks; namespace Demo.ViewModel { public class ListViewDemoViewModel: NotifyPropertyObject { ObservableCollection<ListViewModel> _items= new ObservableCollection<ListViewModel>(); public ObservableCollection<ListViewModel> Items { get { return _items; } set { _items = value; this.RaisePropertyChanged("Items"); } } public ListViewDemoViewModel() { ListViewModel listView1=new ListViewModel(); listView1.Name = "张三"; listView1.Score = 90; Items.Add(listView1); ListViewModel listView2 = new ListViewModel(); listView2.Name = "李四"; listView2.Score = 90; Items.Add(listView2); ListViewModel listView3 = new ListViewModel(); listView3.Name = "王五"; listView3.Score = 90; Items.Add(listView3); ListViewModel listView4 = new ListViewModel(); listView4.Name = "赵六"; listView4.Score = 80; Items.Add(listView4); ListViewModel listView5 = new ListViewModel(); listView5.Name = "测试"; listView5.Score = 80; Items.Add(listView5); } } }
<ListView.View> <GridView> <GridViewColumn Header="姓名" Width="120" DisplayMemberBinding="{Binding Name}" /> <GridViewColumn Header="分数" Width="50" DisplayMemberBinding="{Binding Score}" /> </GridView> </ListView.View>
网络异常，图片无法展示
|
分组显示
如果需要分组展示数据，我们需要修改GroupStyle，如下：
<ListView.GroupStyle> <GroupStyle> <GroupStyle.HeaderTemplate> <DataTemplate> <TextBlock FontWeight="Bold" FontSize="14" Text="{Binding Name}"/> </DataTemplate> </GroupStyle.HeaderTemplate> </GroupStyle> </ListView.GroupStyle>
CollectionView view = (CollectionView)CollectionViewSource.GetDefaultView(Items); PropertyGroupDescription groupDescription = new PropertyGroupDescription("Score"); view.GroupDescriptions.Add(groupDescription);
效果如下：
网络异常，图片无法展示
|
