XAML-デバッグ

手続き型言語（C＃、C/C ++など）でのデバッグに精通しており、 break の使用方法を知っていて、XAMLで同じ種類のデバッグを期待している場合は、そのことを知って驚くでしょう他の手続き言語コードをデバッグするために使用した方法のように、XAMLコードをデバッグすることはまだできません。 XAMLアプリのデバッグとは、エラーを見つけようとすることです。

データバインディングでは、データは画面に表示されず、理由もわかりません
または、問題は複雑なレイアウトに関連しています。
または、位置合わせの問題または余白の色、オーバーレイなどの問題 ListBoxやコンボボックスなどの広範なテンプレートを使用します。

XAMLでのデバッグは、通常、バインディングが機能するかどうかを確認し、機能していない場合は何が間違っているかを確認するために行います。残念ながら、XAMLバインディングにブレークポイントを設定することはSilverlight以外ではできませんが、出力ウィンドウを使用してデータバインディングエラーをチェックすることはできます。次のXAMLコードを見て、データバインディングのエラーを見つけましょう。

<Window x:Class = "DataBindingOneWay.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604">

   <Grid>
      <StackPanel Name = "Display">
         <StackPanel Orientation = "Horizontal" Margin = "50, 50, 0, 0">
            <TextBlock Text = "Name: " Margin = "10" Width = "100"/>
            <TextBlock Margin = "10" Width = "100" Text = "{Binding FirstName}"/>
         </StackPanel>

         <StackPanel Orientation = "Horizontal" Margin = "50,0,50,0">
            <TextBlock Text = "Title: " Margin = "10" Width = "100"/>
            <TextBlock Margin = "10" Width="100" Text = "{Binding Title}"/>
         </StackPanel>
      </StackPanel>
   </Grid>

</Window>

2つのテキストブロックのテキストプロパティは「名前」と「タイトル」に静的に設定され、他の2つのテキストブロックのテキストプロパティは「名」と「タイトル」にバインドされます。しかし、クラス変数は、誤った変数名であるEmployeeクラスのNameおよびTitleとして意図的に使用されます。目的の出力が表示されない場合に、このタイプの間違いがどこにあるかを理解してみましょう。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace DataBindingOneWay {
   public class Employee {
      public string Name { get; set; }
      public string Title { get; set; }

      public static Employee GetEmployee() {
         var emp = new Employee() {
            Name = "Ali Ahmed",
            Title = "Developer"
         };
         return emp;
      }
   }
}

C＃コードでのMainWindowクラスの実装は次のとおりです-

using System;
using System.Windows;
using System.Windows.Controls;

namespace DataBindingOneWay {
  ///<summary>
     ///Interaction logic for MainWindow.xaml
  ///</summary>

   public partial class MainWindow : Window {
      public MainWindow() {
         InitializeComponent();
         DataContext = Employee.GetEmployee();
      }
   }
}

このアプリケーションを実行してみましょう。MainWindowで、EmployeeオブジェクトのTitleに正常にバインドされたが、名前がバインドされていないことがすぐにわかります。

従業員の詳細

名前で何が起こったのかを確認するために、大量のログが生成される出力ウィンドウを見てみましょう。

エラーを見つける最も簡単な方法は、エラーを検索することです。次の_「BindingExpression path error： 'FirstName'_ property not found on _'object' Employe _

System.Windows.Data Error: 40 : BindingExpression path error: 'FirstName'
   property not found on 'object' ''Employee' (HashCode = 11611730)'.
BindingExpression:Path = FirstName;
DataItem = 'Employee' (HashCode = 11611730); target element is 'TextBlock' (Name = '');
target property is 'Text' (type 'String')

FirstNameはEmployeeクラスのメンバーではないことを明確に示しているため、アプリケーションでこの種の問題を解決するのに役立ちます。

*FirstName* を *Name* に再度変更すると、目的の出力が表示されます。

XAMLのUIデバッグツール

XAMLのUIデバッグツールはVisual Studio 2015で導入され、実行時にXAMLコードを検査します。これらのツールを使用すると、XAMLコードは実行中のWPFアプリケーションの視覚的なツリーの形式で表示され、ツリー内のさまざまなUI要素のプロパティも表示されます。このツールを有効にするには、以下の手順に従ってください。

*ステップ1 *-[ツール]メニューに移動し、[ツール]メニューから[オプション]を選択します。
*ステップ2 *-次のダイアログボックスが表示されます。

デバッグダイアログボックス

*ステップ3 *-左側の[デバッグ]項目の下の[全般オプション]に移動します。
*ステップ4 *-ハイライトされたオプション、つまり「XAMLのUIデバッグツールを有効にする」をチェックします
*ステップ5 *-[OK]ボタンを押します。

XAMLアプリケーションを実行するか、次のXAMLコードを使用します-

<Window x:Class = "XAMLTestBinding.MainWindow"
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "604">

   <StackPanel>
      <ComboBox Name = "comboBox" Margin = "50" Width = "100">
         <ComboBoxItem Content = "Green"/>
         <ComboBoxItem Content = "Yellow" IsSelected = "True"/>
         <ComboBoxItem Content = "Orange"/>
      </ComboBox>

      <TextBox Name = "textBox" Margin = "50" Width = "100"
         Height = "23" VerticalAlignment = "Top" Text = "{
         Binding ElementName = comboBox, Path = SelectedItem.Content,
         Mode = TwoWay, UpdateSourceTrigger = PropertyChanged}"
         Background = "{Binding ElementName = comboBox, Path = SelectedItem.Content}">
      </TextBox>
   </StackPanel>

</Window>

アプリケーションを実行すると、すべての要素がツリーで表示されるライブビジュアルツリーが表示されます。

ビジュアルツリー

このライブビジュアルツリーは、UI要素が配置されている場所を理解するための完全なレイアウト構造を示しています。ただし、このオプションはVisual Studio 2015でのみ使用可能です。 Visual Studioの古いバージョンを使用している場合、このツールは使用できません。ただし、XAML Spy for Visual Studioなど、Visual Studioと統合できる別のツールがあります。 [[1]] 古いバージョンのVisual Studioを使用している場合は、このツールをダウンロードすることをお勧めします。

Xaml-debugging

XAML-デバッグ

XAMLのUIデバッグツール