Windows ランタイム 8 からユニバーサル Windows プラットフォーム (UWP) へのケース スタディ: Bookstore1

[一部の情報はリリース前の製品に関することであり、正式版がリリースされるまでに大幅に変更される可能性があります。本書に記載された情報について、Microsoft は明示または黙示を問わずいかなる保証をするものでもありません。]

このトピックでは、シンプルなユニバーサル 8.1 アプリを Windows 10 ユニバーサル Windows プラットフォーム (UWP) アプリへ移植するケース スタディについて説明します。ユニバーサル 8.1 アプリは、Windows 8.1 用のアプリ パッケージと、Windows Phone 8.1 用の別のアプリ パッケージをビルドするアプリです。Windows 10 では、さまざまなデバイスにユーザーがインストールできる単一のアプリ パッケージを作成できます。このようなアプリ パッケージの作成を、このケース スタディで取り上げます。「UWP アプリのガイド」をご覧ください。

移植するアプリは、ビュー モデルにバインドされた ListBox から成ります。ビュー モデルにはタイトル、著者、表紙を示す書籍の一覧が含まれます。表紙画像では、[ビルド アクション] が [コンテンツ] に設定され、[出力ディレクトリにコピー] が [コピーしない] に設定されています。

このセクションの前のトピックでは、プラットフォーム間の違いについて説明し、ビュー モデルへのバインドを通じて、データへのアクセスに至るまで、XAML マークアップからのアプリのさまざまな要素に対する移植プロセスの詳細とガイダンスを提供しました。ケース スタディでは、実際の例が動作するようすを示すことにより、このガイダンスを補足することを目的としています。ケース スタディは、ガイダンスを読み終わっていることを前提としているため、繰り返し説明することはありません。

注  Bookstore1Universal_10 で Visual Studio を開くときに、"Visual Studio 更新プログラムが必要" というメッセージが表示されたら、「TargetPlatformVersion」の手順を実行してください。

ダウンロード

Bookstore1_81 ユニバーサル 8.1 アプリのダウンロード。

Bookstore1Universal_10 Windows 10 アプリのダウンロード。

ユニバーサル 8.1 アプリ

次に、ここで移植するアプリ Bookstore1_81 の外観を示します。これは単に、アプリ名とページ タイトルの見出しの下に縦方向にスクロールする書籍のリスト ボックスを示すアプリです。

Windows での Bookstore1_81

 

Windows Phone での Bookstore1_81

Windows 10 プロジェクトへの移植

Bookstore1_81 ソリューションは、8.1 ユニバーサル アプリ プロジェクトであり、次のプロジェクトを含んでいます。

• Bookstore1_81.Windows。これは、Windows 8.1 用アプリ パッケージを構築するプロジェクトです。
• Bookstore1_81.WindowsPhone。これは、Windows Phone 8.1 用アプリ パッケージを構築するプロジェクトです。
• Bookstore1_81.Shared。これは、他の 2 つのプロジェクトの両方で使用されるソース コード、マークアップ ファイル、およびその他の資産とリソースを含むプロジェクトです。

このケース スタディでは、サポートするデバイスに関して、「ユニバーサル 8.1 アプリがある場合」で説明した通常のオプションを使います。ここでの決定は単純なものです。このアプリの機能は、Windows 8.1 と Windows Phone 8.1 の両方の形式で同じであり、そのためのコードもほぼ同じです。したがって、共有プロジェクトのコンテンツ (および他方のプロジェクトのコンテンツのうち、必要なもの) を、ユニバーサル デバイス ファミリを対象とする Windows 10 のアプリに移植します (さまざまなデバイスにインストールできるようになります)。

Visual Studio で新しいプロジェクトを作成し、そこへ Bookstore1_81 からファイルをコピーし、コピーしたファイルを新しいプロジェクトに含めるというタスクは、非常に短時間で実行できます。最初に、"新しいアプリケーション (Windows ユニバーサル)" プロジェクトを新規作成します。そして、"Bookstore1Universal_10" という名前を付けます。これらは、Bookstore1_81 から Bookstore1Universal_10 にコピーするファイルです。

共有プロジェクトから

