C#-ListView的使用

ListView顾名思义用来做列表数据展示，也是我们在开发中经常使用的控件之一，接下来将展示下它的一些使用场景，以满足不同的需求。

基本用法

wpf页面代码中展示数据，数据固定可以使用。

    <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>

展示更加丰富的内容

如果需要展示更加丰富的内容，比如在一个数据项中展示标题，描述，图片等内容，我们需要使用到模板。在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);

效果如下：