WPF - Debug

È un meccanismo sistematico per identificare e correggere bug o difetti in un pezzo di codice che non si comportano come ci si aspetta. Il debug di un'applicazione complessa in cui i sottosistemi sono strettamente accoppiati non è così facile, perché la correzione di bug in un sottosistema può creare bug in un altro sottosistema.

Debug in C #

Nelle applicazioni WPF, i programmatori gestiscono due linguaggi come C # e XAML. Se hai familiarità con il debug in qualsiasi linguaggio procedurale come C # o C / C ++ e conosci anche l'utilizzo dei punti di interruzione, puoi eseguire facilmente il debug della parte C # dell'applicazione.

Facciamo un semplice esempio per dimostrare come eseguire il debug di un codice C #. Crea un nuovo progetto WPF con il nomeWPFDebuggingDemo. Trascina quattro etichette, tre caselle di testo e un pulsante dalla casella degli strumenti. Dai un'occhiata al seguente codice 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>

Di seguito è riportato il codice C # in cui viene implementato un evento clic del pulsante.

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 compili ed esegui il codice sopra, verrà prodotta la seguente finestra. Ora inserisci i valori nelle caselle di testo e premi il pulsante Totale. Otterrai il valore totale dopo la somma di tutti i valori inseriti nelle caselle di testo.

Se provi a inserire valori diversi dai valori reali, l'applicazione di cui sopra andrà in crash. Per trovare e risolvere il problema (perché si blocca), puoi inserire punti di interruzione nell'evento clic sul pulsante.

Scriviamo "abc" nell'elemento 1 come mostrato di seguito.

Facendo clic sul pulsante Totale, vedrai che il programma si ferma al punto di interruzione.

Ora sposta il cursore verso la casella di testo 1 Testo e vedrai che il programma sta cercando di aggiungere abc value con gli altri valori, motivo per cui il programma si blocca.

Debug in XAML

Se ti aspetti lo stesso tipo di debug in XAML, sarai sorpreso di sapere che non è ancora possibile eseguire il debug del codice XAML come il debug di qualsiasi altro codice di linguaggio procedurale. Quando senti il termine debug nel codice XAML, significa che prova a trovare un errore.

Nel data binding, i tuoi dati non vengono visualizzati sullo schermo e non sai perché
Oppure un problema è correlato a layout complessi.
O un problema di allineamento o problemi nel colore dei margini, sovrapposizioni, ecc. Con alcuni modelli estesi come ListBox e casella combinata.

Il debug di un programma XAML è qualcosa che in genere fai per verificare se i tuoi binding funzionano; e se non funziona, controlla cosa non va. Sfortunatamente l'impostazione dei punti di interruzione nelle associazioni XAML non è possibile tranne che in Silverlight, ma possiamo usare la finestra di output per verificare la presenza di errori di associazione dei dati. Diamo un'occhiata al seguente codice XAML per trovare l'errore nel data binding.

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

Le proprietà di testo di due blocchi di testo sono impostate su "Nome" e "Titolo" staticamente, mentre altri due blocchi di testo Le proprietà di testo sono vincolate a "Nome" e "Titolo" ma le variabili di classe sono Nome e Titolo nella classe Impiegato che è mostrata di seguito.

Abbiamo scritto intenzionalmente un nome di variabile errato in modo da capire dove possiamo trovare questo tipo di errore quando l'output desiderato non viene mostrato.

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

Ecco l'implementazione della classe MainWindow nel codice 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(); 
      } 
   } 
}

Eseguiamo questa applicazione e puoi vedere immediatamente nella nostra MainWindow che siamo stati associati con successo al titolo di quell'oggetto Employee ma il nome non è associato.

Per verificare cosa è successo con il nome, diamo un'occhiata alla finestra di output in cui viene generato un sacco di log.

Il modo più semplice per trovare un errore è solo cercare l'errore e troverai il seguente errore che dice "Errore di percorso BindingExpression: proprietà 'FirstName' non trovata su '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')

Il che indica chiaramente che FirstName non è un membro della classe Employee, quindi aiuta a risolvere questo tipo di problemi nella tua applicazione.

Quando cambi di nuovo FirstName in Name, vedrai l'output desiderato.

Strumenti di debug dell'interfaccia utente per XAML

Sono stati introdotti strumenti di debug dell'interfaccia utente per XAML con Visual Studio 2015 per controllare il codice XAML in fase di esecuzione. Con l'aiuto di questi strumenti, il codice XAML viene presentato sotto forma di una struttura ad albero visuale dell'applicazione WPF in esecuzione e anche delle diverse proprietà dell'elemento dell'interfaccia utente nella struttura. Per abilitare questi strumenti, seguire i passaggi indicati di seguito.

Vai al menu Strumenti e seleziona Opzioni dal menu Strumenti.
Si aprirà la seguente finestra di dialogo.

Vai alle Opzioni generali sotto la voce Debug sul lato sinistro.
Spunta l'opzione evidenziata, ad esempio "Abilita strumenti di debug dell'interfaccia utente per XAML" e fai clic sul pulsante OK.

Ora esegui qualsiasi applicazione XAML o usa il codice XAML seguente.

<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 esegui l'applicazione, mostrerà l'albero visivo live dove tutti gli elementi sono mostrati in un albero.

Questo albero visivo live mostra la struttura completa del layout per capire dove si trovano gli elementi dell'interfaccia utente. Ma questa opzione è disponibile solo in Visual Studio 2015. Se stai usando un'opzione precedente di Visual Studio, non puoi usare questo strumento, tuttavia esiste un altro strumento che può essere integrato con Visual Studio come XAML Spy per Visual Studio . Puoi scaricarlo da xamlspy

↰ Previous page Next page ↱

WPF - Debug

Debug in C #

Debug in XAML

Strumenti di debug dell'interfaccia utente per XAML

Tutorial WPF