• ブック カバーの画像の PNG ファイルを含むフォルダー (フォルダーは \Assets\CoverImages) をコピーします。コピーしたら、ソリューション エクスプローラーで [すべてのファイルを表示] がオンであることを確認します。コピーしたフォルダーを右クリックし、[プロジェクトに含める] をクリックします。このコマンドは、ファイルまたはフォルダーをプロジェクトに "含める" ことを意味します。ファイルやフォルダーをコピーするたびに、ソリューション エクスプ ローラーで [更新] をクリックしてから、ファイルまたはフォルダーをプロジェクトに含めます。コピー先で置き換えるファイルについては、この手順を実行する必要はありません。
• ビュー モデル ソース ファイルを含むフォルダー (フォルダーは \ViewModel) をコピーします。
• MainPage.xaml をコピーして、コピー先のファイルを置き換えます。

Windows プロジェクトから

• BookstoreStyles.xaml をコピーします。このファイル内のすべてのリソース キーが Windows 10 アプリで解決されるため、このファイルを出発点として使います。ただし、同等の WindowsPhone ファイル内にある一部のリソース キーは解決されません。

コピーしたソース コードとマークアップ ファイルを編集し、Bookstore1_81 名前空間への参照をすべて、Bookstore1Universal_10 に変更します。これをすばやく行うには、[フォルダーを指定して置換] 機能を使います。ビュー モデルでも、その他の命令型コードでも、コードを変更する必要はありません。ただし、どのバージョンのアプリが実行されているかをわかりやすくするために、Bookstore1Universal_10.BookstoreViewModel.AppName プロパティによって返される値を、"BOOKSTORE1_81" から "BOOKSTORE1UNIVERSAL_10" に変更します。

これで、ビルドして実行することができます。新しい UWP アプリの外観は、Windows 10 へ移植するための具体的な作業をまだ行っていませんが、次のようになります。

デスクトップ デバイスで動作中の、最初のソース コードの変更を加えた Windows 10 アプリ

 

モバイル デバイスで動作中の、最初のソース コードの変更を加えた Windows 10 アプリ

ビューおよびビュー モデルは、適切に連携しており、ListBox が機能しています。修正が必要なのは、スタイル設定だけです。淡色テーマのモバイル デバイスでは、リスト ボックスの境界線が表示されますが、これは、簡単に非表示にすることができます。そして、文字体裁が大きすぎるため、ここで使うスタイルを変更します。また、既定のような外観にしたい場合は、デスクトップ デバイスでの実行時のアプリの色を淡色にする必要があります。では、それを変更しましょう。

ユニバーサル スタイル設定

Bookstore1_81 アプリでは、Windows 8.1 と Windows Phone 8.1 のオペレーティング システムに合わせてそのスタイルを調整するために、2 つの異なるリソース ディクショナリ (BookstoreStyles.xaml) を使用しました。この 2 つの BookstoreStyles.xaml ファイルのどちらにも、Windows 10 アプリで必要となる適切なスタイルは含まれていません。ただし、さいわいなことに、目的としているのは、そのどちらよりもはるかに単純なスタイルです。したがって、以降の手順で行うのはほとんど、プロジェクト ファイルとマークアップの削除と簡素化の作業です。手順は次のとおりです。このトピックの上部にあるリンクを使用して、プロジェクトをダウンロードし、この時点とケース スタディの終了時の間のすべての変更の結果を参照できます。

• 項目間のスペースを縮めるために、MainPage.xaml で BookTemplate データ テンプレートを検索し、Margin="0,0,0,8" をルート Grid から削除します。
• また、BookTemplate には、BookTemplateTitleTextBlockStyle と BookTemplateAuthorTextBlockStyle への参照があります。Bookstore1_81 は、それらのキーを間接参照として使うため、2 つのアプリで 1 つのキーの実装が異なります。その間接参照は、必要ではなくなりました。システム スタイルを直接参照できます。そこで、これらの参照をそれぞれ、TitleTextBlockStyle と SubtitleTextBlockStyle で置き換えます。
• ここで、LayoutRoot の Background を適切な既定値に設定して、テーマが何であるかに関係なく、すべてのデバイスでの実行時にアプリが適切に表示されるようにする必要があります。これを、"Transparent" から "{ThemeResource ApplicationPageBackgroundThemeBrush}" に変更します。
• TitlePanel で、TitleTextBlockStyle (今では少し大きすぎる) への参照を CaptionTextBlockStyle への参照に変更します。PageTitleTextBlockStyle も、もう不要になった Bookstore1_81 間接参照です。これは、代わりに HeaderTextBlockStyle を参照するように変更します。
• ListBox で特別な Background、Style、ItemContainerStyle を設定する必要はなくなったので、この 3 つの属性とその値をマークアップから削除します。しかし、ListBox の境界線を非表示にする必要があるため、これに BorderBrush="{x:Null}" を追加します。
• BookstoreStyles.xaml ResourceDictionary ファイル内のリソースはすべて、参照されなくなります。これらのリソースはすべて削除できます。ただし、BookstoreStyles.xaml ファイル自体を削除しないでください。次のセクションで示すように、まだ、最後の用途があります。

