次の方法で共有

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

  • [アーティクル]

このケース スタディは、 Bookstore1 で提供される情報に基づいて作成され、 SemanticZoom コントロールにグループ化されたデータを表示する Universal 8.1 アプリから始まります。 ビュー モデルでは、クラス Author の各インスタンスがその著者によって書かれた書籍のグループを表し、 SemanticZoomでは、著者別にグループ化された書籍の一覧を表示するか、縮小して作成者のジャンプ リストを表示できます。 ジャンプ リストを使うと、書籍の一覧をスクロールするよりもすばやく移動することができます。 アプリを Windows 10 ユニバーサル Windows プラットフォーム (UWP) アプリに移植する手順について説明します。

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

ダウンロード

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

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

ユニバーサル 8.1 アプリ

次に、ここで移植するアプリ Bookstore2_81 の外観を示します。 これは、著者別にグループ化された書籍を示す水平スクロール (Windows Phone では垂直スクロール) SemanticZoom です。 ジャンプ リストに縮小して、そこから任意のグループに戻ることができます。 このアプリには、グループ化されたデータ ソースを提供するビュー モデルと、そのビュー モデルにバインドするユーザー インターフェイスという 2 つの主要な要素があります。 ご覧のとおり、これらの両方の要素は、WinRT 8.1 テクノロジから Windows 10 に簡単に移植できます。

ウィンドウの bookstore2-81、拡大表示

Windows のBookstore2_81、拡大表示

ウィンドウの bookstore2-81、縮小表示

縮小表示された Windows の Bookstore2_81

windows phone の bookstore2-81、拡大表示

拡大表示された Windows Phone の Bookstore2_81

windows phone の bookstore2-81、縮小表示

縮小表示された Windows Phone の Bookstore2_81

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

Bookstore2_81 ソリューションは、8.1 ユニバーサル アプリ プロジェクトです。 Bookstore2_81.Windows プロジェクトによって Windows 8.1 用アプリ パッケージが構築され、Bookstore2_81.WindowsPhone プロジェクトによって Windows Phone 8.1 用アプリ パッケージが構築されます。 Bookstore2_81.Shared は、他の 2 つのプロジェクトの両方で使われるソース コード、マークアップ ファイル、および他のアセットやリソースを含むプロジェクトです。

前のケース スタディと同様に、( ユニバーサル 8.1 アプリがある場合で説明されているオプション) は、共有プロジェクトの内容をユニバーサル デバイス ファミリを対象とする Windows 10 に移植することです。

まず、新しい空のアプリケーション (Windows ユニバーサル) プロジェクトを作成します。 そして、"Bookstore2Universal_10" という名前を付けます。 Bookstore2_81 から Bookstore2Universal_10 にコピーするファイルを、以下に示します。

共有プロジェクトから

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

Windows プロジェクトから

  • BookstoreStyles.xaml をコピーします。 このファイル内のすべてのリソース キーが Windows 10 アプリで解決されるため、このキーを出発点として使用します。同等のWindowsPhoneファイルにあるもののいくつかはしません。
  • SeZoUC.xaml とSeZoUC.xaml.csをコピーします。 このビューの Windows バージョンから始めます。これは広いウィンドウに適しており、後で小さなウィンドウや小さなデバイスに合わせて調整します。

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

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

デスクトップ デバイスで実行されている初期ソース コードの変更を含む Windows 10 アプリ(拡大表示)

デスクトップ デバイスで実行されている初期ソース コードの変更を含む Windows 10 アプリ(拡大表示)

デスクトップ デバイスで実行されている初期ソース コードの変更を含む Windows 10 アプリの縮小表示

デスクトップ デバイスで実行されている初期ソース コードの変更を含む Windows 10 アプリ(縮小表示)

ビュー モデルとズームインビューとズームアウトビューは正常に連携していますが、少し見えにくい問題があります。 1 つの問題は、 SemanticZoom がスクロールしないということです。 これは、Windows 10 では、 GridView の既定のスタイルによって垂直方向にレイアウトされるためです (Windows 10 の設計ガイドラインでは、新しいアプリや移植されたアプリでそのように使用することをお勧めします)。 ただし、Bookstore2_81 プロジェクト (8.1 アプリ用に設計されています) からコピーしたカスタム項目パネル テンプレートの水平スクロール設定は、Windows 10 アプリへの移植の結果として適用される Windows 10 の既定のスタイルが持つ垂直スクロール設定と矛盾します。 2 つ目の点は、異なるサイズのウィンドウや小さなデバイスで最適なエクスペリエンスを提供するために、アプリがまだユーザー インターフェイスを調整していないということです。 また、3 つ目は、適切なスタイルとブラシがまだ使用されていないため、テキストの多くが非表示になります (クリックして縮小できるグループ ヘッダーを含む)。 そのため、次の 3 つのセクション (SemanticZoom と GridView の設計変更、 Adaptive UI、 Universal スタイル) では、これらの 3 つの問題を解決します。

SemanticZoom と GridView の設計変更

