SHOEISHA iD

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

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

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

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

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

FlexGrid for WinRT XAML

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

NuGetパッケージ追加

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

図5 NuGetパッケージの追加
図5 NuGetパッケージの追加

プロジェクト構成

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

図6 プロジェクト構成
図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 の実行結果
図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 列指定後の実行結果
図8 列指定後の実行結果

次のページ
FlexGrid for WinForms

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング