Windows ランタイム 8 の XAML と UI の UWP への移植

[アーティクル]
07/22/2015

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

宣言型 XAML マークアップ形式での UI の定義は、ユニバーサル 8.1 アプリからユニバーサル Windows プラットフォーム (UWP) アプリに適切に変換されます。ほとんどのマークアップには互換性があることがわかりますが、場合によっては、使っているシステムのリソースキーやカスタムテンプレートを調整する必要があります。ビューモデルの命令型コードについては、ほとんどあるいはまったく変更する必要はありません。プレゼンテーション層にあるほとんどのコード (UI 要素を操作するコード) も、簡単に移植できます。

命令型コード

プロジェクトのビルド段階に進むだけであれば、重要でないコードのコメントアウトやスタブの挿入を行うことができます。次に、このセクションの以降のトピック (および前のトピック「トラブルシューティング」) を参考にして、ビルドとランタイムの問題が解決して移植が完了するまで一度に 1 つの問題について反復作業を行います。

アダプティブ/応答性の高い UI

アプリは潜在的に多様なデバイス (それぞれ独自の画面サイズと解像度を持つ) で実行できるため、最小限の手順でアプリを移植するだけでなく、各デバイスで最適な外観になるように UI を調整できます。アダプティブな Visual State Manager の機能を使って、ウィンドウのサイズを動的に検出し、それに応じてレイアウトを変更できます。その方法を示す例を、Bookstore2 ケーススタディの「アダプティブ UI」に示します。

"戻る" ボタンの処理

ユニバーサル 8.1 アプリ、Windows ストアアプリ、Windows Phone ストアアプリには、表示する UI と "戻る" ボタンで処理するイベントについてさまざまなアプローチがあります。ただし、Windows 10 アプリでは、1 つのアプローチをアプリで使うことができます。モバイルデバイスでは、このボタンはデバイス上の静電容量式のボタンまたはシェル内のボタンとして提供されます。デスクトップデバイスでは、アプリ内で戻るナビゲーションが可能な場合には常にアプリのクロムにボタンを追加します。このボタンは、ウィンドウ表示されたアプリのタイトルバーまたはタブレットモードのタスクバーに表示されます。"戻る" ボタンのイベントはすべてのデバイスファミリに共通するユニバーサルな概念であり、ハードウェアまたはソフトウェアに実装されるボタンは同じ BackRequested イベントを発生させます。

次の例は、すべてのデバイスファミリについて機能し、同じ処理をすべてのページに適用し、ナビゲーションを確認する必要がない場合 (未保存の変更に関する警告を表示するなど) に適しています。

    // app.xaml.cs

    protected override void OnLaunched(LaunchActivatedEventArgs e)
    {
        [...]

        Windows.UI.Core.SystemNavigationManager.GetForCurrentView().BackRequested += App_BackRequested;
        rootFrame.Navigated += RootFrame_Navigated;
    }

    private void RootFrame_Navigated(object sender, NavigationEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        // Note, on device families that have no title bar, setting AppViewBackButtonVisibility can safely execute 
        // but it will have no effect. Such device families provide back button UI for you.
        if (rootFrame.CanGoBack)
        {
            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
                Windows.UI.Core.AppViewBackButtonVisibility.Visible;
        }
        else
        {
            Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility = 
                Windows.UI.Core.AppViewBackButtonVisibility.Collapsed;
        }
    }

    private void App_BackRequested(object sender, Windows.UI.Core.BackRequestedEventArgs e)
    {
        Frame rootFrame = Window.Current.Content as Frame;

        if (rootFrame.CanGoBack)
        {
            rootFrame.GoBack();
        }
    }

プログラムを使ったアプリの終了に関しても、すべてのデバイスファミリに対する単一のアプローチがあります。

    Windows.UI.Xaml.Application.Current.Exit();

チャーム

チャームと統合されるコードを変更する必要はありません。ただし、いくつかの UI をアプリに追加して、Windows 10 シェルに含まれていないチャームバーの代わりに使う必要があります。Windows 10 で実行されるユニバーサル 8.1 アプリには、独自の代替 UI があります。このような UI は、アプリのタイトルバーにシステムが表示するクロムによって提供されます。

コントロールとコントロールスタイル/テンプレート

Windows 10 で実行されるユニバーサル 8.1 アプリでは、コントロールに関して 8.1 の外観と動作が維持されます。ただし、そのアプリを Windows 10 アプリに移植すると、外観と動作が異なる場合があるので、注意してください。コントロールのアーキテクチャと設計は、Windows 10 アプリでは基本的に変更はありません。ほとんどの変更は、デザイン言語、単純化、操作性の向上に関連するものです。