Windows 10 での SemanticZoom コントロールの設計変更については、「 SemanticZoom の変更」セクションで説明します。 このセクションでは、これらの変更に対応する作業はありません。

GridView の変更については、「GridView/ListView の変更」セクションで説明。 以下で説明するように、これらの変更に適応するために、いくつかの非常に小さな調整を行います。

  • SeZoUC.xaml の ZoomedInItemsPanelTemplateで、 Orientation="Horizontal" と GroupPadding="0,0,0,20"を設定します。
  • SeZoUC.xaml で、 ZoomedOutItemsPanelTemplate を削除し、縮小表示ビューから ItemsPanel 属性を削除します。

以上で作業は終了です。

アダプティブ UI

その変更後、SeZoUC.xaml が提供する UI レイアウトは、アプリが広いウィンドウ (大画面のデバイスでのみ可能) で実行されている場合に適しています。 ただし、アプリのウィンドウが狭い場合 (小さなデバイスで発生し、大規模なデバイスでも発生する可能性があります)、Windows Phone ストア アプリに含まれている UI は、おそらく最も適切です。

これを実現するには、アダプティブ Visual State Manager 機能を使用できます。 既定では、Windows Phone ストア アプリで使用していた小さなテンプレートを使用して UI が狭い状態でレイアウトされるように、ビジュアル要素のプロパティを設定します。 次に、アプリのウィンドウが特定のサイズ ( 効果のないピクセル単位で測定) より広いか等しい場合を検出し、これに応じてビジュアル要素のプロパティを変更して、より大きく広いレイアウトを取得します。 これらのプロパティの変更を視覚的な状態に配置し、アダプティブ トリガーを使用して、有効ピクセル単位のウィンドウの幅に応じて、その表示状態を継続的に監視して適用するかどうかを判断します。 この場合、ウィンドウの幅でトリガーされますが、ウィンドウの高さでもトリガーできます。

最小ウィンドウ幅 548 epx は、幅の広いレイアウトを表示する最小のデバイスのサイズであるため、このユース ケースに適しています。 通常、電話は 548 epx より小さいので、小さなデバイスでは既定の狭いレイアウトのままです。 PC では、ウィンドウは既定でワイド状態に切り替えるのに十分な幅で起動します。 そこから、250 x 250 サイズの項目の 2 つの列を表示するのに十分な幅でウィンドウをドラッグできます。 それより少し狭いとトリガーが非アクティブになり、ワイドな表示状態が削除され、既定の狭いレイアウトが有効になります。

では、これら 2 つの異なるレイアウトを実現するには、どのようなプロパティを設定して変更する必要がありますか? 2 つの選択肢があり、それぞれ異なるアプローチが必要です。

  1. マークアップに 2 つの SemanticZoom コントロールを配置できます。 1 つは Windows ランタイム 8.x アプリで使っていたマークアップのコピー (マークアップ内の GridView コントロールを使っていました) であり、既定では折りたたまれています。 もう 1 つは、Windows Phone ストア アプリで使用していたマークアップのコピー ( ListView コントロールを使用) であり、既定で表示されます。 表示状態は、2 つの SemanticZoom コントロールの可視性プロパティを切り替えます。 これは、達成するためにほとんど労力を必要としませんが、一般的に、高パフォーマンスの手法ではありません。 そのため、アプリを使用する場合は、アプリをプロファイリングし、それでもパフォーマンス目標を満たしていることを確認する必要があります。
  2. ListView コントロールを含む 1 つのSemanticZoomを使用できます。 2 つのレイアウトを実現するために、ワイド表示状態では、 ListView コントロールのプロパティ (適用されるテンプレートを含む) を変更して、 GridView と同じ方法でレイアウトします 。 これはパフォーマンスが向上する可能性がありますが、 GridView と ListView の各種スタイルとテンプレートの間には、非常に多くの小さな違いがあり さまざまな項目の種類の間で、これを実現するのがより困難なソリューションです。 このソリューションは、現時点での既定のスタイルとテンプレートの設計方法とも密接に結びついているので、将来の既定値の変更に対して脆弱で機密性の高いソリューションが提供されます。

