XAML - Debuggen

Wenn Sie mit dem Debuggen in einer beliebigen Verfahrenssprache (wie C #, C / C ++ usw.) vertraut sind und die Verwendung von kennen breakWenn Sie die gleiche Art von Debugging in XAML erwarten, werden Sie überrascht sein, dass es noch nicht möglich ist, einen XAML-Code so zu debuggen, wie Sie es beim Debuggen eines anderen prozeduralen Sprachcodes getan haben. Das Debuggen einer XAML-App bedeutet, dass versucht wird, einen Fehler zu finden.

Bei der Datenbindung werden Ihre Daten nicht auf dem Bildschirm angezeigt und Sie wissen nicht warum
Oder ein Problem hängt mit komplexen Layouts zusammen.
Oder ein Ausrichtungsproblem oder Probleme mit der Randfarbe, Überlagerungen usw. mit einigen umfangreichen Vorlagen wie ListBox und Kombinationsfeld.

Das Debuggen in XAML ist etwas, das Sie normalerweise tun, um zu überprüfen, ob Ihre Bindungen funktionieren, und wenn es nicht funktioniert, um zu überprüfen, was falsch ist. Leider ist das Festlegen von Haltepunkten in XAML-Bindungen nur in Silverlight möglich. Wir können jedoch das Ausgabefenster verwenden, um nach Datenbindungsfehlern zu suchen. Schauen wir uns den folgenden XAML-Code an, um den Fehler bei der Datenbindung zu finden.

<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>

Die Texteigenschaften der beiden Textblöcke werden statisch auf "Name" und "Titel" gesetzt, während die Texteigenschaften der beiden anderen Textblöcke an "Vorname" und "Titel" gebunden sind. Die Klassenvariablen werden jedoch absichtlich als Name und Titel in der Employee-Klasse verwendet, bei denen es sich um falsche Variablennamen handelt. Versuchen wir nun zu verstehen, wo wir diese Art von Fehler finden können, wenn die gewünschte Ausgabe nicht angezeigt wird.

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; 
      }
   }
}

Hier ist die Implementierung der MainWindow-Klasse in C # -Code -

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(); 
      }
   }
}

Lassen Sie uns diese Anwendung ausführen und Sie können sofort in unserem MainWindow sehen, dass wir erfolgreich an den Titel dieses Employee-Objekts gebunden haben, der Name jedoch nicht gebunden ist.

Um zu überprüfen, was mit dem Namen passiert ist, schauen wir uns das Ausgabefenster an, in dem viel Protokoll generiert wird.

Der einfachste Weg, einen Fehler zu finden, besteht darin, nur nach einem Fehler zu suchen. Dort finden Sie den unten genannten Fehler, der besagt: "BindingExpression-Pfadfehler: Eigenschaft 'Vorname' nicht für 'Objekt' '' Mitarbeiter gefunden"

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')

Dies zeigt deutlich, dass FirstName kein Mitglied der Employee-Klasse ist. Daher hilft es, diese Art von Problemen in Ihrer Anwendung zu beheben.

Wenn Sie die ändern FirstName zu Name Wieder sehen Sie die gewünschte Ausgabe.

UI-Debugging-Tools für XAML

Mit Visual Studio 2015 werden UI-Debugging-Tools für XAML eingeführt, um den XAML-Code zur Laufzeit zu überprüfen. Mithilfe dieser Tools wird der XAML-Code in Form eines visuellen Baums Ihrer laufenden WPF-Anwendung sowie der verschiedenen Eigenschaften der Benutzeroberflächenelemente im Baum dargestellt. Führen Sie die folgenden Schritte aus, um dieses Tool zu aktivieren.

Step 1 - Gehen Sie zum Menü Extras und wählen Sie Optionen aus dem Menü Extras.
Step 2 - Das folgende Dialogfeld wird angezeigt.

Step 3 - Gehen Sie zu den allgemeinen Optionen unter Debugging auf der linken Seite.
Step 4 - Aktivieren Sie die hervorgehobene Option "UI-Debugging-Tools für XAML aktivieren".
Step 5 - Drücken Sie die OK-Taste.

Führen Sie nun eine beliebige XAML-Anwendung aus oder verwenden Sie den folgenden XAML-Code:

<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>

Wenn die Anwendung ausgeführt wird, wird der Live Visual Tree angezeigt, in dem alle Elemente in einem Baum angezeigt werden.

Dieser Live Visual Tree zeigt die vollständige Layoutstruktur, um zu verstehen, wo die UI-Elemente platziert sind. Diese Option ist jedoch nur in Visual Studio 2015 verfügbar. Wenn Sie eine ältere Version von Visual Studio verwenden, können Sie dieses Tool nicht verwenden. Es gibt jedoch ein anderes Tool, das in Visual Studio integriert werden kann, z. B. XAML Spy für Visual Studio. Sie können es von herunterladenhttp://xamlspy.com/download. Wir empfehlen Ihnen, dieses Tool herunterzuladen, wenn Sie eine ältere Version von Visual Studio verwenden.