次の方法で共有

Windows ランタイム 8.x から UWP へのケース スタディ: Bookstore1

  • [アーティクル]

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

移植するアプリは、ビュー モデルにバインドされた ListBox で構成されます。 ビュー モデルには、タイトル、著者、書籍の表紙を示す書籍の一覧があります。 ブック カバー イメージには、Build アクション Content に設定され、Copy を出力ディレクトリに設定コピーしない。

このセクションの前のトピックでは、プラットフォーム間の違いについて説明し、XAML マークアップからビュー モデルへのバインド、データへのアクセスまで、アプリのさまざまな側面の移植プロセスの詳細とガイダンスを提供します。 ケース スタディは、実際の例で動作を示すことで、そのガイダンスを補完することを目的としています。 ケース スタディでは、ガイダンスを読んだことを前提としていますが、これらは繰り返されません。

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

ダウンロード

Bookstore1_81 ユニバーサル 8.1 アプリをダウンロードします。

Bookstore1Universal_10 Windows 10 アプリをダウンロードします。

ユニバーサル 8.1 アプリ

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

bookstore1-81 がウィンドウでどのように表示されるか

Windows での Bookstore1_81

bookstore1-81 が Windows Phone でどのように表示されるか

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) をコピーします。 フォルダーをコピーした後、ソリューション エクスプローラーで、[すべてのファイル表示] がオンになっていることを確認。 コピーしたフォルダーを右クリックし、[ プロジェクト内を含む] をクリックします。 このコマンドは、プロジェクト内のファイルまたはフォルダーを "含む" ことを意味します。 ファイルまたはフォルダーをコピーするたびに、各コピーをソリューション エクスプローラーRefreshをクリックし、プロジェクトにファイルまたはフォルダーを含めます。 変換先で置き換えるファイルに対してこれを行う必要はありません。
  • ビュー モデル ソース ファイルを含むフォルダー (フォルダーは \ViewModel) をコピーします。
  • MainPage.xaml をコピーし、コピー先のファイルを置き換えます。

Windows プロジェクトから

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

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

現時点では、ビルドと実行が可能です。 Windows 10 に移植するための明示的な作業を行っていない新しい UWP アプリの外観を次に示します。

明示的な変更がない Windows 10 アプリのスクリーンショット。

デスクトップ デバイスで実行されている初期ソース コードの変更を含む 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 データ テンプレートを見つけ、ルート Grid からMargin="0,0,0,8"を削除します。
  • また、 BookTemplateには、 BookTemplateTitleTextBlockStyle と BookTemplateAuthorTextBlockStyleへの参照があります。 Bookstore1_81 は、それらのキーを間接参照として使うため、2 つのアプリで 1 つのキーの実装が異なります。 この間接参照はこれ以上必要ありません。システム スタイルを直接参照できます。 そのため、これらの参照をそれぞれ TitleTextBlockStyle と SubtitleTextBlockStyleに置き換えます。
  • 次に、 LayoutRootの背景を正しい既定値に設定し、テーマに関係なくすべてのデバイスでアプリが適切に実行されるようにする必要があります。 "Transparent"から"{ThemeResource ApplicationPageBackgroundThemeBrush}"に変更します。
  • TitlePanelで、参照を TitleTextBlockStyle (これは少し大きすぎます) に変更し、CaptionTextBlockStyleへの参照に変更します。 PageTitleTextBlockStyle も、もう不要になった Bookstore1_81 間接参照です。 代わりに、 HeaderTextBlockStyle を参照するように変更します。
  • ListBoxで特別な背景、スタイル、ItemContainerStyle を設定する必要がなくなったので、マークアップからこれらの 3 つの属性とその値を削除するだけです。 ただし、 ListBoxの境界線を非表示にするため、 BorderBrush="{x:Null}" を追加します。
  • BookstoreStyles.xaml ResourceDictionary ファイル内のどのリソースも参照していません。 これらのリソースはすべて削除できます。 ただし、BookstoreStyles.xaml ファイル自体は削除しないでください。次のセクションで説明するように、最後に使用するものがまだ 1 つ残っています。

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

スタイル設定操作の最後のシーケンスを含むアプリのスクリーンショット。

デスクトップ デバイスで実行されている、ほぼ移植された Windows 10 アプリ

ほぼ移植された 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分離コード ファイル (該当する場合) を共有していることに注意してください。

リスト ボックスのコントロール テンプレートのコピーを編集し、新しいリソース ディクショナリ BookstoreStyles.DeviceFamily-Mobile.xaml に BookstoreListBoxStyle キーを使用して保存します。 ここでは、3 つのセッターに簡単な変更を加えます。

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

最後に、 BookstoreListBoxStyle を BookstoreStyles.xaml にコピーし、その 3 つのセッターを削除して、空のタグにします。 Mobile 以外のデバイスでは、BookstoreStyles.xaml への参照と BookstoreListBoxStyle への参照が解決されますが、効果がないようにします。

移植された Windows 10 アプリ

モバイル デバイスで実行されている移植された Windows 10 アプリ

まとめ

このケース スタディでは、非常に単純なアプリを移植するプロセスを示しました。間違いなく非現実的に単純なアプリです。 たとえば、リスト ボックスは、選択やナビゲーションのコンテキストの確立に使用できます。アプリは、タップされたアイテムに関する詳細を含むページに移動します。 この特定のアプリは、ユーザーの選択には何も行いません。また、ナビゲーションもありません。 それでも、ケース スタディは、氷を打ち破り、移植プロセスを導入し、実際の UWP アプリで使用できる重要な手法を示すために役立ちます。

また、ビュー モデルの移植が一般的にスムーズなプロセスであるという証拠も見ました。 ユーザー インターフェイスとフォーム ファクターのサポートは、移植時に注意が必要となる可能性が高い側面です。

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