XAML ライブ プレビュー: デスクトップ アプリ UI を取り込んで編集する
XAML ライブ プレビューを使用して、デスクトップ アプリのユーザー インターフェイス (UI) を取り込み、Visual Studio 内のドッキングされたウィンドウに表示することができます。これにより、XAML ホット リロードを使用してより簡単にアプリを変更し、変更を加えたときにその内容をリアルタイムで簡単に確認できるようになります。
[XAML ライブ プレビュー] ウィンドウ
[XAML ライブ プレビュー] ウィンドウは、デバッグ中に使用できます。 それを開くには、[デバッグ]>[ウィンドウ]>[XAML ライブ プレビュー] の順に移動します。
または、アプリケーション ツールバーの [Show in XAML Live Preview]/(XAML ライブ プレビューに表示する/) ボタンを選択します。
スクロールとズーム
スクロール バーでのスクロールに加え、次の操作を使用することもできます。
- 垂直と水平の両方のマウス ホイール (マウスでサポートされている場合)。
- タッチパッドの 2 本指のスクロール (垂直と水平の両方)。
- Ctrl キーの押下とマウス ドラッグ アクションとの組み合わせ。
ズームについては、次の操作を使用することもできます。
- 左下隅の [拡大/縮小] ボタン。
- キーボードを使用する場合は、Ctrl+プラス記号 (+) または Ctrl+ マイナス記号 (-) キーボード ショートカット キーの押下。
- Ctrl キーの押下とマウス ホイール アクションとの組み合わせ。またはタッチパッドでのピンチ操作によるズーム アクション。 マウスを使用すれば、制御領域を維持できるという利点も得られます。
要素の選択
XAML ライブ プレビューでの要素の選択は、実行中のアプリケーションでの選択に似ています。 ライブ ビジュアル ツリーまたはソース XAML で要素を見つけることができます。
要素の選択は、最初の 4 つのツール バー ボタンによって制御されます (左から右方向)。
ツール バー ボタンを使用すると、次のアクションが行われます。
- [要素の選択] では、要素選択アクションが開始されます。つまり、XAML ライブ プレビューでアプリケーション コンテンツの上にマウスを移動すると、要素が強調表示されます。 要素をクリックすると、それがライブ ビジュアル ツリーで選択されます。 [選択された要素のプレビュー] が有効で、ソース XAML が使用可能な場合は、ソースにも移動します。 この動作は、ライブ ビジュアル ツリーと同じです。
- [選択中に要素情報を表示する] は、マウスの下にある要素に関するサイズ、色、フォント情報の表示を制御するトグル ボタンです。
- [マイ XAML のみ] は、どの要素 (すべて、またはソリューションでソース XAML を使用できる要素のみ) を強調表示するかを制御するトグル ボタンです。 この動作は、ライブ ビジュアル ツリーと同じです。
- [選択された項目のプレビュー] は、要素が選択されているときにソース XAML へのナビゲーションを制御するトグル ボタンです。 既定ではオフになっています。 この動作は、ライブ ビジュアル ツリーと同じです。
ルーラー
ルーラーは、アプリケーション内の要素を配置するのに役立ちます。 前のルーラーまでの距離がアプリケーション単位で表示されます。 この方法の場合、アプリケーションの異なる部分間の距離を確認するのに役立ちます。
次のように、ツール バー ボタンの 2 番目のグループではルーラーを制御します (左から右方向)。
- 垂直ルーラーを追加。 1 つの垂直ルーラーを追加します。 このボタンを続けて数回クリックすると、既存のルーラーと重ならないように新しいルーラーが配置されます。
- 水平ルーラーを追加。 垂直ルーラーと同様に、1 つの水平ルーラーを追加します。
- すべてのルーラーを追加。 すべてのルーラーを一度に削除します。
- ルーラーの色を選択。 ルーラーの色を変更します。
- ルーラーの表示の切り替え。 1 回のクリックですべてのルーラーを非表示または表示します。
ルーラーはキーボードに対応しています。 タブで移動できます。 方向キーを使用すると、ルーラーを一度に 1 ピクセル移動したり、Ctrl キーと方向キーを組み合わせ、一度に 10 アプリ単位で移動することができます。 Del キーを押すと、現在選択されているルーラーが削除されます。 ラベルの近くにある [ルーラーの削除] ボタンを選択することで、マウスでルーラーを削除することもできます。
[要素の選択] の使用時に、要素の周囲にルーラーを追加することもできます。 右クリックすると、垂直ルーラーが追加されます。 水平ルーラーを追加するには、Shift キーを押しながら右クリックします。
マルチウィンドウ アプリケーション
アプリケーションに複数のウィンドウがある場合は、[ウィンドウ] コンボ ボックスを使用して表示するウィンドウを選択できます。 または、プレビューするウィンドウにあるアプリケーション ツール バーの [Show in XAML Live Preview]/(XAML ライブ プレビューに表示する/) ボタンを使用します。
サポートされているプラットフォーム
Visual Studio 2022 の初期リリースでは、次のプラットフォームとデバッグ シナリオがサポートされています。
| プラットフォーム | 要素の選択とヒント | ルーラー |
|---|---|---|
| WPF | はい | はい |
| UWP | はい | はい |
| WinUI3 デスクトップ | はい | はい |
| .NET MAUI | はい | はい |
| Xamarin 5.0 以上 (Android Emulator) | いいえ | はい (px*) |
Note
上の表では、(px*) はピクセル単位で表示されるルーラーを示しています。他のすべてのプラットフォームでは、モニターの DPI に依存するプラットフォーム単位で情報が表示されます。
制限事項
XAML ライブ プレビューは、アプリケーションのスクリーンショットを 1 秒に数回取り込むことで機能し、PrintWindow のような使用可能な API が使用されます。 次の制限が適用されます。
- アプリ ウィンドウの一部が画面外にあると、その部分には XAML ホット リロードの変更が表示されない可能性があります。
- SetWindowDisplayAffinity と WDA_EXCLUDEFROMCAPTURE または DwmSetWindowAttribute と DWMWA_CLOAK を使用することで、ウィンドウでスクリーンショットの取り込みがオプトアウトされ、XAML ライブ プレビューで利用できなくなる可能性があります。
次のステップ
XAML ライブ プレビューと密接に組み合わされる XAML ホット リロードについて詳しく学習します。