WinUI 3 用の XAML ランタイムデザインツール

Visual Studioには、アプリの実行中に WinUI 3 XAML を設計、反復処理、検査できる一連のランタイムツールが含まれています。これらを組み合わせて使用すると、静的近似ではなく、実際の UI (実際のスタイル、実際のデータテンプレート、実際のアニメーション) を示す高速な編集/再読み込み検査ループが提供されます。

Note

Visual Studio XAML デザイナー (ドラッグアンドドロップの [デザイン] タブ) では、現在 WinUI 3 プロジェクトはサポートされていません。 .xaml ファイルを開き、XML エディターのみが表示されている場合、インストールは中断されません。デザイナーは WinUI 3 では使用できません。この機能リクエストは、Developer Community の WinUI 3 デスクトップアプリ向けの XAML デザイナーサポートを追加で追跡されています。エンジニアリング作業の背景については、 WindowsAppSDK ディスカッション #4710 を参照してください。

この記事で説明するランタイムツールは、デザイナーが使用可能かどうかに関係なく重要です。この記事では、ワークフローについて説明します。

使用するもの

ツール	それが何をするか	開く方法
XAML ホットリロード	再起動せずに実行中のアプリに XAML の変更をプッシュする	自動 — デバッグ中に `.xaml` ファイルを編集する
ライブビジュアルツリー	完全なランタイム要素ツリーを表示し、アプリ内の要素を選択できます	デバッグ>Windows>Live Visual Tree
Live プロパティエクスプローラー	実行時に選択した要素のすべてのプロパティを表示および編集できます。	デバッグ>Windows>Live プロパティエクスプローラー
XAML ライブプレビュー	ウィンドウを切り替えずに検査できるように、実行中のアプリをVisual Studio内にレンダリングします	デバッグ>Windows>XAML Live Preview

Tip

ライブビジュアルツリーと Live プロパティエクスプローラーを並べてドッキングします。これらを組み合わせることで、実際のランタイム値を示す詳細な検査ビューが提供されます。

Prerequisites

