XAML - Depuração

Se você está familiarizado com a depuração em qualquer linguagem procedural (como C #, C / C ++ etc.) e conhece o uso de breake estão esperando o mesmo tipo de depuração em XAML, então você ficará surpreso ao saber que ainda não é possível depurar um código XAML da mesma forma que você costumava depurar qualquer outro código de linguagem procedural. Depurar um aplicativo XAML significa tentar encontrar um erro;

Na vinculação de dados, seus dados não aparecem na tela e você não sabe por que
Ou um problema está relacionado a layouts complexos.
Ou um problema de alinhamento ou problemas na cor da margem, sobreposições, etc. com alguns modelos extensos como ListBox e caixa de combinação.

A depuração em XAML é algo que você normalmente faz para verificar se as ligações funcionam e, se não estiverem, verificar o que está errado. Infelizmente, não é possível definir pontos de interrupção em associações XAML, exceto no Silverlight, mas podemos usar a janela Saída para verificar se há erros de associação de dados. Vamos dar uma olhada no código XAML a seguir para encontrar o erro na vinculação de dados.

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

As propriedades de texto dos dois blocos de texto são definidas como “Nome” e “Título” estaticamente, enquanto as outras propriedades de texto de dois blocos de texto são vinculadas a “Nome” e “Título”. Mas as variáveis de classe são consideradas intencionalmente como Nome e Título na classe Funcionário, que são nomes de variáveis incorretos. Vamos agora tentar entender onde podemos encontrar esse tipo de erro quando a saída desejada não é mostrada.

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

Aqui está a implementação da classe MainWindow no 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(); 
      }
   }
}

Vamos executar este aplicativo e você poderá ver imediatamente em nossa MainWindow que vinculamos com êxito ao Título desse objeto Funcionário, mas o nome não está vinculado.

Para verificar o que aconteceu com o nome, vamos olhar para a janela de saída onde muitos logs são gerados.

A maneira mais fácil de encontrar um erro é apenas pesquisar o erro e você encontrará o erro mencionado abaixo que diz “Erro de caminho BindingExpression: propriedade 'FirstName' não encontrada no 'objeto' '' Funcionário”

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

O que indica claramente que FirstName não é membro da classe Employee, portanto, ajuda a corrigir esse tipo de problema em seu aplicativo.

Quando você muda o FirstName para Name novamente, você verá a saída desejada.

Ferramentas de depuração de interface do usuário para XAML

As ferramentas de depuração da IU para XAML são apresentadas com o Visual Studio 2015 para inspecionar o código XAML no tempo de execução. Com a ajuda dessas ferramentas, o código XAML é apresentado na forma de árvore visual de seu aplicativo WPF em execução e também nas diferentes propriedades do elemento de interface do usuário na árvore. Para habilitar essa ferramenta, siga as etapas abaixo.

Step 1 - Vá para o menu Ferramentas e selecione Opções no menu Ferramentas.
Step 2 - Você verá a seguinte caixa de diálogo.

Step 3 - Vá para as Opções Gerais no item Depuração no lado esquerdo.
Step 4 - Marque a opção destacada, ou seja, “Habilitar ferramentas de depuração de IU para XAML”
Step 5 - Pressione o botão OK.

Agora execute qualquer aplicativo XAML ou use o seguinte 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>

Quando o aplicativo for executado, ele mostrará a Árvore Visual Live onde todos os elementos são mostrados em uma árvore.

Esta Árvore Visual Live mostra a estrutura de layout completa para entender onde os elementos da IU são colocados. Mas essa opção está disponível apenas no Visual Studio 2015. Se você estiver usando uma versão mais antiga do Visual studio, não poderá usar essa ferramenta; entretanto, há outra ferramenta que pode ser integrada ao Visual Studio, como o XAML Spy para Visual Studio. Você pode baixá-lo dehttp://xamlspy.com/download. Recomendamos que você baixe essa ferramenta se estiver usando uma versão mais antiga do Visual Studio.