軽量な表形式コンポーネントFlexGridでタッチ対応業務アプリを構築する

FlexGrid for WinForms

　最後にXAMLではなくWindowsフォームでのFlexGridの使い勝手を確認してみましょう。

NuGetパッケージ追加

　Windowsフォームのプロジェクトでも「Json.NET」と「Microsoft HTTP Client Libraries」のNuGetパッケージが存在します。

図9　NuGetパッケージの追加

プロジェクト構成

　WindowsフォームでもBindingが利用可能なので、プロジェクト構成もModel-ViewModel-Viewとして、Modelにロジック、Viewに見た目を記載します。

図10　プロジェクト構成

　AEDModel.vbとMainViewModel.vbはWPF版がそのまま使えるので、既存項目の追加で所定のフォルダに追加します。

FlexGridの設置

　ツールボックスに「.NET Frameworkコンポーネント」からC1FlexGridを追加し、さらにメインフォームにドラッグ＆ドロップで設置します。

　FlexGridのデータソースとしてMainViewModelクラスを指定します。

図11　データソースにオブジェクトを指定

　これでBindingの指定も完了です。

Binding設定

　MainForm.vbのコードビハインド側で、SelectDataメソッドを呼び出してItemsをDataSourceに指定するコードを追記します。

リスト8　MainForm.vb

Imports CZ1407Win.ViewModels

Public Class MainForm
    Private MainVM As New MainViewModel

    Public Sub New()
        InitializeComponent()
        SelectData()
    End Sub

    Private Async Sub SelectData()
        Await Me.MainVM.SelectData()
        Me.MainViewModelBindingSource.DataSource = Me.MainVM.Items
    End Sub
End Class

実行

　デフォルト状態ではAutoGenerateColumnsがTrueなので、このまま実行してみます。

図12　AutoGenerateColumns の実行結果

表示列の明示的指定

　列を明示的に指定するときは列エディタを使用します。

図13　列エディタ

実行

図14　列指定後の実行結果

　設備変更欄に画像を表示するためには、コードビハインド側で明示的に画像URLから画像データに変換するなどの処理が必要になるため、今回は確認を省略したいと思います。

まとめ

　FlexGridを使ってWebサービスから取得した値を一覧表示してみましたが、いかががだったでしょうか。AutoGenerateColumnsなどを活用して素早く手軽に一覧表示ができるのは使っていてかなり気持ちが良かったです。これからはSPREADだけではなくFlexGridについても評価の対象にしていきたいと思いました。