UWP のケース スタディ「Windows Phone Silverlight:Bookstore1Windows Phone Silverlight to UWP case study: Bookstore1

このトピックでは、Windows 10 ユニバーサル Windows プラットフォーム (UWP) アプリへの非常に単純な Windows Phone Silverlight アプリの移植のケース スタディを表示します。This topic presents a case study of porting a very simple Windows Phone Silverlight app to a Windows 10 Universal Windows Platform (UWP) app. Windows 10 ではパッケージを作成する 1 つのアプリをさまざまなデバイス、上に顧客をインストールし、このケース スタディでは何です。With Windows 10, you can create a single app package that your customers can install onto a wide range of devices, and that's what we'll do in this case study. UWP アプリのガイド」をご覧ください。See Guide to UWP apps.

移植するアプリは、ビュー モデルにバインドされた ListBox で構成されます。The app we'll port consists of a ListBox bound to a view model. ビュー モデルにはタイトル、著者、表紙を示す書籍の一覧が含まれます。The view model has a list of books that shows title, author, and book cover. 表紙画像では、 [ビルド アクション][コンテンツ] に設定され、 [出力ディレクトリにコピー][コピーしない] に設定されています。The book cover images have Build Action set to Content and Copy to Output Directory set to Do not copy.

このセクションの前のトピックでは、プラットフォーム間の違いについて説明し、ビュー モデルへのバインドを通じて、データへのアクセスに至るまで、XAML マークアップからのアプリのさまざまな要素に対する移植プロセスの詳細とガイダンスを提供しました。The previous topics in this section describe the differences between the platforms, and they give details and guidance on the porting process for various aspects of an app from XAML markup, through binding to a view model, down to accessing data. ケース スタディでは、実際の例が動作するようすを示すことにより、このガイダンスを補足することを目的としています。A case study aims to complement that guidance by showing it in action in a real example. ケース スタディは、ガイダンスを読み終わっていることを前提としているため、繰り返し説明することはありません。The case studies assume you've read the guidance, which they do not repeat.

   Bookstore1Universal を開くときに_"Visual Studio の更新に必要な"メッセージを表示する場合、Visual Studio での 10 でのターゲット プラットフォーム バージョン管理の選択の手順に従ってTargetPlatformVersionします。Note   When opening Bookstore1Universal_10 in Visual Studio, if you see the message "Visual Studio update required", then follow the steps for selecting a Target Platform Versioning in TargetPlatformVersion.

ダウンロードDownloads

ダウンロード Bookstore1WPSL8 の Windows Phone Silverlight アプリします。Download the Bookstore1WPSL8 Windows Phone Silverlight app.

ダウンロード、Bookstore1Universal_10 の Windows 10 アプリします。Download the Bookstore1Universal_10 Windows 10 app.

Windows Phone Silverlight アプリThe Windows Phone Silverlight app

次に、ここで移植するアプリ Bookstore1WPSL8 の外観を示します。Here’s what Bookstore1WPSL8—the app that we're going to port—looks like. これは、アプリ名とページ タイトルの見出しの下に、縦方向にスクロールする書籍のリスト ボックスを示すシンプルなアプリです。It's just a vertically-scrolling list box of books beneath the heading of the app's name and page title.

bookstore1wpsl8 の外観

Windows 10 プロジェクトへの移植Porting to a Windows 10 project