スタイル設定操作の最後のシーケンスで、アプリの外観は次のようになります。

デスクトップ デバイスで動作中の、ほとんどの移植が行われた Windows 10 アプリ

 

モバイル デバイスで動作中の、ほとんどの移植が行われた Windows 10 アプリ

モバイル デバイス向けのリスト ボックスの調整 (オプション)

モバイル デバイスでのアプリの実行中には、両方のテーマで既定で、リスト ボックスの背景は淡色です。このスタイルを使うことができます。使う場合は、整理以外の作業はありません。つまり、BookstoreStyles.xaml リソース ディクショナリ ファイルと、それを MainPage.xaml にマージするマークアップをプロジェクトから削除するだけです。

コントロールは、動作に影響を及ぼすことなく、表示形式をカスタマイズできるように設計されています。元のアプリの外観のように、濃色のテーマでリスト ボックスを濃色にする場合は、次のセクションでその方法を説明します。

変更がアプリに影響する必要があるのは、モバイル デバイスでの実行時だけです。そのため、モバイル デバイス ファミリーの実行時には、わずかにカスタマイズしたリスト ボックスのスタイルを使い、それ以外のすべての実行時には、既定のスタイルを引き続き使います。これを行うには、BookstoreStyles.xaml のコピーを作成し、それに、特別な MRT 修飾名を付けて、モバイル デバイスでのみ読み込まれるようにします。

新しい ResourceDictionary プロジェクト項目を追加し、BookstoreStyles.DeviceFamily Mobile.xaml という名前を付けます。これで、両方の論理名が BookstoreStyles.xaml (これが、マークアップとコードで使用する名前です) である 2 つのファイルができました。ただし、これらのファイルの物理名は異なっているため、異なるマークアップを含めることができます。この MRT 修飾名の命名規則は、どの xaml ファイルでも使用できますが、同じ論理名を持つすべての xaml ファイルは、1 つの xaml.cs コード ビハインド ファイルを共有することに注意してください (この場合、適用されるのは 1 つです)。

リスト ボックスのコントロール テンプレートのコピーを編集し、新しいリソース ディクショナリである BookstoreStyles.DeviceFamily Mobile.xaml 内の BookstoreListBoxStyle キーで保存します。今度は、setter のうち、3 つに単純な変更を加えます。

• Foreground setter で、値を "{x:Null}" に変更します。プロパティを要素で直接、"{x:Null}" に設定することは、コードで null に設定することと同じであることに注意してください。ただし、"{x:Null}" の値を setter で使うと、独自の効果があります。既定のスタイルで (同じプロパティの) setter がオーバーライドされ、ターゲット要素でプロパティの既定値が復元されます。
• Background setter で、値を "Transparent" に変更して、その淡色の背景を削除します。
• Template setter で、Focused という名前の表示状態を見つけ、そのストーリー ボードを削除して空のタグにします。
• その他のすべての setter をマークアップから削除します。

最後に、BookstoreListBoxStyle を BookstoreStyles.xaml にコピーし、その 3 つの setter を削除して、空のタグにします。このようにすると、モバイル以外のデバイスで、BookstoreStyles.xaml と BookstoreListBoxStyle への参照が解決されますが、その影響はありません。

モバイル デバイスで動作中の、移植された Windows 10 アプリ

まとめ

このケース スタディでは、非常に単純なアプリ (おそらく非現実的に単純なアプリ) を移植するプロセスを示しました。たとえば、リスト ボックスは、選択用またはナビゲーション コンテキストの確立用に使うことができます。アプリは、タップされた項目に関する詳細を提示するページに移動します。 この特定のアプリは、ユーザーの選択に対して何も処理せず、またナビゲーション機能がありません。それでも、このケース スタディは、まず移植プロセスを導入し、実際の UWP アプリで使うことができる重要な手法をデモする役割を果たします。

また、新しいビュー モデルを移行することは、概してスムーズなプロセスであることを確認しました。ただし、ユーザー インターフェイスや、フォーム ファクターのサポートは、移植する際に注意が必要と考えられる項目です。

次のケース スタディは「Bookstore2」です。ここでは、グループ化されたデータへのアクセスと表示について説明します。