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

WPFのListViewは、自由なレイアウトでデータを一覧表示するコントロールです。任意の型のデータを表示でき、ユーザが行をソートしたり、列を並び替えたりもできます。
この記事では、ListViewの基本的な使い方や、データを並び替え(ソート)の方法を解説します。
- プログラマー
- WPFでエクスプローラー風のリスト表示を行いたいです。どうすれば良いですか?
- プロジェクト
リーダー - そんな時は、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に設定してリストに表示する例です。
1 2 3 4 5 6 7 8 9 |
<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にデータを追加・表示する処理を、今回はC#を使って書いていきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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で項目を並び替えて表示
WPFのListViewには、ヘッダークリック時のソート機能が標準でありません。
ソート機能を実装するためには、ヘッダークリック時に、ItemSourceプロパティに設定したデータソース自体をソートさせることで実現できます。
データソース自体をソート出来ない場合、CollectionViewSourceにデータソースを設定したものをItemSourceに格納します。CollectionViewSourceは、ソートを行うと外見上の見た目は並び変わりますが、内部のデータソースの並び順は保持され続けます。
ListViewにソート機能を実装する
前章で作成したユーザ覧に、ヘッダークリック時のソート機能を実装していきます。
最初に、ヘッダークリック時のイベントを検知するため、XAMLにGridViewColumnHeader.Clickイベントを追加します。
1 |
<ListView Name="ListView" GridViewColumnHeader.Click="HeaderClicked"> |
C#のコードには、コンストラクタでCollectionViewSourceを作成し、ItemSourceプロパティに設定する処理と、HeaderClickedメソッドで、ヘッダークリック時に、クリックされた列に対応するプロパティでソート処理を行う処理を追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
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); // 同じ列を2回クリックした時は降順でソートする 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(); } } } |
コードを実行し、年齢列をクリックすると、年齢の昇順でデータがソートされます。
実行結果
もう一度、年齢列をクリックすると、こんどは降順でソートが行われます。
実行結果
- プログラマー
- リスト表示自体は少量のコードで実装でき簡単ですが、ソート機能の実装は少し大変ですね。
- プロジェクト
リーダー - そうですね。今回紹介したソート処理は、一度作ってしまえば他でも再利用できるため、是非メモしておいてください。
ListViewでリスト表示をマスター
WPFのListViewの概要や、基本的な使い方を解説してきました。 アプリ開発において、データをリスト形式で表示するケースは多々あるため、これを機にListViewの使い方を学んでみて下さい。同時にソートの仕組みも理解することをおすすめします。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。


新着案件New Job
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万~30万円東京都品川区(大崎駅)遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅)病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万~30万円東京都豊島区(池袋駅)開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅)債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万~67万円東京都文京区(後楽園駅)PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万~55万円東京都豊島区(池袋駅)