Visual Studio 2022 バージョン 17.0 以降 (XAML ホットリロードとライブビジュアルツリーが含まれています)。
Windows アプリ SDKを使用する WinUI 3 プロジェクト。 WinUI 3 プロジェクトを作成して実行する方法を参照してください。
プロジェクトのターゲット.NET 6 以降 (C#) であるか、C++/WinRT を使用する必要があります。

手順 1: デバッガーでアプリを起動する

F5 (またはデバッグ>デバッグの開始) キーを押します。 XAML ホットリロードは、デバッガーがアタッチされると自動的にアクティブになります。

XAML ホットリロード ツールバーがアプリ内オーバーレイに表示されます。表示されない場合は、設定が有効になっていることを確認します。

Tools>Options>Debugging>XAML ホットリロードに移動します。
[XAML ホットリロードを有効にする] がオンになっていることを確認します。

Important

XAML ホットリロードにはデバッガーが必要です。デバッグなしで実行すると (Ctrl + F5 キーを押しながら)、ホットリロード、ライブビジュアルツリー、および Live プロパティエクスプローラーが無効になります。

手順 2: XAML を編集して変更をすぐに確認する

アプリを実行したら、エディターで任意の .xaml ファイルに切り替えて変更します。たとえば、 Background の色を変更したり、新しい Buttonを追加したりします。実行中のアプリは、再起動せずに 1 秒または 2 秒以内に更新されます。

ホットリロードできることとできないこと

ホットリロードは、最も一般的な編集を処理します。

要素の追加、削除、または並べ替え
プロパティ値の変更 (色、余白、テキスト、サイズ)
スタイルとリソースディクショナリの追加または変更
データテンプレートのコンテンツの変更

一部の変更には再起動が必要です。

新しいクラス、コードビハインドのイベントハンドラー、または x:Class の変更の追加
App.xaml マージされたディクショナリを変更する（場合によっては）
新しいプロパティを参照する x:Bind 式を変更する

ホットリロードで変更を適用できない場合は、ツールバーに通知が表示されます。これらの変更を取得するには、アプリを再起動するだけです。

詳細については、「XAML ホットリロード」を参照してください。

手順 3: ビジュアルツリーとプロパティを調べる

ライブビジュアルツリー ウィンドウ (デバッグ>Windows>Live ビジュアルツリー) を開きます。このウィンドウには、実行中のアプリの UI ツリー内のすべての要素が親子リレーションシップ別に表示されます。

要素を視覚的に選択する

ライブビジュアルツリー ツールバーで、実行中のアプリケーション (十字線ボタン) で [要素の選択] を有効にします。
実行中のアプリ内の任意の要素をクリックします。ツリーはその要素に移動し、 Live プロパティエクスプローラー にそのプロパティが表示されます。

これは、コードで動的に作成された要素を含め、アプリがレンダリングする内容を正確に反映する点を除いて、デザインサーフェイス上の要素をクリックする場合と同等のランタイムです。

実行時にプロパティを編集する

Live プロパティエクスプローラーでは、プロパティ値をリアルタイムで変更できます。例えば次が挙げられます。

Marginを変更して間隔を調整し、効果をすぐに確認します。
VisibilityをCollapsedに設定して、要素が非表示になったときの動作をテストします。
WidthまたはHeightを調整して、レスポンシブレイアウトをテストします。

これらのランタイム編集は XAML ファイルに保存されず、実験用です。望みどおりの値が見つかったら、それらを .xaml ファイルに記述します（ここでホットリロードがその値を検出し、永続的な設定にします）。

手順 4: XAML ライブプレビューを使用する

XAML Live Preview では、実行中のアプリが Visual Studio タブ内にレンダリングされるため、ウィンドウを切り替えずにアプリと XAML ソースを並べて表示できます。

これを開くには、デバッグ>WindowsXAML ライブプレビュー>します。

これは、アプリとVisual Studioの間の Alt-Tabbing が不便な単一モニターのセットアップで特に便利です。

詳細については、「 XAML Live Preview」を参照してください。

推奨: UI プレイグラウンドページを作成する

プロジェクトに専用の プレイグラウンドページ を作成します。その唯一の目的は、コントロール、スタイル、レイアウトを試できるようにすることです。これにより、常に視覚的な反復の準備ができているスクラッチパッドが提供され、上記のランタイムツールと特によく組み合わせられます。

プレイグラウンドを設定する

ソリューションエクスプローラーでプロジェクトを右クリックし、[追加>新しいアイテム>テンプレートページ (WinUI 3) を選択します。 UIPlayground.xaml と名前を付けます。

UIPlayground.xamlで、試行するコントロールまたはパターンごとにセクションを含むScrollViewerを追加します。

<Page
    x:Class="MyApp.UIPlayground"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <ScrollViewer Padding="24">
        <StackPanel Spacing="24">

            <!-- Section: Buttons -->
            <TextBlock Text="Buttons" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <StackPanel Orientation="Horizontal" Spacing="8">
                <Button Content="Standard"/>
                <Button Content="Accent" Style="{StaticResource AccentButtonStyle}"/>
                <ToggleButton Content="Toggle"/>
                <HyperlinkButton Content="Link" NavigateUri="https://learn.microsoft.com"/>
            </StackPanel>

            <!-- Section: Text input -->
            <TextBlock Text="Text input" Style="{StaticResource SubtitleTextBlockStyle}"/>
            <TextBox PlaceholderText="Type here..." Width="300" HorizontalAlignment="Left"/>
            <PasswordBox PlaceholderText="Password" Width="300" HorizontalAlignment="Left"/>

            <!-- Add more sections as needed -->

        </StackPanel>
    </ScrollViewer>
</Page>

遊び場に簡単にアクセスできます。開発中に、 App.xaml.csのスタートアップページとして設定します。
```
// In App.xaml.cs, OnLaunched method — swap in for quick playground access:
// rootFrame.Navigate(typeof(UIPlayground));
```
または、アプリで NavigationViewを使用している場合は、デバッグビルドにのみ表示されるメニュー項目を追加します。たとえば、メインウィンドウのコードビハインドでは次のようになります。
```
// In your main window or shell page constructor, after InitializeComponent():
#if DEBUG
    NavView.MenuItems.Add(new NavigationViewItem
    {
        Content = "UI Playground",
        Tag = typeof(UIPlayground)
    });
#endif
```
ここで、NavViewはNavigationView コントロールのx:Nameです。

遊び場の使い方

F5 キーを押してアプリを起動し、プレイグラウンドページに移動します。
実行中のアプリと並べて .xaml ファイルを開きます (または XAML ライブプレビューを使用します)。
XAML エディターでコントロールを追加または変更する — ホットリロードにより変更が即座に反映されます。
ライブビジュアルツリーを使用して、レンダリングされたコントロールをクリックし、Live プロパティエクスプローラーで実際のレイアウト値を調べます。
コントロールの外観に問題がなければ、XAML を実際のページにコピーします。

このパターンでは、"type-reload-inspect" サイクルが提供されます。実際のコードが実行されるため、実際のデータテンプレート、実際のスタイル、および実際のアニメーションが表示されます。

デザイン時とランタイムのアプローチの比較

一般的な UI デザインタスクがランタイムツールにどのようにマップされるかを次に示します。

Task	ランタイムツール
ページにコントロールを追加する	XAML 要素を入力する - IntelliSense によってタグと必要なプロパティが完了します
コントロールをプレビューする	ホットリロードを使用して実行中のアプリでライブ表示する
検査する要素を選択する	Live Visual Tree>Select Element (十字カーソル) を使用します
プロパティの表示または編集	Live プロパティエクスプローラーを使用する
サイズまたは位置を調整する	XAML または Live プロパティエクスプローラーで `Width`、 `Height`、 `Margin` を編集する

効率的なワークフローのヒント

WinUI 3 ギャラリーアプリを使用します。 Microsoft Storeからインストールするか、GitHubからビルドします。対話型の例とコピー可能な XAML を使用して、すべての WinUI 3 コントロールを示します。 XAML を記述する前に参照できるビジュアルカタログと考えてください。
遊び場のページを開いたままにしておきます。 アプリのリビングスタイルガイドのように扱います。
d:DesignHeightとd:DesignWidthを使用します。 デザイナーがなくても、これらの属性は IntelliSense に役立ち、エディターで開いたときにページのサイズを一貫したサイズに保ちます。
XAML バインディングエラーウィンドウと組み合わせる。 デバッグ>>XAML バインディングエラーから開くと、デザイナーでは表示されないバインディングエラーを検出できます。
コミュニティツールキットを使用します。 Windows Community Toolkit には、手動でコードを記述するために必要なレイアウトの量を減らすコントロールとヘルパーが用意されています。

フィードバック

このページはお役に立ちましたか?

最終更新: 2026-09-19