注 PointerOver 表示状態は、Windows 10 アプリと Windows ストアアプリのカスタムスタイル/テンプレートには関連しますが、Windows Phone ストアアプリのカスタムスタイル/テンプレートには関連しません。このために (および Windows 10 アプリでサポートされているシステムリソースキーのため)、アプリを Windows 10 に移植するときは、Windows ストアアプリからカスタムスタイル/テンプレートを再利用することをお勧めします。

カスタムのスタイル/テンプレートで、確実に最新の表示状態のセットを使い、既定のスタイル/テンプレートに対するパフォーマンスの向上を活用するには、Windows 10 の新しい既定のテンプレートのコピーを編集し、カスタマイズを再適用します。パフォーマンスの向上の 1 つの例として、以前に ContentPresenter または Panel を囲んでいた Border が削除され、子要素が境界線をレンダリングするようになりました。

以下に、コントロールの変更のより具体的な例を示します。

コントロール名	変更
AppBar	AppBar コントロールを使っている場合 (代わりに CommandBar をお勧めします)、Windows 10 アプリでは既定でこのコントロールが表示されます。これは AppBar.ClosedDisplayMode プロパティで管理できます。
AppBar、CommandBar	Windows 10 アプリでは、AppBar と CommandBar には [詳細表示] ボタン (省略記号) があります。
CommandBar	Windows ストアアプリでは、CommandBar のセカンダリコマンドが常に表示されます。Windows Phone ストアアプリと Windows 10 アプリでは、コマンドバーが開くまで表示されません。
CommandBar	Windows Phone ストアアプリでは、CommandBar.IsSticky の値は、バーがフォーカスの移動によって閉じるかどうかに影響しません。Windows 10 アプリでは、IsSticky が true に設定されると、CommandBar は、フォーカスの移動によって閉じるジェスチャを無視します。
CommandBar	Windows 10 アプリでは、CommandBar で EdgeGesture.Completed イベントも UIElement.RightTapped イベントも処理されません。タップまたはスワイプにも応答しません。ただし、これらのイベントを処理し、IsOpen を設定するオプションがあります。
DatePicker、TimePicker	DatePicker や TimePicker に加えられた視覚的な変化によってアプリの外観がどうなるかを確認してください。モバイルデバイスで実行される Windows 10 アプリでは、これらのコントロールを使っても選択ページへは移動されません。ただし、フォーカスの移動によって閉じるポップアップが使われるようになりました。
DatePicker、TimePicker	Windows 10 アプリでは、DatePicker または TimePicker をポップアップ内に配置することはできません。ポップアップ型のコントロールにこれらのコントロールを表示する場合は、DatePickerFlyout と TimePickerFlyout を使うことができます。
GridView、ListView	GridView/ListView については、「GridView/ListView に関する変更」をご覧ください。
Hub	Windows Phone ストアアプリでは、Hub コントロールが最後のセクションから最後のセクションに折り返します。Windows ストアアプリと Windows 10 アプリでは、ハブセクションは折り返しません。
Hub	Windows Phone ストアアプリでは、Hub コントロールの背景画像は、ハブセクションに対する視差効果で移動します。Windows ストアアプリと Windows 10 アプリでは、視差効果は使われません。
Hub	ユニバーサル 8.1 アプリでは、HubSection.IsHeaderInteractive プロパティにより、セクションヘッダーとその横に表示される山形のグリフが対話型になります。Windows 10 アプリでは、ヘッダーの横に対話型の "詳細表示" アフォーダンスが表示されますが、ヘッダーそのものは対話型にはなりません。IsHeaderInteractive により、操作で Hub.SectionHeaderClick イベントが発生するかどうかが決まります。
MessageDialog	MessageDialog を使っている場合は、柔軟性が向上した ContentDialog の利用を検討してください。XAML UI の基本のサンプルもご覧ください。
ListPickerFlyout、PickerFlyout	ListPickerFlyout と PickerFlyout は、Windows 10 では使われなくなりました。単一選択ポップアップの場合は、MenuFlyout を使います。より複雑なエクスペリエンスの場合は、Flyout を使います。
PasswordBox	PasswordBox.IsPasswordRevealButtonEnabled プロパティは、Windows 10 アプリでは使われなくなり、設定しても効果はありません。代わりに PasswordBox.PasswordRevealMode を使います。これにより、既定で Peek が設定されます (これにより、Windows ストアアプリのようにパスワードを表示するボタンが表示されます)。「パスワードボックスのガイドライン」もご覧ください。
Pivot	Pivot はユニバーサルコントロールとなり、モバイルデバイスでの利用のみに限定されていた制限が排除されました。
SearchBox	SearchBox コントロールは、デバイスファミリ全体でユニバーサルに使うことはできなくなりました。代わりに AutoSuggestBox コントロールを使い、入力方式エディター (IME) のサポートに注意してください。
SemanticZoom	SemanticZoom については、「SemanticZoom に関する変更」をご覧ください。
ScrollViewer	ScrollViewer の既定のプロパティの一部が変更されています。HorizontalScrollMode が Auto、VerticalScrollMode が Auto、ZoomMode が Disabled です。新しい既定値がアプリに対して適切でない場合は、スタイルで変更するか、コントロール自体のローカル値として変更できます。
TextBox	Windows ストアアプリでは、スペルチェックは既定で TextBox に対してオフになります。Windows Phone ストアアプリと Windows 10 アプリでは、既定でオンになります。
TextBox	TextBox の既定のフォントサイズは 11 から 15 に変更されました。
TextBox	TextBox.TextReadingOrder の既定値は Default から DetectFromContent に変更されました。これが望ましくない場合は、UseFlowDirection を使用します。Default は推奨されなくなりました。
Various	アクセントカラーは Windows Phone ストアアプリと Windows 10 アプリ適用されますが、Windows ストアアプリには適用されません。

