XAML - Débogage
Si vous êtes familiarisé avec le débogage dans n'importe quel langage procédural (tel que C #, C / C ++, etc.) et que vous connaissez l'utilisation de breaket vous attendez le même type de débogage en XAML, alors vous serez surpris de savoir qu'il n'est pas encore possible de déboguer un code XAML comme vous le faisiez pour déboguer tout autre code de langage procédural. Déboguer une application XAML 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 en XAML est quelque chose que vous faites généralement pour vérifier si vos liaisons fonctionnent, et si cela ne fonctionne pas, pour vérifier 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 trouver 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 des deux blocs de texte sont définies statiquement sur «Nom» et «Titre», tandis que les propriétés de texte des deux autres blocs de texte sont liées à «FirstName» et «Title». Mais les variables de classe sont intentionnellement considérées comme Nom et Titre dans la classe Employé qui sont des noms de variable incorrects. Essayons maintenant de comprendre où nous pouvons 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 la fenêtre de sortie où beaucoup de journal est généré.
Le moyen le plus simple de trouver une erreur est de rechercher simplement l'erreur et vous trouverez l'erreur mentionnée ci-dessous 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 changez le FirstName à Name à nouveau, vous verrez la sortie désirée.
Outils de débogage de l'interface utilisateur pour XAML
Les outils de débogage de l'interface utilisateur pour XAML sont introduits avec Visual Studio 2015 pour 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 cet outil, suivez les étapes ci-dessous.
Step 1 - Allez dans le menu Outils et sélectionnez Options dans le menu Outils.
Step 2 - Vous verrez la boîte de dialogue suivante.
Step 3 - Accédez aux options générales sous l'élément de débogage sur le côté gauche.
Step 4 - Cochez l'option en surbrillance, c'est-à-dire «Activer les outils de débogage de l'interface utilisateur pour XAML»
Step 5 - Appuyez sur le bouton OK.
Maintenant, exécutez 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 l'application s'exécute, 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 mise en page complète pour comprendre où les éléments de l'interface utilisateur sont placés. Mais cette option n'est disponible que dans Visual Studio 2015. Si vous utilisez une ancienne version de Visual studio, vous ne pouvez pas utiliser cet outil; cependant, 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 surhttp://xamlspy.com/download. Nous vous recommandons de télécharger cet outil si vous utilisez une ancienne version de Visual Studio.