基本ベースなるストアアプリ用プロジェクトの作り方

2013/05/20開催の「Windows Phone アプリケーション開発者のためのWindows ストアアプリ開発のポイント」セミナーに参加してきました。
そこで「これはいいなー」と思ったことがあったので書きます。

2013/5の時点で Windows 8 は、デスクトップ、ノート、タブレットなど様々はハードウェアに対応しています。
そのため、スクリーンサイズもそれぞれのデバイスによって、大きく異なってきます。

スクリーンサイズ：1024x767, 1366x768, 1920x1080, 2560x1440, ...
自動拡大倍率：100%, 140%, 180%

Windows ストアアプリを開発するにあたり、一番大きな壁は「異なるスクリーンサイズへの対応」を行わなければならないことだと言えるでしょう。

しかし、スクリーンサイズにだけ対応すればいいわけではありません。
タブレットでは、縦画面、横画面などを使い分けることがあり、Windows ストアアプリを開発するにあたり、次の４つの画面モードに対応する必要があります。

通常横画面
フィル
縦画面（768x1366）
スナップ：幅320固定

これらに対応するために VisualStateManager クラスを用います。

しかし、これからを自分で実装するのは、たいへんめんどくさいです。
えぇ、ものすごくめんどくさかったです。
そこで、次のように基本的なベースとなるテンプレートの作り方を共有します。

使用したIDE
Microsoft Visual Studio Express 2012 for Windows 8
Version 11.0.603135.01 Update 2

１．新規プロジェクトを作成する

Visual Studio を起動します

「新しいプロジェクトを作成する」を選択

今回は C# を使います

「分割アプリケーション（XAML）」を選択

分割以外のテンプレートを選択しない理由は、のちほど

プロジェクトの名前は任意に設定

プロジェクトが完成して、シミュレータを実行するとこんな感じ

また、次のようなMVVMモデルの構成になっています

ここで注目しておきたいのが App.xaml.cs から呼ばれるメインページである ItemsPage.xaml.cs のスーパークラスが「Page クラス」ではなく「LayoutAwarePage クラス」になっていることです。

LayoutAwarePage クラスは、Page クラスを継承しており、様々な画面に対するイベントなどを持っています。

上記であげた「縦、横、スナップ」の画面モードに対応するために使う VisualStateManager クラスも実装されています。

        public void InvalidateVisualState()
        {
            if (this._layoutAwareControls != null)
            {
                string visualState = DetermineVisualState(ApplicationView.Value);
                foreach (var layoutAwareControl in this._layoutAwareControls)
                {
                    VisualStateManager.GoToState(layoutAwareControl, visualState, false);
                }
            }
        }

画面モードごとに対応したレイアウトに変更してくれるクラス

さらに、Windows ストアアプリでは欠かすことのできないナビゲーションもサポートされております。

        protected virtual void GoHome(object sender, RoutedEventArgs e)
        {
            // ナビゲーション フレームを使用して最上位のページに戻ります
            if (this.Frame != null)
            {
                while (this.Frame.CanGoBack) this.Frame.GoBack();
            }
        }

メインページにナビゲーションしてくれるクラス

このように、数多くのイベントを設定してくれている「LayoutAwarePage クラス」を使うことで、ページの開発コストが一気に短縮されます。

２．不要なファイルの削除

今のファイル構成では、サンプル状態です。
今後、自分で新しく作成するために、不要となるファイルを削除します。

削除対象

~/DataModel/SampleDataSource.cs
~/ItemsPage.xaml
~/ItemsPage.xaml.cs
~/SplitPage.xaml
~/SplitPage.xaml.cs

３．新しいメインページの作成

次に、メインページとなるファイルを作成します。

プロジェクトを右クリック＞追加＞新しい項目

作成する新しい項目は「基本ページ」です。

基本ページは、上記で述べた「LayoutAwarePage クラス」を継承したページです。
空白のページ、通常の「Page クラス」を継承したページです。

このままでは、まだビルドするとエラーになるので App.xaml.cs にルートページの設定を反映させます。

L.80   if (!rootFrame.Navigate(typeof(MainPage), "AllGroups"))

これでメインページの設定が完了です。

シミュレータを実行するとこんな感じ

以上で、基本ベースとなるプロジェクトが完成しました。
次回は、さらにストアアプリを簡単作るために、スナップの簡易設定について書きます。

テンプレート化にしておくと良い