UWP アプリのコントロールについて詳しくは、「機能別コントロール」、「コントロールの一覧」、「コントロールのガイドライン」をご覧ください。

Windows 10 でのデザイン言語

ユニバーサル 8.1 アプリと Windows 10 アプリでは、デザイン言語に関して若干の違いがありますが、重要な相違点なので注意してください。詳しくは、「Design」(設計) をご覧ください。デザイン言語に変更が加えられていますが、設計原則は維持されています。細部にまで注意を払いながら、簡潔さを追求しています。そのために、クロムよりもコンテンツを優先し、視覚要素を大幅に減らし、真のデジタル領域を常に意識しています。また、視覚的な階層の利用 (特に文字体裁に対して)、グリッド内でのデザイン、滑らかなアニメーションを使ったエクスペリエンスの実現も行っています。

有効ピクセル、視聴距離、スケールファクター

これまで、表示ピクセルは、デバイスの実際の物理サイズと解像度から UI 要素のサイズとレイアウトを抽象化する方法でした。現在では、表示ピクセルが有効ピクセルに変わりました。その用語の説明、有効ピクセルが何をするものなのか、および有効ピクセルで使うことができる追加の値について、以下に示します。

一般的な考えとは異なり、"解像度" という用語はピクセル密度の測定値を表しており、ピクセル数ではありません。"有効解像度" は、画像またはグリフを構成する物理ピクセルを解決して、デバイスの視聴距離と物理ピクセルサイズでの目視による相違の度合を取得する方法です (物理ピクセルサイズの逆数であるピクセル密度)。有効解像度は、ユーザー中心であるために、エクスペリエンスの構築に適したメトリックです。すべての要因について理解し、UI 要素のサイズを制御することによって、ユーザーのエクスペリエンスを適切なものにすることができます。

デバイスによって、有効ピクセルの幅の値が異なります。その範囲は、320 epx (最小のデバイス) から 1024 epx (一般的なサイズのモニター)、またはそれ以上のさらに広い幅になります。これまでと同様に、自動的にサイズ調整される要素と動的レイアウトパネルを引き続き使うことで十分に対応できます。ただし、場合によっては、UI 要素のプロパティを XAML マークアップで固定サイズに設定することがあります。スケールファクターは、アプリが実行されているデバイスやユーザーが行った表示設定に応じて、アプリに自動的に適用されます。スケールファクターによって、さまざまな幅の画面サイズでユーザーに対してほぼ一定サイズのタッチ (または読み取り) ターゲットを提示するように、すべての UI 要素を固定サイズで維持できます。また、動的レイアウトと共に使うことで、UI は単にさまざまなデバイスで光学的なスケーリングを行うだけでなく、利用可能な領域に合わせて適切な量のコンテンツを表示するために必要となる処理も実行します。

すべてのディスプレイで最適なアプリのエクスペリエンスが実現できるように、一連のサイズで各ビットマップアセットを作成し、各アセットが特定のスケールファクターに適合するように設定することをお勧めします。作成できるアセットが 1 つのサイズのみに対応する場合は、100% スケールのアセットを作成します。ただし、100%、200%、および 400% スケール (この優先順位で) でアセットを作成する方が、多くの場合、すべての中間スケールファクターでより適切な結果を得ることができます。複雑なアートワークがある場合は、さらに多くのスケールに対応したアセットが必要になることがあります。ベクターアートを使って作業を始める場合は、どのようなスケールファクターでも高品質なアセットを比較的簡単に生成できます。

