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

FlexGrid for WPF

　共通作業が終わったので、FlexGrid for WPFのサンプルに必要な作業を開始します。

FlexGridの設置

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

リスト2　MainWindow.xaml

<Window
    x:Class="Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 
    Title="MainWindow" Height="300" Width="300">
    <Grid>

        <c1:C1FlexGrid HorizontalAlignment="Left" VerticalAlignment="Top"
                       ItemsSource="{Binding Items}"
                       Margin="10" 
                       IsReadOnly="True"
                       AutoGenerateColumns="True" >
        </c1:C1FlexGrid>
    </Grid>
</Window>

　ItemSourceプロパティにBinding設定を忘れずに指定しましょう。

Binding設定

　MainWindow.xamlのコードビハインド側に、ロジックからのItemsをBindingするコードを追記します。直接AEDModel.vbを使うのではなく、間にMainViewModelクラスをはさんでいる点に注意してください。MainViewModelクラスは、Application.vbでMainVM変数にインスタンシング化して格納されています。

リスト3　MainWindow.xaml.vb

Namespace Views
    Public Class MainWindow
        Public Sub New()
            InitializeComponent()
            Me.DataContext = Application.MainVM
            SelectData()
        End Sub

        Private Async Sub SelectData()
            Await Application.MainVM.SelectData()
        End Sub
    End Class
End Namespace

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

実行

　FlexGridには、最小の手順で結果を得られるようにAutoGenerateColumnsという機能があり、AutoGenerateColumnsプロパティをTrueにすることで、Bindingしたプロパティ構造を自動的に列に展開する機能があります。

図3　AutoGenerateColumns の実行結果

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

表示列の明示的指定

　AutoGenerateColumns機能を使うと不要な列を非表示にしたり、列の順番の初期位置を変更したりできません。そのような要望がある場合は、明示的に列と列に表示するプロパティ値を指定します。

リスト4　MainWindow.xaml

<Window
    x:Class="Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:c1="http://schemas.componentone.com/winfx/2006/xaml" 
    Title="{Binding Items[0].Perfecture}" Height="300" Width="300">
    <Grid>

        <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="150" />
                <c1:Column Binding="{Binding City}" Header="市町村区" Width="50" />
                <c1:Column Binding="{Binding AddressArea}" Header="住所" Width="150" />
                <c1:Column Binding="{Binding Latitude}" Header="緯度" />
                <c1:Column Binding="{Binding Longitude}" Header="経度" />
            </c1:C1FlexGrid.Columns>
        </c1:C1FlexGrid>
    </Grid>
</Window>

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

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

実行

図4　列指定後の実行結果

　かなり最適化された一覧表示ができあがりました。