SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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 の実行結果
図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 列指定後の実行結果
図4 列指定後の実行結果

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

次のページ
FlexGrid for WinRT XAML

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
現役エンジニア直伝! 「現場」で使えるコンポーネント活用術(ComponentOne Studio)連載記事一覧

もっと読む

この記事の著者

初音玲(ハツネアキラ)

 国内SIerのSEでパッケージ製品開発を主に行っており、最近は、空間認識や音声認識などを応用した製品を手掛けています。 個人的には、仕事の内容をさらに拡張したHoloLensなどのMRを中心に活動しています。 Microsoft MVP for Windows Development ブログ:http://hatsune.hatenablog.jp/

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7957 2014/11/07 15:25

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング