XAML - debugowanie

Jeśli jesteś zaznajomiony z debugowaniem w dowolnym języku proceduralnym (takim jak C #, C / C ++ itp.) I znasz użycie breaki spodziewasz się tego samego rodzaju debugowania w XAML, będziesz zaskoczony, wiedząc, że nie jest jeszcze możliwe debugowanie kodu XAML, tak jak w przypadku debugowania dowolnego innego kodu języka proceduralnego. Debugowanie aplikacji XAML oznacza próbę znalezienia błędu;

  • W powiązaniu danych Twoje dane nie pojawiają się na ekranie i nie wiesz dlaczego

  • Lub problem jest związany ze złożonymi układami.

  • Lub problem z wyrównaniem lub problemy z kolorem marginesów, nakładkami itp. W przypadku niektórych rozbudowanych szablonów, takich jak ListBox i pole kombi.

Debugowanie w języku XAML jest zwykle wykonywane w celu sprawdzenia, czy powiązania działają, a jeśli nie, to w celu sprawdzenia, co jest nie tak. Niestety, ustawienie punktów przerwania w powiązaniach XAML nie jest możliwe, z wyjątkiem Silverlight, ale możemy użyć okna danych wyjściowych, aby sprawdzić błędy powiązania danych. Przyjrzyjmy się poniższemu kodowi XAML, aby znaleźć błąd w powiązaniu danych.

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

Właściwości tekstu dwóch bloków tekstowych są ustawione statycznie na „Nazwa” i „Tytuł”, podczas gdy właściwości Tekst pozostałych dwóch bloków tekstowych są powiązane z „Imię” i „Tytuł”. Ale zmienne klasy są celowo przyjmowane jako nazwa i tytuł w klasie pracownika, które są niepoprawnymi nazwami zmiennych. Spróbujmy teraz zrozumieć, gdzie możemy znaleźć tego typu błąd, gdy pożądany wynik nie jest pokazany.

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

Oto implementacja klasy MainWindow w kodzie C # -

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

Uruchommy tę aplikację i od razu zobaczysz w naszym MainWindow, że udało nam się powiązać z tytułem tego obiektu pracownika, ale nazwa nie jest powiązana.

Aby sprawdzić, co się stało z nazwą, spójrzmy na okno wyjściowe, w którym generowanych jest dużo dzienników.

Najłatwiejszym sposobem znalezienia błędu jest po prostu wyszukanie błędu, a znajdziesz poniższy błąd, który mówi: „Błąd ścieżki BindingExpression: Nie znaleziono właściwości „ FirstName ” w „ obiekcie ”„ Pracownik ”

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

Co wyraźnie wskazuje, że FirstName nie jest członkiem klasy Employee, więc pomaga rozwiązać tego typu problemy w aplikacji.

Kiedy zmienisz FirstName do Name ponownie zobaczysz żądane wyjście.

Narzędzia do debugowania interfejsu użytkownika dla języka XAML

Narzędzia do debugowania interfejsu użytkownika dla języka XAML zostały wprowadzone w programie Visual Studio 2015 w celu sprawdzenia kodu XAML w czasie wykonywania. Za pomocą tych narzędzi kod XAML jest prezentowany w postaci wizualnego drzewa uruchomionej aplikacji WPF, a także różnych właściwości elementu interfejsu użytkownika w drzewie. Aby włączyć to narzędzie, wykonaj kroki podane poniżej.

  • Step 1 - Przejdź do menu Narzędzia i wybierz Opcje z menu Narzędzia.

  • Step 2 - Zobaczysz następujące okno dialogowe.

  • Step 3 - Przejdź do opcji ogólnych pod pozycją Debugowanie po lewej stronie.

  • Step 4 - Zaznacz podświetloną opcję, np. „Włącz narzędzia debugowania interfejsu użytkownika dla języka XAML”

  • Step 5 - Naciśnij przycisk OK.

Teraz uruchom dowolną aplikację XAML lub użyj następującego kodu 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>

Gdy aplikacja zostanie uruchomiona, wyświetli Live Visual Tree, w którym wszystkie elementy są pokazane w drzewie.

To drzewo wizualne na żywo przedstawia pełną strukturę układu, aby zrozumieć, gdzie są umieszczone elementy interfejsu użytkownika. Ale ta opcja jest dostępna tylko w programie Visual Studio 2015. Jeśli używasz starszej wersji programu Visual Studio, nie możesz używać tego narzędzia; jednak istnieje inne narzędzie, które można zintegrować z programem Visual Studio, takie jak XAML Spy for Visual Studio. Możesz go pobrać zhttp://xamlspy.com/download. Zalecamy pobranie tego narzędzia, jeśli używasz starszej wersji programu Visual Studio.