Windows Phone Silverlight から UWP へのケース スタディ: Bookstore1

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

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

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

注 Visual Studio で Bookstore1Universal_10 を開こうとすると、"Visual Studio 更新プログラムが必要" というメッセージが表示される場合は、「TargetPlatformVersion」の手順に従って、ターゲット プラットフォームのバージョン番号を選択してください。

ダウンロード

Bookstore1WPSL8 Windows Phone Silverlight アプリをダウンロード。

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

Windows Phone Silverlight アプリ

Bookstore1WPSL8 (移植するアプリ) は次のようになります。 これは、アプリの名前とページ タイトルの見出しの下にある書籍の垂直方向にスクロールするリスト ボックスです。

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

Visual Studio で新しいプロジェクトを作成し、Bookstore1WPSL8 からファイルをコピーして、コピーしたファイルを新しいプロジェクトに含めるのは非常に簡単な作業です。 まず、新しい空のアプリケーション (Windows ユニバーサル) プロジェクトを作成します。 そして、"Bookstore1Universal_10" という名前を付けます。 これらは、Bookstore1WPSL8 から Bookstore1Universal_10 にコピーするファイルです。

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

Windows 10 プロジェクトで Visual Studio によって生成された App.xaml とApp.xaml.csを保持できます。

コピーしたソース コードとマークアップ ファイルを編集し、Bookstore1WPSL8 名前空間への参照をすべて、Bookstore1Universal_10 に変更します。 これを行う簡単な方法は、 ファイル内の配置 機能を使用することです。 ビュー モデル ソース ファイルの命令型コードでは、次の移植の変更が必要です。

• System.ComponentModel.DesignerPropertiesを DesignMode に変更し、Resolve コマンドを使用します。 IsInDesignTool プロパティを削除し、IntelliSense を使用して正しいプロパティ名 (DesignModeEnabled) を追加します。
• ImageSourceで Resolve コマンドを使用します。
• BitmapImageで Resolve コマンドを使用します。
• System.Windows.Media;とusing System.Windows.Media.Imaging;を使用して削除します。
• Bookstore1Universal_10.BookstoreViewModel.AppName プロパティによって返された値を "BOOKSTORE1WPSL8" から "BOOKSTORE1UNIVERSAL" に変更します。

MainPage.xaml では、次の移植の変更が必要です。

• phone:PhoneApplicationPageをPageに変更します (プロパティ要素構文の出現を忘れないでください)。
• phoneとshell名前空間プレフィックス宣言を削除します。
• 残りの名前空間プレフィックス宣言で "clr-namespace" を "using" に変更します。

マークアップを一時的に削除することを意味する場合でも、結果を最も早く表示したい場合は、マークアップコンパイルエラーを非常に安く修正することができます。 しかし、そうすることで発生した負債の記録を保持しましょう。 ここでは、この場合です。

1. MainPage.xaml のルート Page 要素で、SupportedOrientations="Portrait"を削除します。
2. MainPage.xaml のルート Page 要素で、Orientation="Portrait"を削除します。
3. MainPage.xaml のルート Page 要素で、shell:SystemTray.IsVisible="True"を削除します。
4. BookTemplate データ テンプレートで、PhoneTextExtraLargeStyleおよび PhoneTextSubtleStyleTextBlock スタイルへの参照を削除します。
5. TitlePanelStackPanelで、PhoneTextNormalStyle および PhoneTextTitle1StyleTextBlock スタイルへの参照を削除します。

まずモバイル デバイス ファミリの UI で作業しましょう。その後、他のフォーム ファクターを検討できます。 これで、アプリをビルドして実行できます。 モバイル エミュレーターでの外観を次に示します。

ビューとビュー モデルが正常に連携しており、 ListBox が機能しています。 ほとんどの場合、スタイルを修正し、画像を表示する必要があります。

債務明細の返済と、いくつかの初期スタイル設定

既定では、すべての向きがサポートされています。 ただし、Windows Phone Silverlight アプリでは、自身を縦向きのみに明示的に制限します。したがって、新しいプロジェクト内のアプリ パッケージ マニフェストに含め、[サポートされる向き] で [縦] をオンにすることにより、削除した項目 #1 および #2 を元に戻します。

このアプリでは、ステータス バー (以前はシステム トレイと呼ばれていました) が既定で示されるので、項目 #3 は元に戻す必要はありません。 項目 #4 および #5 では、使っていた Windows Phone Silverlight スタイルに対応する 4 つのユニバーサル Windows プラットフォーム (UWP) TextBlock スタイルを検索する必要があります。 エミュレーターで Windows Phone Silverlight アプリを実行し、 Text セクションの図と並べて比較できます。 それを行うことから、Windows Phone Silverlight システム スタイルのプロパティを見てから、このテーブルを作成できます。

