ListViewを使ったDataGridもどきの作成-紹介編-

いろいろとお話を伺いますと、とくに業務アプリケーションの開発を担当されている方にとっては、「DataGridコントロールがない」というのがWPF採用の大きな障壁となっているようです。


というわけで、ListViewコントロールに編集可能なセルを作成する方法でDataGridコントロールのようなものを作成するという方法をご紹介しようと思います。意外に知られていないようですが、この方法はドキュメントに記載されておりサンプルも存在しています。

方法 : 編集可能なセルを含む ListView を作成する | Microsoft Docs



このサンプルは、ずいぶん前にATC(Advanced Technology Center) Avalon Teamというblogで公開されていたものとほぼ同様のものです。

Editing In ListView – ATC Avalon Team (Closed)



ListViewコントロールにはViewプロパティが存在し、このプロパティにGridViewオブジェクト、もしくはViewBaseを継承したオブジェクトを設定することで、データ項目を一連の列に表示する仕組みになっています。
GridViewの列は、GridViewColumnを定義して作成します。


このあたりの内容は、下記のページなどに記載されています。

方法 : GridView を使用して ListView コンテンツを表示する | Microsoft Docs
Microsoft のテクニカル ドキュメントの以前のバージョン | Microsoft Docs



GridViewColumnは、DataTemplateオブジェクトを適用するためのCellTemplateプロパティを持っています。

Microsoft のテクニカル ドキュメントの以前のバージョン | Microsoft Docs



このサンプルは、GridViewColumnのDataTemplateとして使用できるEditBoxというコントロールを作成することで、ListView内の列を編集可能にします。


このコントロールに関する制限といいますか注意点がATC Avalon Teamのblogに記載されていますので、その概要を書いておきます。

  • ノーマルモードの場合、TextBlockによって文字が表示される
  • エディットモードの場合、TextBoxがポップアップする
  • キーボードナビゲーションはサポートしない
  • ListViewの中のEditBoxがクリックされたら、エディットモードに切り替わる
  • F2キーを押すことで、エディットモードからノーマルモードに切り替わる
  • 他にフォーカスが移れば、ノーマルモードに切り替わる
  • このコントロールはGridViewColumn.CellTemplateプロパティに設定されるDataTemplateでのみ使用でき、それ以外での使用は保証されない



ノーマルモードとエディットモードという2つのモードは、Adorner(装飾)を使って実現されています。その詳細は私も理解していませんが、装飾については下記のページに記載されています。

装飾の概要 | Microsoft Docs