このケース スタディでは、最初の代替手段を使用します。 しかし、あなたが好きなら、あなたは2番目のものを試して、それがあなたに良く働くかどうかを確認することができます。 最初の代替手段を実装するために実行する手順を次に示します。

  • 新しいプロジェクトのマークアップの SemanticZoom で、 x:Name="wideSeZo" と Visibility="Collapsed"を設定します。
  • Bookstore2_81.WindowsPhone プロジェクトに戻り、SeZoUC.xaml を開きます。 SemanticZoom要素マークアップをそのファイルからコピーし、新しいプロジェクトにwideSeZoした直後に貼り付けます。 貼り付けた要素に x:Name="narrowSeZo" を設定します。
  • ただし、 narrowSeZo には、まだコピーしていないスタイルがいくつか必要です。 Bookstore2_81.WindowsPhone に戻り、SeZoUC.xaml から 2 つのスタイル (AuthorGroupHeaderContainerStyle と ZoomedOutAuthorItemContainerStyle) をコピーし、新しいプロジェクトの BookstoreStyles.xaml に貼り付けます。
  • これで、新しい SeZoUC.xaml に 2 つの SemanticZoom 要素が追加されました。 これらの 2 つの要素を Grid でラップします。
  • 新しいプロジェクトの BookstoreStyles.xaml で、これらの 3 つのリソース キー (および SeZoUC.xaml の参照に Wide という単語を追加しますが、 wideSeZo内の参照にのみ追加します): AuthorGroupHeaderTemplate、 ZoomedOutAuthorTemplate、および BookTemplate。
  • Bookstore2_81.WindowsPhone プロジェクトで、BookstoreStyles.xaml を開きます。 このファイルから、上で説明したものと同じ 3 つのリソース、2 つのジャンプ リスト項目コンバーター、名前空間プレフィックスの宣言 Windows_UI_Xaml_Controls_Primitives をコピーし、それらすべてを新しいプロジェクトの BookstoreStyles.xaml に貼り付けます。
  • 最後に、新しいプロジェクトの SeZoUC.xaml で、上で追加した Grid に適切な Visual State Manager マークアップを追加します。
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="WideState">
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="548"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="wideSeZo.Visibility" Value="Visible"/>
                        <Setter Target="narrowSeZo.Visibility" Value="Collapsed"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

    ...

    </Grid>

ユニバーサル スタイル

次に、以前のプロジェクトからコピーするときに上記で紹介したスタイルの問題を含め、いくつかのスタイルの問題を修正しましょう。

  • MainPage.xaml で、 LayoutRootの背景を "{ThemeResource ApplicationPageBackgroundThemeBrush}"に変更します。
  • BookstoreStyles.xaml で、リソース TitlePanelMargin の値を 0 (または適切な値) に設定します。
  • SeZoUC.xaml で、 wideSeZo の余白を 0 (または適切な値) に設定します。
  • BookstoreStyles.xaml で、margin 属性を AuthorGroupHeaderTemplateWideから削除します。
  • FontFamily 属性を AuthorGroupHeaderTemplate から削除し、 ZoomedOutAuthorTemplateから削除します。
  • Bookstore2_81 では、BookTemplateTitleTextBlockStyle、BookTemplateAuthorTextBlockStyle、PageTitleTextBlockStyle の各リソース キーを間接参照として使うため、2 つのアプリで 1 つのキーの実装が異なりますが、 この間接参照はこれ以上必要ありません。システム スタイルを直接参照できます。 そのため、アプリ全体でこれらの参照をそれぞれ TitleTextBlockStyle、 CaptionTextBlockStyle、および HeaderTextBlockStyle に置き換えます。 Visual Studio ファイル内に置き換える 機能を使用すると、これを迅速かつ正確に行うことができます。 その後、これら 3 つの未使用のリソースを削除できます。
  • AuthorGroupHeaderTemplateで、PhoneAccentBrushをSystemControlBackgroundAccentBrushに置き換え、モバイル デバイス ファミリで実行するときに正しく表示されるようにTextBlock でForeground="White"を設定します。
  • BookTemplateWideで、2 番目の TextBlock から最初のに Foreground 属性をコピーします。
  • ZoomedOutAuthorTemplateWideで、参照を SubheaderTextBlockStyle (これは少し大きすぎます) に変更し、SubtitleTextBlockStyleへの参照に変更します。
  • ズームアウト ビュー (ジャンプ リスト) は、新しいプラットフォームでズームイン ビューをオーバーレイしなくなったため、narrowSeZoの縮小表示からBackground属性を削除できます。
  • すべてのスタイルとテンプレートが 1 つのファイルに含まれるように、 ZoomedInItemsPanelTemplate SeZoUC.xaml から BookstoreStyles.xaml に移動します。

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

デスクトップ デバイスで実行されている移植された Windows 10 アプリ、拡大表示、2 つのサイズのウィンドウ

デスクトップ デバイスで実行されている移植された Windows 10 アプリ、拡大表示、2 つのサイズのウィンドウ

デスクトップ デバイスで実行されている移植された Windows 10 アプリ、縮小表示、2 つのサイズのウィンドウ

デスクトップ デバイスで実行されている移植された Windows 10 アプリ、縮小表示、2 つのサイズのウィンドウ

モバイル デバイスで実行されている移植された Windows 10 アプリ(拡大表示)

モバイル デバイスで実行されている移植された Windows 10 アプリ(拡大表示)

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

モバイル デバイスで実行されている移植された Windows 10 アプリ(縮小表示)

まとめ

このケース スタディでは、前のユーザー インターフェイスよりも野心的なユーザー インターフェイスが含まれています。 前のケース スタディと同様に、この特定のビュー モデルでは作業はまったく必要なく、主にユーザー インターフェイスのリファクタリングに取り組みました。 変更の一部は、2 つのプロジェクトを 1 つに組み合わせて、多くのフォーム ファクター (実際には以前よりも多く) をサポートするという必要な結果でした。 いくつかの変更は、プラットフォームに対して行われた変更に対して行われました。

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