XAML: depuración

Si está familiarizado con la depuración en cualquier lenguaje de procedimiento (como C #, C / C ++, etc.) y conoce el uso de breaky esperan el mismo tipo de depuración en XAML, se sorprenderá al saber que todavía no es posible depurar un código XAML como solía depurar cualquier otro código de lenguaje de procedimiento. Depurar una aplicación XAML significa intentar encontrar un error;

En el enlace de datos, sus datos no se muestran en la pantalla y no sabe por qué
O un problema está relacionado con diseños complejos.
O un problema de alineación o problemas en el color de los márgenes, superposiciones, etc. con algunas plantillas extensas como ListBox y combo box.

La depuración en XAML es algo que normalmente hace para verificar si sus enlaces funcionan y, si no funciona, para verificar qué está mal. Desafortunadamente, no es posible establecer puntos de interrupción en enlaces XAML, excepto en Silverlight, pero podemos usar la ventana Salida para comprobar si hay errores de enlace de datos. Echemos un vistazo al siguiente código XAML para encontrar el error en el enlace de datos.

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

Las propiedades de texto de los dos bloques de texto se establecen en "Nombre" y "Título" de forma estática, mientras que las propiedades de texto de los otros dos bloques de texto están vinculadas a "Nombre" y "Título". Pero las variables de clase se toman intencionalmente como Nombre y Título en la clase Empleado, que son nombres de variable incorrectos. Intentemos ahora entender dónde podemos encontrar este tipo de error cuando no se muestra la salida deseada.

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

Aquí está la implementación de la clase MainWindow en el código 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(); 
      }
   }
}

Ejecutemos esta aplicación y podrá ver inmediatamente en nuestra ventana principal que nos hemos vinculado correctamente al título de ese objeto Empleado, pero el nombre no está vinculado.

Para comprobar qué pasó con el nombre, veamos la ventana de salida donde se genera una gran cantidad de registro.

La forma más fácil de encontrar un error es simplemente buscar el error y encontrará el error mencionado a continuación que dice "Error de ruta de BindingExpression: la propiedad 'FirstName' no se encuentra en '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')

Lo que indica claramente que FirstName no es miembro de la clase Empleado, por lo que ayuda a solucionar este tipo de problemas en su aplicación.

Cuando cambias el FirstName a Name de nuevo, verá la salida deseada.

Herramientas de depuración de IU para XAML

Las herramientas de depuración de UI para XAML se introducen con Visual Studio 2015 para inspeccionar el código XAML en tiempo de ejecución. Con la ayuda de estas herramientas, el código XAML se presenta en forma de árbol visual de su aplicación WPF en ejecución y también las diferentes propiedades de los elementos de la interfaz de usuario en el árbol. Para habilitar esta herramienta, siga los pasos que se indican a continuación.

Step 1 - Vaya al menú Herramientas y seleccione Opciones en el menú Herramientas.
Step 2 - Verá el siguiente cuadro de diálogo.

Step 3 - Vaya a Opciones generales en el elemento Depuración en el lado izquierdo.
Step 4 - Marque la opción resaltada, es decir, "Habilitar herramientas de depuración de IU para XAML"
Step 5 - Presione el botón OK.

Ahora ejecute cualquier aplicación XAML o use el siguiente código 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>

Cuando la aplicación se ejecute, mostrará el árbol visual en vivo donde todos los elementos se muestran en un árbol.

Este árbol visual en vivo muestra la estructura de diseño completa para comprender dónde se colocan los elementos de la interfaz de usuario. Pero esta opción solo está disponible en Visual Studio 2015. Si está utilizando una versión anterior de Visual Studio, no puede utilizar esta herramienta; sin embargo, existe otra herramienta que se puede integrar con Visual Studio, como XAML Spy para Visual Studio. Puedes descargarlo desdehttp://xamlspy.com/download. Le recomendamos que descargue esta herramienta si está utilizando una versión anterior de Visual Studio.