Windows 10 アプリ向けのすべてスケールファクターは 100%、125%、150%、200%、250%、300%、400% ですが、すべてのスケールファクターをサポートすることはお勧めしません。すべてのスケールファクターのアセットを提供した場合、ストアでは、各デバイスに合った適切なサイズのアセットが選ばれ、それらのアセットのみがダウンロードされます。ストアでは、デバイスの DPI に基づいて、ダウンロードするアセットが選ばれます。140% や 220% などのスケールファクターで Windows ストアアプリのアセットを再利用できますが、アプリは新しいスケールファクターのいずれかで実行されるため、一部のビットマップスケーリングを回避できなくなります。状況に合った最適な結果を得ることができるかどうかを確認するために、さまざまなデバイスでアプリをテストしてください。

Windows ストアアプリの XAML マークアップを再利用できます。Windows ストアアプリでは、リテラルの寸法値がマークアップで使われています (図形や他の要素に関するサイズの設定や、文字体裁のために使われている場合があります)。ただし、場合によっては、ユニバーサル 8.1 アプリよりも、Windows 10 アプリに大規模なスケールファクターが使われます (たとえば、140% であった場合に 150%、180% であった場合に 200% など)。したがって、Windows 10 でこれらのリテラル値が大きすぎる場合は、それらの値に 0.8 を乗算してみてください。詳しくは、「ピクセル密度に合わせたスケーリングのガイドライン」をご覧ください。

GridView/ListView に関する変更

コントロールを縦方向へスクロールするために、GridView の既定のスタイル setter に対していくつかの変更が行われました (横方向へのスクロールではありません。これについては既定で対応しています)。プロジェクトに含まれている既定のスタイルのコピーを編集した場合、そのコピーにはこれらの変更が適用されていないため、手動で変更を加える必要があります。一連の変更を以下にまとめます。

ScrollViewer.HorizontalScrollBarVisibility の setter は、Auto から Disabled に変更されました。
ScrollViewer.VerticalScrollBarVisibility の setter は、Disabled から Auto に変更されました。
ScrollViewer.HorizontalScrollMode の setter は、Enabled から Disabled に変更されました。
ScrollViewer.VerticalScrollMode の setter は、Disabled から Enabled に変更されました。
ItemsPanel の setter では、ItemsWrapGrid.Orientation の値が Vertical から Horizontal に変更されました。

最後の変更 (Orientation に対する変更) は矛盾していると考えられますが、ここでは折り返しグリッドについて説明していることに注意してください。横方向の折り返しグリッド (新しい値) は、テキストが横方向に表示され、ページの終端で次の行に改行される書記体系と類似しています。そのようなテキストのページでは、縦方向にスクロールします。これに対して、縦方向の折り返しグリッド (以前の値) は、テキストが縦方向に表示される書記体系と類似しています。このため、横方向にスクロールします。

変更されたまたは Windows 10 でサポートされていない GridView と ListView の特性を次に示します。

Windows 10 アプリでは、IsSwipeEnabled プロパティはサポートされません (Windows ストアアプリのみ)。API は存在しますが、API を設定しても効果はありません。これまでのすべての選択ジェスチャがサポートされていますが、下方向へのスワイプと右クリックはサポートされていません。これは、下方向へのスワイプではデータが検出不可能と示されるためです。また、右クリックはコンテキストメニューの表示用に予約されているためです。
Windows 10 アプリでは、ReorderMode プロパティはサポートされません (Windows Phone ストアアプリのみ)。API は存在しますが、API を設定しても効果はありません。代わりに、GridView や ListView に対して AllowDrop と CanReorderItems を true に設定することで、ユーザーは、長押し (またはクリックしてドラッグ) のジェスチャを使って順序を変更することができます。
Windows 10 向けの開発を行うとき、ListView および GridView のどちらに対しても、アイテムコンテナーのスタイルでは、GridViewItemPresenter の代わりに ListViewItemPresenter を使います。アイテムコンテナーの既定のスタイルをコピーして編集する場合は、適切な種類のスタイルを取得できます。
Windows 10 アプリでは、選択ビジュアルが変更されました。SelectionMode を Multiple に設定すると、既定では、各項目に対してチェックボックスがレンダリングされます。ListView 項目の既定の設定では、チェックボックスが項目の横にインラインで配置されます。その結果、他の項目が占める領域が若干小さくなり、移動されます。GridView 項目の場合、既定では、チェックボックスが項目の上部に重なって表示されます。ただしどちらの場合も、チェックボックスのレイアウト (インラインまたはオーバーレイ) を制御できます (CheckMode プロパティを使う)。また、アイテムコンテナーのスタイル内にある ListViewItemPresenter 要素上にチェックボックスをすべて表示するかどうかを制御することもできます (SelectionCheckMarkVisualEnabled プロパティを使う)。次に例を示します。