Visual Studio で新しいプロジェクトを作成し、そこへ Bookstore1WPSL8 からファイルをコピーし、コピーしたファイルを新しいプロジェクトに含めるというタスクは、非常に短時間で実行できます。It's a very quick task to create a new project in Visual Studio, copy files over to it from Bookstore1WPSL8, and include the copied files in the new project. 最初に、"新しいアプリケーション (Windows ユニバーサル)" プロジェクトを新規作成します。Start by creating a new Blank Application (Windows Universal) project. 名前を付けます Bookstore1Universal_10。Name it Bookstore1Universal_10. これらの Bookstore1Universal Bookstore1WPSL8 から経由でコピーするファイルは_10。These are the files to copy over from Bookstore1WPSL8 to Bookstore1Universal_10.

  • 書籍カバーの画像の PNG ファイルを含むフォルダーにコピー (フォルダーが\資産\CoverImages)。Copy the folder containing the book cover image PNG files (the folder is \Assets\CoverImages). フォルダーをコピーしたら、ソリューション エクスプローラー[すべてのファイルを表示] がオンであることを確認します。After copying the folder, in Solution Explorer, make sure Show All Files is toggled on. コピーしたフォルダーを右クリックし、 [プロジェクトに含める] をクリックします。Right-click the folder that you copied and click Include In Project. このコマンドは、ファイルまたはフォルダーをプロジェクトに "含める" ことを意味します。That command is what we mean by "including" files or folders in a project. ファイルやフォルダーをコピーするたびに、ソリューション エクスプローラー[更新] をクリックしてから、ファイルまたはフォルダーをプロジェクトに含めます。Each time you copy a file or folder, click Refresh in Solution Explorer and then include the file or folder in the project. コピー先で置き換えるファイルについては、この手順を実行する必要はありません。There's no need to do this for files that you're replacing in the destination.
  • ビュー モデルのソース ファイルを含むフォルダーをコピー (フォルダーが\ViewModel)。Copy the folder containing the view model source file (the folder is \ViewModel).
  • MainPage.xaml をコピーして、コピー先のファイルを置き換えます。Copy MainPage.xaml and replace the file in the destination.

私たちは、App.xaml、および Visual Studio によって生成された Windows 10 プロジェクトで App.xaml.cs を保持できます。We can keep the App.xaml, and App.xaml.cs that Visual Studio generated for us in the Windows 10 project.

コピーしたソース コードとマークアップ ファイルを編集して Bookstore1Universal に Bookstore1WPSL8 名前空間への参照を変更_10。Edit the source code and markup files that you just copied and change any references to the Bookstore1WPSL8 namespace to Bookstore1Universal_10. これをすばやく行うには、 [フォルダーを指定して置換] 機能を使います。A quick way to do that is to use the Replace In Files feature. ビュー モデルのソース ファイルに含まれている命令型コードでは、移植作業のために次の変更を行う必要があります。In the imperative code in the view model source file, these porting changes are needed:

  • System.ComponentModel.DesignerPropertiesDesignMode に変更した後、これに対して [解決] コマンドを使います。Change System.ComponentModel.DesignerProperties to DesignMode and then use the Resolve command on it. IsInDesignTool プロパティを削除し、IntelliSense を使って適切なプロパティ名 (DesignModeEnabled) を追加します。Delete the IsInDesignTool property and use IntelliSense to add the correct property name: DesignModeEnabled.
  • ImageSource に対して [解決] コマンドを使います。Use the Resolve command on ImageSource.
  • BitmapImage に対して [解決] コマンドを使います。Use the Resolve command on BitmapImage.
  • using System.Windows.Media;using System.Windows.Media.Imaging; を削除します。Delete using System.Windows.Media; and using System.Windows.Media.Imaging;.
  • によって返される値の変更、 Bookstore1Universal_10.BookstoreViewModel.AppNameプロパティを"BOOKSTORE1WPSL8"から"BOOKSTORE1UNIVERSAL"にします。Change the value returned by the Bookstore1Universal_10.BookstoreViewModel.AppName property from "BOOKSTORE1WPSL8" to "BOOKSTORE1UNIVERSAL".

