WPF - Débogage

C'est un mécanisme systématique d'identification et de correction des bogues ou des défauts dans un morceau de code qui ne se comportent pas comme vous vous attendez. Déboguer une application complexe où les sous-systèmes sont étroitement couplés n'est pas si simple, car la correction de bogues dans un sous-système peut créer des bogues dans un autre sous-système.

Débogage en C #

Dans les applications WPF, les programmeurs utilisent deux langages tels que C # et XAML. Si vous êtes familiarisé avec le débogage dans n'importe quel langage procédural tel que C # ou C / C ++ et que vous connaissez également l'utilisation des points d'arrêt, vous pouvez déboguer facilement la partie C # de votre application.

Prenons un exemple simple pour montrer comment déboguer un code C #. Créer un nouveau projet WPF avec le nomWPFDebuggingDemo. Faites glisser quatre étiquettes, trois zones de texte et un bouton de la boîte à outils. Jetez un œil au code XAML suivant.

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

Vous trouverez ci-dessous le code C # dans lequel un événement de clic de bouton est implémenté.

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.");
         } 
      } 
   } 
}

Lorsque vous compilez et exécutez le code ci-dessus, il produira la fenêtre suivante. Saisissez maintenant les valeurs dans les zones de texte et appuyez sur le bouton Total. Vous obtiendrez la valeur totale après addition de toutes les valeurs entrées dans les zones de texte.

Si vous essayez d'entrer des valeurs autres que des valeurs réelles, l'application ci-dessus se bloquera. Pour rechercher et résoudre le problème (pourquoi il se bloque), vous pouvez insérer des points d'arrêt dans l'événement de clic de bouton.

Écrivons "abc" dans l'élément 1 comme indiqué ci-dessous.

En cliquant sur le bouton Total, vous verrez que le programme s'arrête au point d'arrêt.

Maintenant, déplacez le curseur vers la zone de texte 1. Texte et vous verrez que le programme essaie d'ajouter abc value avec les autres valeurs, c'est pourquoi le programme plante.

Débogage en XAML

Si vous vous attendez au même type de débogage en XAML, vous serez surpris de savoir qu'il n'est pas encore possible de déboguer le code XAML comme le débogage de tout autre code de langage procédural. Lorsque vous entendez le terme débogage dans le code XAML, cela signifie essayer de trouver une erreur.

Dans la liaison de données, vos données n'apparaissent pas à l'écran et vous ne savez pas pourquoi
Ou un problème est lié à des mises en page complexes.
Ou un problème d'alignement ou des problèmes de couleur de marge, de superpositions, etc. avec certains modèles étendus tels que ListBox et combo box.

Le débogage d'un programme XAML est quelque chose que vous faites généralement pour vérifier si vos liaisons fonctionnent; et si cela ne fonctionne pas, vérifiez ce qui ne va pas. Malheureusement, la définition de points d'arrêt dans les liaisons XAML n'est pas possible sauf dans Silverlight, mais nous pouvons utiliser la fenêtre Sortie pour vérifier les erreurs de liaison de données. Jetons un coup d'œil au code XAML suivant pour rechercher l'erreur dans la liaison de données.

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

Les propriétés de texte de deux blocs de texte sont définies statiquement sur «Nom» et «Titre», tandis que les deux autres blocs de texte Les propriétés de texte sont liées à «FirstName» et «Title», mais les variables de classe sont Name et Title dans la classe Employee qui est illustrée ci-dessous.

Nous avons intentionnellement écrit un nom de variable incorrect afin de comprendre où trouver ce type d'erreur lorsque la sortie souhaitée n'est pas affichée.

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

Voici l'implémentation de la classe MainWindow en code 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(); 
      } 
   } 
}

Exécutons cette application et vous pouvez voir immédiatement dans notre MainWindow que nous avons lié avec succès au titre de cet objet Employee mais que le nom n'est pas lié.

Pour vérifier ce qui s'est passé avec le nom, regardons dans la fenêtre de sortie où beaucoup de journal est généré.

Le plus facile à trouver une erreur consiste simplement à rechercher l'erreur et vous trouverez l'erreur suivante qui indique «Erreur de chemin BindingExpression: propriété 'FirstName' introuvable sur 'objet' '' 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')

Ce qui indique clairement que FirstName n'est pas membre de la classe Employee, ce qui permet de résoudre ce type de problèmes dans votre application.

Lorsque vous modifiez à nouveau le Prénom en Nom, vous verrez la sortie souhaitée.

Outils de débogage de l'interface utilisateur pour XAML

Des outils de débogage de l'interface utilisateur ont été introduits pour XAML avec Visual Studio 2015 afin d'inspecter le code XAML au moment de l'exécution. À l'aide de ces outils, le code XAML est présenté sous la forme d'une arborescence visuelle de votre application WPF en cours d'exécution ainsi que des différentes propriétés d'élément d'interface utilisateur dans l'arborescence. Pour activer ces outils, suivez les étapes ci-dessous.

Allez dans le menu Outils et sélectionnez Options dans le menu Outils.
Cela ouvrira la boîte de dialogue suivante.

Accédez aux options générales sous l'élément de débogage sur le côté gauche.
Cochez l'option en surbrillance, à savoir «Activer les outils de débogage de l'interface utilisateur pour XAML» et cliquez sur le bouton OK.

Exécutez maintenant n'importe quelle application XAML ou utilisez le code XAML suivant.

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

Lorsque vous exécutez l'application, elle affichera l'arborescence visuelle en direct où tous les éléments sont affichés dans une arborescence.

Cet arbre visuel en direct montre la structure de disposition complète pour comprendre où se trouvent les éléments de l'interface utilisateur. Mais cette option n'est disponible que dans Visual Studio 2015. Si vous utilisez une ancienne option de Visual Studio, vous ne pouvez pas utiliser cet outil, mais il existe un autre outil qui peut être intégré à Visual Studio tel que XAML Spy pour Visual Studio . Vous pouvez le télécharger sur xamlspy

↰ Previous page Next page ↱

WPF - Débogage

Débogage en C #

Débogage en XAML

Outils de débogage de l'interface utilisateur pour XAML

Tutoriel WPF