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

FlexGrid for WinRT XAML

　WPF版に引き続き、同様にFlexGrid＋XAMLという形式で画面が定義できるWindowsストアアプリでの使い方も確認してみましょう。

NuGetパッケージ追加

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

図5　NuGetパッケージの追加

プロジェクト構成

　Windowsストアアプリ版のサンプルプロジェクト構造は次のようになります。

図6　プロジェクト構成

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

FlexGridの設置

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

リスト5　MainPage.xaml（抜粋）

    ：
 （中略）
    ：
        <Grid Grid.Row="1">
            <c1:C1FlexGrid HorizontalAlignment="Left" VerticalAlignment="Top"
                           ItemsSource="{Binding Items}"
                           Margin="10"
                           IsReadOnly="True"
                           AutoGenerateColumns="True" >
            </c1:C1FlexGrid>
        </Grid>
    ：
 （中略）
    ：

Binding設定

　MainPage.xamlのコードビハインド側に、ロジックからのItemsをBindingするコードを追記します。

リスト6　MainPage.xaml.vb（抜粋）

    ：
 （中略）
    ：
        Public Sub New()
            InitializeComponent()
            Me._navigationHelper = New Common.NavigationHelper(Me)
            AddHandler Me._navigationHelper.LoadState, AddressOf NavigationHelper_LoadState
            AddHandler Me._navigationHelper.SaveState, AddressOf NavigationHelper_SaveState
            Me.DataContext = App.MainVM
            SelectData()
        End Sub

        Private Async Sub SelectData()
            Await App.MainVM.SelectData()
        End Sub
    ：
 （中略）
    ：

　MainPageクラスがnewされると、DataContextにMainViewModelクラスのインスタンスを設定し、それからSelectDataメソッドを呼び出します。SelectDataメソッドで値が設定されるItemsプロパティの内容は、MainPage.xamlで指定してあるようにFlexGridにBindingされているので、Itemsプロパティの内容が変化すれば即座にFlexGridの表示に反映されます。

実行

　Windowsストアアプリ版でもAutoGenerateColumnsという機能があります。

図7　AutoGenerateColumns の実行結果

　そのため、事前に定義をしなくても一覧表示が可能です。

表示列の明示的指定

　もちろんAutoGenerateColumns機能を使わずに列指定で一覧表示することも可能です。

リスト7　MainPage.xaml（抜粋）

    ：
 （中略）
    ：
<c1:C1FlexGrid HorizontalAlignment="Left" VerticalAlignment="Top"
                ItemsSource="{Binding Items}"
                Margin="10"
                IsReadOnly="True"
                AutoGenerateColumns="False" >
    <c1:C1FlexGrid.Columns>
        <c1:Column Header="設備写真">
            <c1:Column.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding PhotoOfAedUrl}" />
                </DataTemplate>
            </c1:Column.CellTemplate>
        </c1:Column>
        <c1:Column Binding="{Binding LocationName}" Header="施設名" Width="300" />
        <c1:Column Binding="{Binding City}" Header="市町村区" Width="100" />
        <c1:Column Binding="{Binding AddressArea}" Header="住所" Width="300" />
        <c1:Column Binding="{Binding Latitude}" Header="緯度" />
        <c1:Column Binding="{Binding Longitude}" Header="経度" />
    </c1:C1FlexGrid.Columns>
</c1:C1FlexGrid>
    ：
 （中略）
    ：

　<c1:C1FlexGrid.Columns>タグの中に必要な列の<c1:Column>タグを定義してあります。忘れてはいけないのは、AutoGenerateColumnsプロパティをFalseにすることです。

　今回は、設備写真の画像URLをImageとして表示するように列属性の変更も行っています。

実行

図8　列指定後の実行結果