Windows Phone Silverlight スタイル キー	UWP スタイル キー
PhoneTextExtraLargeStyle	TitleTextBlockStyle
PhoneTextSubtleStyle	SubtitleTextBlockStyle
PhoneTextNormalStyle	CaptionTextBlockStyle
PhoneTextTitle1Style	HeaderTextBlockStyle

これらのスタイルを設定するには、マークアップ エディターに入力するか、Visual Studio XAML ツールを使用して、何も入力せずに設定できます。 これを行うには、TextBlockを右クリックし、[スタイル>Apply リソース編集] をクリック。 アイテム テンプレートの TextBlock を使用してこれを行うには、 ListBox を右クリックし、[ 追加テンプレートの編集>生成された項目の編集 (ItemTemplate)) をクリックします。

ListBox コントロールの既定のスタイルは、その背景をListBoxBackgroundThemeBrushシステム リソースに設定するため、項目の背後には 80% の不透明な白い背景があります。 ListBoxのBackground="Transparent"を設定して背景をクリアします。 項目テンプレートのTextBlockを左揃えにするには、上記と同じ方法でもう一度編集し、両方のTextBlockに"9.6,0"のMarginを設定します。

その後、 表示ピクセルに関連する変更があるためまだ変更していない固定サイズディメンション (余白、幅、高さなど) を 0.8 で乗算する必要があります。 そのため、たとえば、イメージは 70 x 70px から 56 x 56px に変更する必要があります。

ただし、スタイル設定の結果を表示する前に、それらのイメージをレンダリングしてみましょう。

ビュー モデルへのイメージのバインド

Bookstore1WPSL8 では、次の操作を行いました。

    // this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
    return new BitmapImage(new Uri(this.CoverImagePath, UriKind.Relative));

Bookstore1Universal では、ms-appx URI スキームを使用します。 コードの残りの部分を同じ状態に保つために、 System.Uri コンストラクターの異なるオーバーロードを使用して、ms-appx URI スキームをベース URI に配置し、その上に残りのパスを追加できます。 例:

    // this.BookCoverImagePath contains a path of the form "/Assets/CoverImages/one.png".
    return new BitmapImage(new Uri(new Uri("ms-appx://"), this.CoverImagePath));

ユニバーサル スタイル

ここで、最終的なスタイル調整を行い、アプリがデスクトップ (およびその他) のフォーム ファクターとモバイルで適切に表示されることを確認する必要があります。 手順は次のとおりです。 また、このトピックの上部にあるリンクを使用して、プロジェクトをダウンロードし、ケース スタディの最後までのすべての変更の結果を確認できます。

• 項目間の間隔を調整するには、MainPage.xaml でBookTemplate データ テンプレートを見つけ、ルート Grid からMargin属性を削除します。
• ページ タイトルにもう少し息を吹き込むスペースを与える場合は、ページ タイトル TextBlock の0に-5.6の下余白をリセットできます。
• 次に、 LayoutRootの背景を正しい既定値に設定し、テーマに関係なくすべてのデバイスでアプリが適切に実行されるようにする必要があります。 "Transparent"から"{ThemeResource ApplicationPageBackgroundThemeBrush}"に変更します。

より洗練されたアプリでは、これは、フォーム ファクターとユーザー エクスペリエンスの のガイダンスを使用し アプリが実行できる多数のデバイスのフォーム ファクターを実際に最適に使用するポイントになります。 ただし、この単純なアプリでは、ここで停止し、スタイル設定操作の最後のシーケンスの後にアプリがどのように表示されるかを確認できます。 モバイルデバイスとデスクトップデバイスでは実際には同じように見えますが、広いフォームファクターではスペースを最大限に活用していません(ただし、後のケーススタディでそれを行う方法を調査します)。

アプリのテーマを制御する方法については、「 テーマの変更 を参照してください。

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

モバイル デバイスのリスト ボックスに対するオプションの調整

モバイル デバイスでアプリが実行されている場合、リスト ボックスの背景は両方のテーマで既定で明るくなっています。 それはあなたが好むスタイルかもしれませんし、もしそうなら、それ以上何もする必要はありません。 ただし、コントロールは、動作に影響を与えないようにしながら外観をカスタマイズできるように設計されています。 そのため、元のアプリの外観であるダーク テーマでリスト ボックスを暗くする場合は、[オプションの調整] の下これらの指示に従います。

まとめ

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

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