<Style x:Key="CustomItemContainerStyle" TargetType="ListViewItem|GridViewItem">
    ...
    <Setter.Value>
        <ControlTemplate TargetType="ListViewItem|GridViewItem">
            <ListViewItemPresenter CheckMode="Inline|Overlay" ... />
        </ControlTemplate>
    </Setter.Value>
    ...
</Style>

インラインチェックボックスを使った ListViewItemPresenter

重ねて表示されるチェックボックスを使った ListViewItemPresenter

選択する際の下方向へのスワイプと右クリックのジェスチャがサポートされなくなったため (理由については上記の説明をご覧ください)、相互作用モデルが変更されました。その結果の 1 つとして、ItemClick イベントと SelectionChanged イベントは相互排他的ではなくなりました。ご自分の Windows 10 アプリについて、シナリオを確認し、”選択” の相互作用モデルを採用するか、"呼び出し"の相互作用モデルを採用するかを決めてください詳しくは、「操作モードを変更する方法」をご覧ください。
ListViewItemPresenter のスタイルを指定する際に使うプロパティについて、変更がいくつかあります。新しいプロパティは、CheckBoxBrush、PressedBackground、SelectedPressedBackground、FocusSecondaryBorderBrush です。Windows 10 アプリで無視されるプロパティは、Padding (代わりに ContentMargin を使う)、CheckHintBrush、CheckSelectingBrush、PointerOverBackgroundMargin、ReorderHintOffset、SelectedBorderThickness、SelectedPointerOverBorderBrush です。

次の表では、ListViewItem コントロールテンプレートと GridViewItem コントロールテンプレートでの表示状態や表示状態グループに対する変更について説明します。

8.1		Windows 10
CommonStates		CommonStates
	Normal		Normal
	PointerOver		PointerOver
	Pressed		Pressed
	PointerOverPressed		[利用不可]
	Disabled		[利用不可]
	[利用不可]		PointerOverSelected
	[利用不可]		Selected
	[利用不可]		PressedSelected
[unavailable]		DisabledStates
	[利用不可]		Disabled
	[利用不可]		Enabled
SelectionHintStates		[unavailable]
	VerticalSelectionHint		[利用不可]
	HorizontalSelectionHint		[利用不可]
	NoSelectionHint		[利用不可]
[unavailable]		MultiSelectStates
	[利用不可]		MultiSelectDisabled
	[利用不可]		MultiSelectEnabled
SelectionStates		[unavailable]
	Unselecting		[利用不可]
	Unselected		[利用不可]
	UnselectedPointerOver		[利用不可]
	UnselectedSwiping		[利用不可]
	Selecting		[利用不可]
	Selected		[利用不可]
	SelectedSwiping		[利用不可]
	SelectedUnfocused		[利用不可]

カスタムの ListViewItem コントロールテンプレートまたは GridViewItem コントロールテンプレートを使っている場合は、上記の変更を踏まえてテンプレートを確認してください。新しい既定のテンプレートのコピーを編集し、そのコピーにカスタマイズを再適用して、コントロールテンプレートのカスタマイズをやり直すことをお勧めします。こうした作業をできない理由があり、既にあるテンプレートの編集が必要になる場合は、既存のテンプレートを編集する方法に関する次の一般的なガイダンスを参考にしてください。

新しい MultiSelectStates 表示状態グループを追加します。
新しい MultiSelectDisabled 表示状態を追加します。
新しい MultiSelectEnabled 表示状態を追加します。
新しい DisabledStates 表示状態グループを追加します。
新しい Enabled 表示状態を追加します。
CommonStates 表示状態グループから PointerOverPressed 表示状態を削除します。
Disabled 表示状態を DisabledStates 表示状態グループに移動します。
新しい PointerOverSelected 表示状態を追加します。
新しい PressedSelected 表示状態を追加します。
SelectedHintStates 表示状態グループを削除します。
SelectionStates 表示状態グループの Selected 表示状態を CommonStates 表示状態グループに移動します。
SelectionStates 表示状態グループ全体を削除します。

ローカリゼーションとグローバリゼーション

