C#とWPFで実装するListView。項目を追加する方法

.NET開発者のためのブログメディア

WPFのListViewは、自由なレイアウトでデータを一覧表示するコントロールです。任意の型のデータを表示でき、ユーザが行をソートしたり、列を並び替えたりもできます。
この記事では、ListViewの基本的な使い方や、データを並び替え（ソート）の方法を解説します。

PG: WPFでエクスプローラー風のリスト表示を行いたいです。どうすれば良いですか？

PL: そんな時は、ListViewを使うと簡単に実装できますよ！これから説明しますね。

実行環境
・Windows 10
・Visual Studio 2019（.NET Framework 4.8）

ListViewの概要

WPFのListViewコントロールは、ListBoxから派生したクラスです。 ListBoxは単一カラムでデータを表示するのに対し、ListViewは複数カラムのデータを表示でき、Windowsエクスプローラーのようなリスト表示が簡単にWPFで作成できます。

また、ListViewのデータソースには、C#などの言語で作成したクラス・構造体（struct）、データベースオブジェクトなど、WPFのデータバインディングを利用して、様々なデータを関連付けできます。

ListViewにデータを表示・追加する

ListViewにデータを表示する際は、まずItemsSourceプロパティに表示するデータを設定します。
ItemsSourceには、データベースやC#などで作成したカスタムクラスなどのオブジェクトを設定し、WPFのデータバインディング機構を利用してListViewの各項目に表示します。

次のサンプルは、ユーザの氏名・年齢・住所の３つのプロパティを持つUserクラスを、ListViewのItemsSourceに設定してリストに表示する例です。

<ListView Name="ListView">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="ユーザ名" DisplayMemberBinding="{Binding Name}" Width="100"/>
            <GridViewColumn Header="年齢" DisplayMemberBinding="{Binding Age}" Width="50"/>
            <GridViewColumn Header="住所" DisplayMemberBinding="{Binding Path=Address}" Width="200"/>
        </GridView>
    </ListView.View>
</ListView>

<ListView.View>

</GridView>

</ListView.View>

</ListView>

上のListViewにデータを追加・表示する処理を、今回はC#を使って書いていきます。

using System.Collections.ObjectModel;

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();

        ObservableCollection<User> users = new ObservableCollection<User>();
        users.Add(new User() { Name = "Yamada", Age = 50, Address = "Tokyo" });
        users.Add(new User() { Name = "Suzuki", Age = 30, Address = "Nagoya" });
        users.Add(new User() { Name = "Sato", Age = 40, Address = "Osaka" });

        ListView.ItemsSource = users;
    }
}

using System.Collections.ObjectModel;

public partial class MainWindow : Window {

public MainWindow() {

InitializeComponent();

ObservableCollection<User> users = new ObservableCollection<User>();

users.Add(new User() { Name = "Yamada", Age = 50, Address = "Tokyo" });

users.Add(new User() { Name = "Suzuki", Age = 30, Address = "Nagoya" });

users.Add(new User() { Name = "Sato", Age = 40, Address = "Osaka" });

ListView.ItemsSource = users;

}

実行すると、次のような画面が表示されます。

実行結果
ListViewの実装

ListViewで項目を並び替えて表示

WPFのListViewには、ヘッダークリック時のソート機能が標準でありません。
ソート機能を実装するためには、ヘッダークリック時に、ItemSourceプロパティに設定したデータソース自体をソートさせることで実現できます。

データソース自体をソート出来ない場合、CollectionViewSourceにデータソースを設定したものをItemSourceに格納します。CollectionViewSourceは、ソートを行うと外見上の見た目は並び変わりますが、内部のデータソースの並び順は保持され続けます。

ListViewにソート機能を実装する

前章で作成したユーザ覧に、ヘッダークリック時のソート機能を実装していきます。
最初に、ヘッダークリック時のイベントを検知するため、XAMLにGridViewColumnHeader.Clickイベントを追加します。

<ListView Name="ListView" GridViewColumnHeader.Click="HeaderClicked">

1	<ListView Name="ListView" GridViewColumnHeader.Click="HeaderClicked">

C#のコードには、コンストラクタでCollectionViewSourceを作成し、ItemSourceプロパティに設定する処理と、HeaderClickedメソッドで、ヘッダークリック時に、クリックされた列に対応するプロパティでソート処理を行う処理を追加します。

using System.Linq;
using System.ComponentModel;
using System.Windows;
using System.Windows.Data;
using System.Windows.Controls;
using System.Collections.ObjectModel;

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();

        ObservableCollection<User> users = new ObservableCollection<User>();
        users.Add(new User() { Name = "Yamada", Age = 50, Address = "Tokyo" });
        users.Add(new User() { Name = "Suzuki", Age = 30, Address = "Nagoya" });
        users.Add(new User() { Name = "Sato", Age = 40, Address = "Osaka" });

        // 上で作成したユーザ覧のCollectionViewを作成し、ListViewのItemsSourceに設定
        ListView.ItemsSource = CollectionViewSource.GetDefaultView(users);
    }
    
    private void HeaderClicked(object sender, RoutedEventArgs e) {

        ICollectionView source = ListView.ItemsSource as ICollectionView;
        GridViewColumnHeader clickedHeader = e.OriginalSource as GridViewColumnHeader;

        // 列ヘッダーがクリックされた時にソートを行う（列ヘッダーのパディング部分がクリックされた時は何もしない）
        if (clickedHeader != null && clickedHeader.Role != GridViewColumnHeaderRole.Padding) {


            ListSortDirection direction = ListSortDirection.Ascending;
            string path = (clickedHeader.Column.DisplayMemberBinding as Binding).Path.Path;
            SortDescription lastSortDirection = source.SortDescriptions.ElementAtOrDefault(0);

            // 同じ列を２回クリックした時は降順でソートする
            if (path == lastSortDirection.PropertyName 
                && lastSortDirection.Direction == ListSortDirection.Ascending) {
                direction = ListSortDirection.Descending;
            }

            // CollectionViewを、クリックされた列のプロパティでソートする
            SortDescription sd = new SortDescription(path, direction);
            source.SortDescriptions.Clear();
            source.SortDescriptions.Add(sd);
            source.Refresh();
        }
    }
}