.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();
        }
    }
}

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();

}

コードを実行し、年齢列をクリックすると、年齢の昇順でデータがソートされます。

実行結果
昇順での表示

もう一度、年齢列をクリックすると、こんどは降順でソートが行われます。

実行結果
降順での表示

PG: リスト表示自体は少量のコードで実装でき簡単ですが、ソート機能の実装は少し大変ですね。

PL: そうですね。今回紹介したソート処理は、一度作ってしまえば他でも再利用できるため、是非メモしておいてください。

ListViewでリスト表示をマスター

WPFのListViewの概要や、基本的な使い方を解説してきました。アプリ開発において、データをリスト形式で表示するケースは多々あるため、これを機にListViewの使い方を学んでみて下さい。同時にソートの仕組みも理解することをおすすめします。

>>>C#の案件を探すならFEnet .NET Navi

.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー（応募フォーム）

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

2020/03/17 2021/11/05
【SQL Serverログの操作】トランザクションログの使用量を確認する方法

2020/03/16 2021/11/08
【.NETが統合】.NET 5の概要と今後のリリース予定

2020/03/05 2020/10/08

Categories 連載一覧

生活・便利

教育・学習

Windows

言語・環境

転職

エンジニア

働き方

プログラミング言語

開発環境

ツール

未分類

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

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

ListViewの概要

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

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

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

ListViewでリスト表示をマスター

Search キーワード検索

Popular 人気の記事

reccomended おすすめ記事

C#のusingステートメントでリソースの解放【Disposeとの違いとは】

【SQL Serverログの操作】トランザクションログの使用量を確認する方法

【.NETが統合】.NET 5の概要と今後のリリース予定

Categories 連載一覧

Tags タグ一覧

Jobs 新着案件

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務