UWP アプリプロジェクトで、ユニバーサル 8.1 プロジェクトの Resources.resw ファイルを再利用できます。このファイルをコピーしてから、プロジェクトに追加し、[ビルドアクション] を [PRIResource] に、[出力ディレクトリにコピー] を [コピーしない] に設定します。「ResourceContext.QualifierValues」トピックでは、デバイスファミリのリソースを選択する要因に基づいてデバイスファミリ固有のリソースを読み込む方法について説明しています。

リモート再生

Windows.Media.PlayTo 名前空間の API は Windows 10 アプリでは使われなくなり、Windows.Media.Casting API が使われるようになりました。

リソースキー、および TextBlock スタイルサイズ

デザイン言語は Windows 10 で改善され、特定のシステムスタイルが変更されました。場合によっては、変更されたスタイルのプロパティにビューが適合するように、ビューのビジュアルデザインに戻る必要があります。

それ以外の場合、リソースキーはサポートされなくなりました。Visual Studio の XAML マークアップエディターでは、解決できないリソースキーへの参照が強調表示されます。たとえば XAML マークアップエディターでは、スタイルキー ListViewItemTextBlockStyle への参照の下に赤い波線が引かれます。これを修正しない場合、エミュレーターかデバイスに展開しようとしたときにアプリが直ちに終了します。したがって、XAML マークアップの正確性に関する作業に着手することが重要です。また、そのような問題を捕捉するために Visual Studio が優れたツールであることがわかります。

まだサポートされているキーに関して、デザイン言語の変更は、一部のスタイルによって設定されるプロパティが変更されたことを意味します。たとえば、TitleTextBlockStyle は FontSize を Windows ストアアプリでは 14.667px に設定し、Windows Phone ストアアプリでは 18.14px に設定します。ただし、同じスタイルで、FontSize が Windows 10 アプリではかなり大きい 24px に設定されます。設計とレイアウトを確認し、適切なスタイルを適切な場所で使用します。詳しくは、「フォントのガイドライン」と「UWP アプリの設計」をご覧ください。

サポートされなくなったキーの完全な一覧を次に示します。