MainPage.xaml では、移植作業のために次の変更を行う必要があります。In MainPage.xaml, these porting changes are needed:

  • phone:PhoneApplicationPagePage に変更します (プロパティ要素構文での使用回数を考慮してください)。Change phone:PhoneApplicationPage to Page (don't forget the occurrences in property element syntax).
  • phoneshell の名前空間のプレフィックス宣言を削除します。Delete the phone and shell namespace prefix declarations.
  • その他の名前空間のプレフィックス宣言で、"clr-namespace" を "using" に変更します。Change "clr-namespace" to "using" in the remaining namespace prefix declaration.

一時的にマークアップを削除することになっても、すぐに結果を確認したい場合は、マークアップ コンパイル エラーを非常に単純に修正することもできます。We can choose to correct markup compilation errors very cheaply if we want to see results soonest, even if that means temporarily removing markup. ただしここでは、そうすることでとりあえず先に進み、後で見直すことにしましょう。But, let's keep a record of the debt we accrue by doing so. 次に、このための手順を示します。Here it is in this case.

  1. MainPage.xaml のルート Page 要素で、SupportedOrientations="Portrait" を削除します。In the root Page element in MainPage.xaml, delete SupportedOrientations="Portrait".
  2. MainPage.xaml のルート Page 要素で、Orientation="Portrait" を削除します。In the root Page element in MainPage.xaml, delete Orientation="Portrait".
  3. MainPage.xaml のルート Page 要素で、shell:SystemTray.IsVisible="True" を削除します。In the root Page element in MainPage.xaml, delete shell:SystemTray.IsVisible="True".
  4. BookTemplate データ テンプレートで、PhoneTextExtraLargeStyle および PhoneTextSubtleStyle の  TextBlock スタイルへの参照を削除します。In the BookTemplate data template, delete the references to the PhoneTextExtraLargeStyle and PhoneTextSubtleStyleTextBlock styles.
  5. TitlePanelStackPanel で、PhoneTextNormalStyle および PhoneTextTitle1Style の  TextBlock スタイルへの参照を削除します。In the TitlePanelStackPanel, delete the references to the PhoneTextNormalStyle and PhoneTextTitle1StyleTextBlock styles.

最初にモバイル デバイス ファミリの UI の作業を行い、その後でその他のフォーム ファクターについて検討します。Let's work on the UI for the mobile device family first, and we can consider other form factors after that. これで、アプリをビルドして実行できるようになりました。You can build and run the app now. モバイル エミュレーターでは次のように表示されます。Here's how it looks on the mobile emulator.

最初のソース コードの変更を加えたモバイルの UWP アプリ

ビューおよびビュー モデルは、適切に連携しており、ListBox が機能しています。The view and the view model are working together correctly, and the ListBox is functioning. ほとんどの場合、若干スタイルを修正して、画像を表示する必要があります。We mostly just need to fix the styling and get the images to show up.

削除した項目と一部の初期スタイルを戻すPaying off the debt items, and some initial styling

既定では、すべての向きがサポートされます。By default, all orientations are supported. 自体は、Windows Phone Silverlight アプリが明示的に制約を縦専用に、その負債項目#1 と#2 が新しいプロジェクトで、アプリ パッケージのマニフェストに移動し完済 向きをサポートされているします。The Windows Phone Silverlight app explicitly constrains itself to portrait-only, though, so debt items #1 and #2 are paid off by going into the app package manifest in the new project and checking Portrait under Supported orientations.

このアプリでは、項目#3 は、負債ので (旧称: システム トレイ) ステータス バーは既定で表示されます。For this app, item #3 is not a debt since the status bar (formerly called the system tray) is shown by default. 項目の#4 と#5、4 つのユニバーサル Windows プラットフォーム (UWP) を検索する必要があります TextBlockを使用していた Windows Phone Silverlight スタイルに対応するスタイル。For items #4 and #5, we need to find four Universal Windows Platform (UWP) TextBlock styles that correspond to the Windows Phone Silverlight styles that we were using. Windows Phone Silverlight アプリをエミュレーターで実行でき、比較の図と並行して、テキストセクション。You can run the Windows Phone Silverlight app in the emulator and compare it side-by-side with the illustration in the Text section. これを行う、および Windows Phone Silverlight のシステム スタイルのプロパティを見てから、このテーブルを実行できます。From doing that, and from looking at the properties of the Windows Phone Silverlight system styles, we can make this table.

| Windows Phone Silverlight スタイル キーWindows Phone Silverlight style key | UWP スタイル キーUWP style key | |-------------------------------------|------------------------| | PhoneTextExtraLargeStylePhoneTextExtraLargeStyle | TitleTextBlockStyleTitleTextBlockStyle | | PhoneTextSubtleStylePhoneTextSubtleStyle | SubtitleTextBlockStyleSubtitleTextBlockStyle | | PhoneTextNormalStylePhoneTextNormalStyle | CaptionTextBlockStyleCaptionTextBlockStyle | | PhoneTextTitle1StylePhoneTextTitle1Style | HeaderTextBlockStyleHeaderTextBlockStyle |   こうしたスタイルを設定するために、マークアップ エディターに単純に入力するか、Visual Studio XAML ツールを使えば入力なしで設定できます。To set those styles, you can just type them into the markup editor or you can use the Visual Studio XAML Tools and set them without typing a thing. 右クリック、 TextBlockクリックスタイルの編集 > リソースの適用To do that, you right-click a TextBlock and click Edit Style > Apply Resource. TextBlock内の項目テンプレートを右クリックして、 ListBox をクリック追加テンプレートの編集 > 編集生成された項目 (ItemTemplate) します。To do that with the TextBlocks in the item template, right click the ListBox and click Edit Additional Templates > Edit Generated Items (ItemTemplate).

ListBox コントロールの既定のスタイルでは背景に ListBoxBackgroundThemeBrush システム リソースが設定されるため、項目の背景は 80% の不透明な白になります。There is an 80% opaque white background behind the items, because the default style of the ListBox control sets its background to the ListBoxBackgroundThemeBrush system resource. ListBoxBackground="Transparent" を設定し、背景をクリアします。Set Background="Transparent" on the ListBox to clear that background. 項目テンプレートで TextBlock を左揃えにするには、前記と同様に再度編集し、両方の TextBlock"9.6,0"Margin を設定します。To left-align the TextBlocks in the item template, edit it again the same way as described above and set a Margin of "9.6,0" on both TextBlocks.

これが終わったら、表示ピクセルに関連する変更のために、まだ変更していないすべての固定サイズの寸法 (余白、幅、高さなど) について、0.8 を乗算する必要があります。After that is done, because of changes related to view pixels, we need to go through and multiply any fixed size dimension that we haven’t yet changed (margins, width, height, etc) by 0.8. したがって、たとえば画像は 70 x 70px から 56 x 56px に変更する必要があります。So, for example, the images should change from 70x70px to 56x56px.

ただし、スタイルの結果を示す前に、画像を描画しましょう。But, let’s get those images to render before we show the results of our styling.

ビュー モデルへの画像のバインドBinding an Image to a view model

Bookstore1WPSL8 では、次のことを適用しました。In Bookstore1WPSL8, we did this:

    // 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 スキームを使います。In Bookstore1Universal, we use the ms-appx URI scheme. 残るコードを変更せずに維持するために、System.Uri コンストラクターの異なるオーバーロードを使って、ベース URI に ms-appx URI スキームを格納し、パスの残る部分を追加できます。So that we can keep the rest of our code the same, we can use a different overload of the System.Uri constructor to put the ms-appx URI scheme in a base URI and append the rest of the path onto that. 次に例を示します。Like this:

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

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

後は、いくつかの最終的なスタイルの調整を行い、アプリがデスクトップ (およびその他) のフォーム ファクターとモバイルで適切に表示されることを確認するだけです。Now, we just need to make some final styling tweaks and confirm that the app looks good on desktop (and other) form factors as well as mobile. 手順は次のとおりです。The steps are below. このトピックの上部にあるリンクを使用して、プロジェクトをダウンロードし、この時点とケース スタディの終了時の間のすべての変更の結果を参照できます。And you can use the links at the top of this topic to download the projects and see the results of all the changes between here and the end of the case study.

  • 項目間のスペースを縮めるために、MainPage.xaml で BookTemplate データ テンプレートを探し、Margin 属性をルート Grid から削除します。To tighten up the spacing between items, find the BookTemplate data template in MainPage.xaml and delete the Margin attribute from the root Grid.
  • ページ タイトルに少しゆとりを与える場合は、-5.6 の下部の余白をページ タイトル TextBlock0 に設定します。If you want to give the page title a little more breathing room, you can reset the bottom margin of -5.6 to 0 on the page title TextBlock.
  • ここで、LayoutRoot の Background を適切な既定値に設定して、テーマが何であるかに関係なく、すべてのデバイスでの実行時にアプリが適切に表示されるようにする必要があります。Now, we need to set LayoutRoot's Background to the correct default value so that the app looks appropriate when running on all devices no matter what the theme is. これを、"Transparent" から "{ThemeResource ApplicationPageBackgroundThemeBrush}" に変更します。Change it from "Transparent" to "{ThemeResource ApplicationPageBackgroundThemeBrush}".

ここで、より洗練されたアプリにより、「フォーム ファクターとユーザー エクスペリエンスのための移植」のガイダンスを参考にして、実際にアプリで実行できる多くのデバイスのそれぞれで、フォーム ファクターを最適に利用します。With a more sophisticated app, this would be the point at which we'd use the guidance in Porting for form factor and user experience and really make optimal use of the form factor of each of the many devices the app can now run on. このシンプルなアプリでは、ここで停止し、スタイル操作の最後の手順を行った後のアプリの外観を確認します。But, for this simple app, we can stop here and see how the app looks after that last sequence of styling operations. 実際には、モバイル デバイスとデスクトップ デバイスで同じに表示されますが、広いフォーム ファクターの領域を最大限に活用していません (ただし、後のケース スタディで、これを行う方法を調査します)。It actually looks the same on mobile and desktop devices, although it's not making best use of space on wide form factors (but we'll investigate how to do that in a later case study).

アプリのテーマの管理方法については、「テーマの変更」をご覧ください。See Theme changes to see how to control the theme of your app.

移植された Windows 10 アプリ

モバイル デバイスで実行されている Windows 10 アプリのインポートThe ported Windows 10 app running on a Mobile device

モバイル デバイス向けのリスト ボックスの調整 (オプション)An optional adjustment to the list box for Mobile devices

モバイル デバイスでのアプリの実行中には、両方のテーマで既定で、リスト ボックスの背景は淡色です。When the app is running on a Mobile device, the background of a list box is light by default in both themes. このスタイルで問題なければ、それ以上の操作は必要ありません。That may be the style that you prefer and, if so, then there's nothing more to do. コントロールは、動作に影響を及ぼすことなく、表示形式をカスタマイズできるように設計されています。But, controls are designed so that you can customize their look while leaving their behavior unaffected. 元のアプリの外観のように、濃色のテーマでリスト ボックスを濃色にする場合は、このページの「モバイル デバイス向けのリスト ボックスの調整 (オプション)」の手順に従います。So, if you want the list box to be dark in the dark theme—the way the original app looked—then follow these instructions under "An optional adjustment".

まとめConclusion

このケース スタディでは、非常に単純なアプリ (実在しないと考えらえる単純なアプリ) を移植するプロセスを示しました。This case study showed the process of porting a very simple app—arguably an unrealistically simple one. たとえば、リスト コントロールは、選択用またはナビゲーション コンテキストの確立用に使うことができます。アプリは、タップされた項目に関する詳細を提示するページに移動します。For instance, list controls can be used for selection or for establishing a context for navigation; the app navigates to a page with more details about the item that was tapped. この特定のアプリは、ユーザーの選択に対して何も処理せず、またナビゲーション機能がありません。This particular app does nothing with the user's selection, and it has no navigation. それでも、このケース スタディは、まず移植プロセスを導入し、実際の UWP アプリで使うことができる重要な手法をデモする役割を果たします。Even so, the case study served to break the ice, to introduce the porting process, and to demonstrate important techniques that you can use in real UWP apps.

次のケース スタディは「Bookstore2」です。ここでは、グループ化されたデータへのアクセスと表示について説明します。The next case study is Bookstore2, in which we look at accessing and displaying grouped data.