次の方法で共有


Blend で XAML をデバッグする

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

構文エラー

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

ヒント

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

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

  • キーワードのスペルが間違っているか、大文字と小文字が間違っています。

  • 属性またはテキスト文字列の周囲に引用符がありません。

  • XAML 要素に終了タグがありません。

  • XAML 要素は、許可されていない場所に存在します。

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

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

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

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

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

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

    [ 新しいプロジェクト ] ダイアログ ボックスで、プロジェクトの種類の一覧が左側に表示されます。 プロジェクトの種類をクリックすると、それに関連付けられているプロジェクト テンプレートが右側に表示されます。

  2. プロジェクトの種類の一覧で、[ Windows ユニバーサル] をクリックします。

  3. プロジェクト テンプレートの一覧で、空のアプリ (Universal Windows) をクリックします。

  4. [ 名前 ] テキスト ボックスに「 DebuggingSample」と入力します。

  5. [ 場所 ] テキスト ボックスで、プロジェクトの場所を確認します。

  6. [言語] の一覧で [Visual C#] をクリックし、[OK] をクリックしてプロジェクトを作成します。

  7. デザイン サーフェイスを右クリックし、[ ソースの表示 ] をクリックして 分割 ビューに切り替えます。

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

    <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>
    
  9. 既定の 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>
    
  10. Ctrl++キーを押してプロジェクトをビルドします。

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

    Visual Studio の Blend で XAML

XAML エラーを解決する

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

XAML エラーを解決するには

  1. 一覧の最初のエラーをダブルクリックします。 説明は"属性で値 '<' が無効です。" です。エラーをダブルクリックすると、ポインターはコード内の対応する場所を見つけます。 上記の<Buttonは有効であり、エラー メッセージで推奨される属性ではありません。 上記のコード行を見ると、属性 Top の終了引用符が見つからないことがわかります。 終了引用符を入力します。 結果パネルのエラー一覧が更新され、変更が反映されます。

  2. "'0' は名前の先頭で無効です" という説明をダブルクリックします Margin="0,149,0,0" は整形式のように見えます。 ただし、 Margin の色分けは、コード内の Margin の他のインスタンスと一致しないことに注意してください。 前の名前と値のペア (VerticalAlignment="Top) には終了引用符がないため、 Margin=" は前の属性の値の一部として読み取られ、0 は名前と値のペアの先頭として読み取られます。 Topの終了引用符を入力します。 結果パネルのエラー一覧が更新され、変更が反映されます。

  3. 残りのエラー "終了 XML タグ 'Button' が一致しません" をダブルクリックします。ポインターは終了 Grid タグ (</Grid>) にあり、エラーが Grid オブジェクト内にあることを示します。 2 番目の Button オブジェクトに終了タグがないことに注意してください。 終了 /を追加すると、[ 結果 ] パネルの一覧が更新されます。 これらの初期エラーが解決されたので、さらに 2 つのエラーが特定されました。

  4. "メンバー 'content' が認識されないか、アクセスできません。" をダブルクリックします。ccontent は大文字になります。 小文字の "c" を大文字の "c" に置き換えます。

  5. [プロパティ 'Mame' は、 http://schemas.microsoft.com/winfx/2006/xaml 名前空間に存在しません] をダブルクリックします。"Mame" の "M" は "N" にする必要があります。"M" を "N" に置き換えます。XAML を解析できるようになったので、アプリがデザイン 画面に表示されます。

    Blend for Visual Studio blend_debugArtboard_XAMLでの 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 アプリ コミュニティ フォーラム で問題に関連する投稿を検索したり、質問を投稿したりできます。