XAML-デバッグ

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

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

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つのテキストブロックのテキストプロパティは静的に「Name」と「Title」に設定され、他の2つのテキストブロックのTextプロパティは「FirstName」と「Title」にバインドされます。ただし、クラス変数は、誤った変数名である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(); 
      }
   }
}

このアプリケーションを実行してみましょう。メインウィンドウで、その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デバッグツールは、実行時にXAMLコードを検査するためにVisual Studio2015で導入されました。これらのツールを使用すると、XAMLコードは、実行中のWPFアプリケーションのビジュアルツリーの形式で表示され、ツリー内のさまざまなUI要素のプロパティも表示されます。このツールを有効にするには、以下の手順に従ってください。

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

Step 3 −左側の[デバッグ]項目の[一般オプション]に移動します。
Step 4 −強調表示されたオプション、つまり「XAMLのUIデバッグツールを有効にする」をチェックします
Step 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 Studio2015でのみ使用できます。古いバージョンのVisualStudioを使用している場合は、このツールを使用できません。ただし、XAML Spy for Visual Studioなど、VisualStudioと統合できる別のツールがあります。からダウンロードできますhttp://xamlspy.com/download。古いバージョンのVisualStudioを使用している場合は、このツールをダウンロードすることをお勧めします。