WPF - Depuração
É um mecanismo sistemático de identificação e correção de bugs ou defeitos em um trecho de código que não se comporta da mesma forma que você espera. Depurar um aplicativo complexo onde os subsistemas estão fortemente acoplados não é tão fácil, porque corrigir bugs em um subsistema pode criar bugs em outro subsistema.
Depuração em C #
Em aplicativos WPF, os programadores lidam com duas linguagens, como C # e XAML. Se você estiver familiarizado com a depuração em qualquer linguagem procedural, como C # ou C / C ++ e também souber o uso de pontos de interrupção, poderá depurar a parte C # de seu aplicativo facilmente.
Vamos dar um exemplo simples para demonstrar como depurar um código C #. Crie um novo projeto WPF com o nomeWPFDebuggingDemo. Arraste quatro rótulos, três caixas de texto e um botão da caixa de ferramentas. Dê uma olhada no seguinte código XAML.
<Window x:Class = "WPFDebuggingDemo.Window1"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Title = "Window1" Height = "400" Width = "604">
<Grid>
<TextBox Height = "23" Margin = "0,44,169,0" Name = "textBox1"
VerticalAlignment = "Top" HorizontalAlignment = "Right" Width = "120" />
<TextBox Height = "23" Margin = "0,99,169,0" Name = "textBox2"
VerticalAlignment = "Top" HorizontalAlignment = "Right" Width = "120" />
<TextBox HorizontalAlignment = "Right" Margin = "0,153,169,0"
Name = "textBox3" Width = "120" Height = "23" VerticalAlignment = "Top" />
<Label Height = "28" Margin = "117,42,0,0" Name = "label1"
VerticalAlignment = "Top" HorizontalAlignment = "Left" Width = "120">
Item 1</Label>
<Label Height = "28" HorizontalAlignment = "Left"
Margin = "117,99,0,0" Name = "label2" VerticalAlignment = "Top" Width = "120">
Item 2</Label>
<Label HorizontalAlignment = "Left" Margin = "117,153,0,181"
Name = "label3" Width = "120">Item 3</Label>
<Button Height = "23" HorizontalAlignment = "Right" Margin = "0,0,214,127"
Name = "button1" VerticalAlignment = "Bottom" Width = "75"
Click = "button1_Click">Total</Button>
<Label Height = "28" HorizontalAlignment = "Right"
Margin = "0,0,169,66" Name = "label4" VerticalAlignment = "Bottom" Width = "120"/>
</Grid>
</Window>A seguir está o código C # no qual um evento de clique de botão é implementado.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WPFDebuggingDemo {
/// <summary>
/// Interaction logic for Window1.xaml
/// </summary>
public partial class Window1 : Window {
public Window1() {
InitializeComponent();
}
private void button1_Click(object sender, RoutedEventArgs e) {
if (textBox1.Text.Length > 0 && textBox2.Text.Length > 0 && textBox2.Text.Length > 0) {
double total = Convert.ToDouble(textBox1.Text) +
Convert.ToDouble(textBox2.Text) + Convert.ToDouble(textBox3.Text);
label4.Content = total.ToString();
}
else {
MessageBox.Show("Enter the value in all field.");
}
}
}
}Quando você compila e executa o código acima, ele produzirá a seguinte janela. Agora insira os valores nas caixas de texto e pressione o botão Total. Você obterá o valor total após a soma de todos os valores inseridos nas caixas de texto.
Se você tentar inserir valores diferentes dos valores reais, o aplicativo acima irá travar. Para localizar e resolver o problema (por que ele está travando), você pode inserir pontos de interrupção no evento de clique do botão.
Vamos escrever "abc" no item 1 conforme mostrado abaixo.
Ao clicar no botão Total, você verá que o programa para no ponto de interrupção.
Agora mova o cursor para a caixa de texto1.Texto e você verá que o programa está tentando adicionar abc valor com os outros valores, razão pela qual o programa está travando.
Depuração em XAML
Se você está esperando o mesmo tipo de depuração em XAML, ficará surpreso ao saber que ainda não é possível depurar o código XAML como depurar qualquer outro código de linguagem procedural. Quando você ouve o termo depuração no código XAML, significa tente 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 de um programa XAML é algo que você normalmente faz para verificar se suas ligações funcionam; e se não estiver funcionando, verifique 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 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 de dois blocos de texto são definidas como “Nome” e “Título” estaticamente, enquanto outros dois blocos de texto As propriedades de texto são vinculadas a “Nome” e “Título”, mas as variáveis de classe são Nome e Título na classe Funcionário que é mostrada abaixo.
Escrevemos intencionalmente um nome de variável incorreto para entender onde podemos encontrar esse tipo de erro quando a saída desejada não é exibida.
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 dar uma olhada na janela de saída, onde muitos logs são gerados.
O mais fácil de encontrar um erro é apenas pesquisar o erro e você encontrará o seguinte erro que diz “Erro de caminho BindingExpression: propriedade 'FirstName' não encontrada no 'objeto' '' Empregado”
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.
Ao alterar o FirstName para Name novamente, você verá a saída desejada.
Ferramentas de depuração de interface do usuário para XAML
Ferramentas de depuração de IU foram introduzidas para XAML com Visual Studio 2015 para inspecionar o código XAML em tempo de execução. Com a ajuda dessas ferramentas, o código XAML é apresentado na forma de uma á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 essas ferramentas, siga as etapas abaixo.
- Vá para o menu Ferramentas e selecione Opções no menu Ferramentas.
- Isso abrirá a seguinte caixa de diálogo.
- Vá para Opções Gerais no item Depuração no lado esquerdo.
- Marque a opção destacada, ou seja, “Habilitar ferramentas de depuração da interface do usuário para XAML” e clique no 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>Ao executar o aplicativo, 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 estão localizados. Mas essa opção está disponível apenas no Visual Studio 2015. Se você estiver usando uma opção mais antiga do Visual Studio, não poderá usar essa ferramenta, no entanto, há outra ferramenta que pode ser integrada ao Visual Studio, como XAML Spy para Visual Studio . Você pode baixá-lo de xamlspy