CheckBoxAndRadioButtonMinWidthSize
CheckBoxAndRadioButtonTextPaddingThickness
ComboBoxFlyoutListPlaceholderTextOpacity
ComboBoxFlyoutListPlaceholderTextThemeMargin
ComboBoxHighlightedBackgroundThemeBrush
ComboBoxHighlightedBorderThemeBrush
ComboBoxHighlightedForegroundThemeBrush
ComboBoxInlinePlaceholderTextForegroundThemeBrush
ComboBoxInlinePlaceholderTextThemeFontWeight
ComboBoxItemDisabledThemeOpacity
ComboBoxItemHighContrastBackgroundThemeMargin
ComboBoxItemMinHeightThemeSize
ComboBoxPlaceholderTextBlockStyle
ComboBoxPlaceholderTextThemeMargin
CommandBarBackgroundThemeBrush
CommandBarForegroundThemeBrush
ContentDialogButton1HostPadding
ContentDialogButton2HostPadding
ContentDialogButtonsMinHeight
ContentDialogContentLandscapeWidth
ContentDialogContentMinHeight
ContentDialogDimmingColor
ContentDialogTitleMinHeight
ControlContextualInfoTextBlockStyle
ControlHeaderContentPresenterStyle
ControlHeaderTextBlockStyle
FlyoutContentPanelLandscapeThemeMargin
FlyoutContentPanelPortraitThemeMargin
GrabberMargin
GridViewItemMargin
GridViewItemPlaceholderBackgroundThemeBrush
GroupHeaderTextBlockStyle
HeaderContentPresenterStyle
HighContrastBlack
HighContrastWhite
HubHeaderCharacterSpacing
HubHeaderFontSize
HubHeaderMarginThickness
HubSectionHeaderCharacterSpacing
HubSectionHeaderFontSize
HubSectionHeaderMarginThickness
HubSectionMarginThickness
InlineWindowPlayPauseMargin
ItemTemplate
LeftFullWindowMargin
LeftMargin
ListViewEmptyStaticTextBlockStyle
ListViewItemContentTextBlockStyle
ListViewItemContentTranslateX
ListViewItemMargin
ListViewItemMultiselectCheckBoxMargin
ListViewItemSubheaderTextBlockStyle
ListViewItemTextBlockStyle
MediaControlPanelAudioThemeBrush
MediaControlPanelPhoneVideoThemeBrush
MediaControlPanelVideoThemeBrush
MediaControlPanelVideoThemeColor
MediaControlPlayPauseThemeBrush
MediaControlTimeRowThemeBrush
MediaControlTimeRowThemeColor
MediaDownloadProgressIndicatorThemeBrush
MediaErrorBackgroundThemeBrush
MediaTextThemeBrush
MenuFlyoutBackgroundThemeBrush
MenuFlyoutBorderThemeBrush
MenuFlyoutLandscapeThemePadding
MenuFlyoutLeftLandscapeBorderThemeThickness
MenuFlyoutPortraitBorderThemeThickness
MenuFlyoutPortraitThemePadding
MenuFlyoutRightLandscapeBorderThemeThickness
MessageDialogContentStyle
MessageDialogTitleStyle
MinimalWindowMargin
PasswordBoxCheckBoxThemeMargin
PhoneAccentBrush
PhoneBackgroundBrush
PhoneBackgroundColor
PhoneBaseBlackColor
PhoneBaseHighColor
PhoneBaseLowColor
PhoneBaseLowSolidColor
PhoneBaseMediumHighColor
PhoneBaseMediumMidColor
PhoneBaseMediumMidSolidColor
PhoneBaseMidColor
PhoneBaseWhiteColor
PhoneBorderThickness
PhoneButtonBasePressedForegroundBrush
PhoneButtonContentPadding
PhoneButtonFontWeight
PhoneButtonMinHeight
PhoneButtonMinWidth
PhoneChromeBrush
PhoneChromeColor
PhoneControlBackgroundColor
PhoneControlDisabledColor
PhoneControlForegroundColor
PhoneDisabledBrush
PhoneDisabledColor
PhoneFontFamilyLight
PhoneFontFamilySemiBold
PhoneForegroundBrush
PhoneForegroundColor
PhoneHighContrastSelectedBackgroundThemeBrush
PhoneHighContrastSelectedForegroundThemeBrush
PhoneImagePlaceholderColor
PhoneLowBrush
PhoneMidBrush
PhonePageBackgroundColor
PhonePivotLockedTranslation
PhonePivotUnselectedItemOpacity
PhoneRadioCheckBoxBorderBrush
PhoneRadioCheckBoxBrush
PhoneRadioCheckBoxCheckBrush
PhoneRadioCheckBoxPressedBrush
PhoneStrokeThickness
PhoneTextHighColor
PhoneTextLowColor
PhoneTextMidColor
PhoneTextOverAccentColor
PhoneTouchTargetLargeOverhang
PhoneTouchTargetOverhang
PivotHeaderItemPadding
PlaceholderContentPresenterStyle
ProgressBarHighContrastAccentBarThemeBrush
ProgressBarIndeterminateRectagleThemeSize
ProgressBarRectangleStyle
ProgressRingActiveBackgroundOpacity
ProgressRingElipseThemeMargin
ProgressRingElipseThemeSize
ProgressRingTextForegroundThemeBrush
ProgressRingTextThemeMargin
ProgressRingThemeSize
RichEditBoxTextThemeMargin
RightFullWindowMargin
RightMargin
ScrollBarMinThemeHeight
ScrollBarMinThemeWidth
ScrollBarPanningThumbThemeHeight
ScrollBarPanningThumbThemeWidth
SliderThumbDisabledBorderThemeBrush
SliderTrackBorderThemeBrush
SliderTrackDisabledBorderThemeBrush
TextBoxBackgroundColor
TextBoxBorderColor
TextBoxDisabledHeaderForegroundThemeBrush
TextBoxFocusedBackgroundThemeBrush
TextBoxForegroundColor
TextBoxPlaceholderColor
TextControlHeaderMarginThemeThickness
TextControlHeaderMinHeightSize
TextStyleExtraExtraLargeFontSize
TextStyleExtraLargePlusFontSize
TextStyleMediumFontSize
TextStyleSmallFontSize
TimeRemainingElementMargin

SemanticZoom に関する変更

SemanticZoom での縮小表示のジェスチャは、Windows Phone モデルで収束され、グループヘッダーをタップまたはクリックするという動作になりました (このため、デスクトップコンピューターでは、縮小表示するためのマイナス記号のボタンのアフォーダンスは表示されなくなります)。これで、デバイスに関係なく同一で一貫性のある動作を実現できます。Windows Phone モデルと外観面で異なる点の 1 つは、縮小表示ビュー (ジャンプリスト) が、拡大表示ビューをオーバーレイするのではなく、拡大表示ビューを置き換えることです。このため、縮小表示ビューから半透明の背景を削除することができます。

Windows Phone ストアアプリでは、縮小表示ビューが画面のサイズに合わせて拡張されます。Windows ストアアプリと Windows 10 アプリでは、縮小表示ビューのサイズは、SemanticZoom コントロールの境界に制限されます。

