.net column

.NET開発者のためのブログメディア
データの表示

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

2020年09月16日

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の各項目に表示します。

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

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

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

実行結果
ListViewの実装

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

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

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

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

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

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

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

実行結果
昇順での表示

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

実行結果
降順での表示

PG
リスト表示自体は少量のコードで実装でき簡単ですが、ソート機能の実装は少し大変ですね。
PL
そうですね。今回紹介したソート処理は、一度作ってしまえば他でも再利用できるため、是非メモしておいてください。

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

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

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


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

求人一覧

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

エントリー(応募フォーム)