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

.NET
C#
WPF
プログラミング言語

公開日時: 2020-09-16 　更新日時: 2022-06-09

この記事でわかること

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

次のサンプルは、ユーザの氏名・年齢・住所の３つのプロパティを持つ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で項目を並び替えて表示

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

}

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

実行結果

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

実行結果

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

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

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

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

ListViewの概要

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

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

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

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

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

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

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

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

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

PMO/東京都豊島区/【WEB面談可】/在宅勤務

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

ListViewの概要

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

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

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

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

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

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

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

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

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

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

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts

【C#活用】WPFでMVVMパターンを実装する際の注意点

WPFのデータバインディングとは？C#によるデータの操作方法

WPFのListBoxコントロールをご解説。要素の追加や削除の方法

WPFのDataGridの使い方。データを表示・カスタマイズする方法

WPFとVisual Studioで画面遷移を実装する方法