.NET開発者のためのブログメディア
C#とWPFで実装するListView。項目を追加する方法
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に設定してリストに表示する例です。
|
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); // 同じ列を２回クリックした時は降順でソートする 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の使い方を学んでみて下さい。同時にソートの仕組みも理解することをおすすめします。
