Blend で XAML をデバッグする

2025-06-17

Blend for Visual Studio のツールを使用して、アプリで XAML をデバッグできます。プロジェクトをビルドすると、エラーが結果パネルに表示されます。エラーをダブルクリックして、エラーに関連するマークアップを見つけます。さらに作業スペースが必要な場合は、F12 キーを押して結果パネルを非表示にすることができます。

構文エラー

構文エラーは、XAML または分離コードファイルが言語の書式設定規則に従っていない場合に発生します。エラーの説明は、修正方法を理解するのに役立ちます。一覧には、ファイルの名前と、エラーが発生した行番号も指定されます。 XAML エラーは、[結果] パネルの [マークアップ] タブに表示されます。

ヒント

XAML は XML ベースのマークアップ言語であり、XML 構文規則に従います。

XAML 構文エラーの一般的な原因は次のとおりです。

キーワードのスペルが間違っているか、大文字と小文字が間違っています。
属性またはテキスト文字列の周囲に引用符がありません。
XAML 要素に終了タグがありません。
XAML 要素は、許可されていない場所に存在します。

一般的な XAML 構文の詳細については、基本的な XAML 構文ガイドを参照してください。

Blend では、単純な分離コード構文エラー、コンパイルエラー、実行時エラーを特定して解決することもできます。ただし、コードビハインドエラーは、Visual Studio を使用することで識別して解決するのがより簡単になる可能性があります。

サンプル XAML コードのデバッグ

次の例では、Blend の単純な XAML デバッグセッションについて説明します。

プロジェクトを作成するには

Blend で[ ファイル ]メニューを開き、[ 新しいプロジェクト]をクリックします。

[ 新しいプロジェクト ] ダイアログボックスで、プロジェクトの種類の一覧が左側に表示されます。プロジェクトの種類をクリックすると、それに関連付けられているプロジェクトテンプレートが右側に表示されます。
プロジェクトの種類の一覧で、[ Windows ユニバーサル] をクリックします。
プロジェクトテンプレートの一覧で、空のアプリ (Universal Windows) をクリックします。
[ 名前 ] テキストボックスに「 DebuggingSample」と入力します。
[ 場所 ] テキストボックスで、プロジェクトの場所を確認します。
[言語] の一覧で [Visual C#] をクリックし、[OK] をクリックしてプロジェクトを作成します。
デザインサーフェイスを右クリックし、[ ソースの表示 ] をクリックして分割ビューに切り替えます。

コードの右上隅にある [コピー ] リンクをクリックして、次のコードをコピーします。

<Grid HorizontalAlignment="Left" Height="222" VerticalAlignment="Top>
     <Button content="Button" x:Mame="Home" HorizontalAlignment="Left" VerticalAlignment="Top"/>
     <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,38,0,0">
     <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,75,0,0"/>
     <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,112,0,0"/>
     <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top Margin="0,149,0,0"/>
</Grid>

既定の Grid を見つけ、開いているグリッドタグと終了 グリッド タグの間にコードを貼り付けます。完了すると、コードは次のようになります。

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
     <Grid HorizontalAlignment="Left" Height="222" VerticalAlignment="Top>
          <Button content="Button" x:Mame="Home" HorizontalAlignment="Left" VerticalAlignment="Top"/>
          <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,38,0,0">
          <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,75,0,0"/>
          <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,112,0,0"/>
          <Button Content="Button" HorizontalAlignment="Left" VerticalAlignment="Top Margin="0,149,0,0"/>
     </Grid>
</Grid>

Ctrl++キーを押してプロジェクトをビルドします。

プロジェクトをビルドできないことを示すエラーメッセージが表示され、エラーを一覧表示する結果パネルがアプリの下部に表示されます。

XAML エラーを解決する

XAML エラーが検出されると、プロジェクトに無効なマークアップが含まれていることを示す警告がデザイン画面に表示されます。エラーを解決すると、[ 結果 ] パネルのエラー一覧が更新されます。すべてのエラーを解決すると、デザインサーフェイスが有効になり、アプリがデザインサーフェイスに表示されます。

XAML エラーを解決するには

一覧の最初のエラーをダブルクリックします。説明は"属性で値 '<' が無効です。" です。エラーをダブルクリックすると、ポインターはコード内の対応する場所を見つけます。上記の<Buttonは有効であり、エラーメッセージで推奨される属性ではありません。上記のコード行を見ると、属性 Top の終了引用符が見つからないことがわかります。終了引用符を入力します。結果パネルのエラー一覧が更新され、変更が反映されます。
"'0' は名前の先頭で無効です" という説明をダブルクリックします Margin="0,149,0,0" は整形式のように見えます。ただし、 Margin の色分けは、コード内の Margin の他のインスタンスと一致しないことに注意してください。前の名前と値のペア (VerticalAlignment="Top) には終了引用符がないため、 Margin=" は前の属性の値の一部として読み取られ、0 は名前と値のペアの先頭として読み取られます。 Topの終了引用符を入力します。結果パネルのエラー一覧が更新され、変更が反映されます。
残りのエラー "終了 XML タグ 'Button' が一致しません" をダブルクリックします。ポインターは終了 Grid タグ (</Grid>) にあり、エラーが Grid オブジェクト内にあることを示します。 2 番目の Button オブジェクトに終了タグがないことに注意してください。終了 /を追加すると、[ 結果 ] パネルの一覧が更新されます。これらの初期エラーが解決されたので、さらに 2 つのエラーが特定されました。
"メンバー 'content' が認識されないか、アクセスできません。" をダブルクリックします。c の content は大文字になります。小文字の "c" を大文字の "c" に置き換えます。
[プロパティ 'Mame' は、 http://schemas.microsoft.com/winfx/2006/xaml 名前空間に存在しません] をダブルクリックします。"Mame" の "M" は "N" にする必要があります。"M" を "N" に置き換えます。XAML を解析できるようになったので、アプリがデザイン画面に表示されます。

Ctrl+Shift+B キーを押してプロジェクトをビルドし、残りのエラーがないことを確認します。

Visual Studio でのデバッグ

Visual Studio で Blend プロジェクトを開くと、アプリでコードをより簡単にデバッグできます。 Visual Studio で Blend プロジェクトを開くには、[プロジェクト ] パネルで プロジェクトを右クリックし、 Visual Studio で [編集] をクリックします。 Visual Studio でデバッグセッションが完了したら、Ctrl + Shift + S キーを押してすべての変更を保存し、Blend に戻ります。プロジェクトを再読み込みするように求められます。 [ はい] をクリックして、 Blend で作業を続けます。

アプリのデバッグの詳細については、「 Visual Studio での UWP アプリのデバッグ」を参照してください。

ヘルプを取得する

Blend アプリのデバッグについてさらにヘルプが必要な場合は、 UWP アプリコミュニティフォーラムで問題に関連する投稿を検索したり、質問を投稿したりできます。