Windows Phone ストアアプリでは、縮小表示ビューで背景に透明度がある場合、そのビュー (z オーダー) の背後のコンテンツが透けて表示されます。Windows ストアアプリと Windows 10 アプリでは、縮小表示ビューの背後に何も表示されません。

Windows ストアアプリでは、アプリが非アクティブ化して再アクティブ化されると、縮小表示ビューが終了し (表示されていた場合)、拡大表示ビューが代わりに表示されます。Windows Phone ストアアプリと Windows 10 アプリでは、表示されていた場合、拡大表示ビューが表示されたままになります。

Windows Phone ストアアプリと Windows 10 アプリでは、[戻る] ボタンを押すと、縮小表示ビューが終了します。Windows ストアアプリの場合、組み込みの [戻る] ボタンの処理はないため、該当しません。

テーマの変更

ユニバーサル 8.1 アプリでは、既定のテーマは濃色になっています。Windows 10 デバイスでは既定のテーマが変更されていますが、App.xaml で要求するテーマを宣言して使用するテーマを制御できます。たとえば、すべてのデバイスで濃色テーマを使うには、RequestedTheme="Dark" をルートの Application 要素に追加します。

テキスト

テキスト (または文字体裁) は UWP アプリの重要な要素であり、移植する際に、新しいデザイン言語と調和するように、ビューの視覚的なデザインに戻ることもできます。次の図を使用して、利用可能なユニバーサル Windows ランタイム (UWP) の TextBlock システムスタイルを見つけます。使用した Windows Phone Silverlight スタイルに対応するものを見つけます。また、独自のユニバーサルスタイルを作成し、Windows Phone Silverlight システムスタイルからプロパティをコピーすることもできます。

Windows 10 アプリのシステム TextBlock スタイル

Windows ストアアプリと Windows Phone ストアアプリでは、既定のフォントファミリは Global User Interface です。Windows 10 アプリでは、既定のフォントファミリは Segoe UI です。この結果、アプリでのフォントメトリックの表示が異なる可能性があります。8.1 のテキストの外観を再現する場合は、LineHeight や LineStackingStrategy などのプロパティを使って、独自のメトリックを設定できます。

Windows ストアアプリと Windows Phone ストアアプリでは、テキストの既定の言語が、ビルドの言語または en-us に設定されます。Windows 10 アプリでは、Windows の既定の言語はアプリの最上位の言語 (フォントフォールバック) に設定されます。FrameworkElement.Language を明示的に設定できますが、そのプロパティの値を設定しないようにすると、フォントの優れたフォールバック動作を得ることができます。

詳しくは、「フォントのガイドライン」と「UWP アプリの設計」をご覧ください。テキストコントロールの変更については、上記の「コントロール」セクションもご覧ください。

ウィンドウサイズ

ユニバーサル 8.1 アプリでは、アプリマニフェストの要素 ApplicationView を使って、ウィンドウの最小幅が宣言されます。UWP アプリでは、命令型コードを使って最小サイズ (幅と高さ) を指定できます。既定の最小サイズは 500 x 320 epx で、このサイズは受け入れられる最も小さいサイズでもあります。受け入れられる最も大きいサイズは 500 x 500 epx です。

    Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetPreferredMinSize
        (new Size { Width = 500, Height = 500 });

次のトピックは、「入出力、デバイス、アプリモデルの移植」です。

Windows ランタイム 8 の XAML と UI の UWP への移植

命令型コード

アダプティブ/応答性の高い UI

"戻る" ボタンの処理

チャーム

コントロールとコントロールスタイル/テンプレート

Windows 10 でのデザイン言語

有効ピクセル、視聴距離、スケールファクター

GridView/ListView に関する変更

ローカリゼーションとグローバリゼーション

リモート再生

リソースキー、および TextBlock スタイルサイズ

SemanticZoom に関する変更

テーマの変更

テキスト

ウィンドウサイズ

関連トピック

その他のリソース

Windows ランタイム 8 の XAML と UI の UWP への移植

命令型コード

アダプティブ/応答性の高い UI

"戻る" ボタンの処理

チャーム

コントロールとコントロール スタイル/テンプレート

Windows 10 でのデザイン言語

有効ピクセル、視聴距離、スケール ファクター

GridView/ListView に関する変更

ローカリゼーションとグローバリゼーション

リモート再生

リソース キー、および TextBlock スタイル サイズ

SemanticZoom に関する変更

テーマの変更

テキスト

ウィンドウ サイズ

関連トピック

その他のリソース

コントロールとコントロールスタイル/テンプレート

有効ピクセル、視聴距離、スケールファクター

リソースキー、および TextBlock スタイルサイズ

ウィンドウサイズ