噂のユニバーサルWindowsアプリにComponentOne Chartを使ってみよう

ユニバーサルWindowsアプリに適用する

　Windows PhoneストアアプリでComponentOne Studioを使うことに成功したので、いよいよ、ユニバーサルアプリで使えるかチャレンジしてみましょう。

新規プロジェクト作成

　残念なことに、Visual Studio 2013 Update 2では、Visual Basicでのユニバーサルアプリがサポートされていないので、C#でサンプルを作成してみます。

　ユニバーサルアプリでもお勧めのテンプレートは「ハブアプリケーション」になります。

図11 ユニバーサルアプリのテンプレート選択

　先ほどと同じように不要なページファイルを削除して、SharedにView以外を配置したら、Windowsストアアプリ側とWindows Phoneストアアプリ側のそれぞれにMainPageを追加します。

図12 ソリューション構成

参照設定への追加

　Windowsストアアプリ側でもWindows Phoneストアアプリ側でもツールボックスにC1Chartが表示されるので、デザイナーで開いたMainPage.xamlにドラッグ＆ドロップし、配置すれば参照設定も完了します。

XAMLへの定義

　WindowsストアアプリとWindows Phoneストアアプリの互換性の高さがすごいのは、ヘッダ部分こそ大きさの相違などがありますが、Gridの2行目に設定するコンテンツ領域に定義するC1Chartの定義は同じXAML定義で良いということです。

リスト2 MainPage.xamlの定義

<Chart:C1Chart x:Name="Chart"  Grid.Row="1" 
        ChartType="Line" Theme="Office2007Blue" Palette="Metro">
    <Chart:C1Chart.Data>
        <Chart:ChartData ItemsSource="{Binding HandData}">
            <Chart:ChartData.Children>
                <Chart:DataSeries Label="X" ValueBinding="{Binding ValueX}"/>
                <Chart:DataSeries Label="Y" ValueBinding="{Binding ValueY}"/>
                <Chart:DataSeries Label="Z" ValueBinding="{Binding ValueZ}"/>
            </Chart:ChartData.Children>
        </Chart:ChartData>
    </Chart:C1Chart.Data>
    <Chart:C1ChartLegend Position="Right" VerticalContentAlignment="Center"/>
</Chart:C1Chart>

エミュレータでの実行確認

　View以外はSharedプロジェクトに配置し両方から同一のコードを参照するようにし、Viewについてもヘッダ部分以外は同一、もちろん、MainPage.xaml.csのコードはすべて一緒という状態でビルドして実行した結果は次のようになります。

図13 実行

　同一のアプリのように2つのデバイスでグラフ表示されています。それぞれWindowsストア、Windows Phoneストアに登録するときに同一名を指定してAppIDを共通化すれば、ユニバーサルWindowsアプリの機構により、購入状態やローミングデータなどを共有できます。つまり、PC、タブレット、スマートフォンでシームレスな利用が可能になります。

まとめ

　WindowsストアアプリとWindows Phoneストアアプリの互換性がうたい文句通りであり、また、ComponentOne Studio for WinRT XAMLの構造がWindows Runtime的な標準準拠性が高ければ「もしかしたら？」という期待から始めましたが、期待以上の結果になったと思いますがいかがだったでしょうか。当然、ツールボックスに出ないといった問題はありますが、根幹にかかわる部分ではないので、ComponentOne StudioでユニバーサルWindowsアプリ対応のコンポーネントが追加されるのも時間の問題かもしれません。

　なお、重ね重ねのお願いですがグレープシティ、マイクロソフトともにこの構成の動作保証をしていませんので、その点だけはご理解ください。