WPF - Gỡ lỗi

Nó là một cơ chế có hệ thống để xác định và sửa chữa các lỗi hoặc khiếm khuyết trong một đoạn mã không hoạt động giống như bạn mong đợi. Gỡ lỗi một ứng dụng phức tạp trong đó các hệ thống con được kết hợp chặt chẽ với nhau không phải là điều dễ dàng, vì việc sửa lỗi trong một hệ thống con có thể tạo ra lỗi trong hệ thống con khác.

Gỡ lỗi trong C #

Trong các ứng dụng WPF, lập trình viên xử lý hai ngôn ngữ như C # và XAML. Nếu bạn đã quen với việc gỡ lỗi bằng bất kỳ ngôn ngữ thủ tục nào như C # hoặc C / C ++ và bạn cũng biết cách sử dụng các điểm ngắt, thì bạn có thể gỡ lỗi phần C # trong ứng dụng của mình một cách dễ dàng.

Hãy lấy một ví dụ đơn giản để minh họa cách gỡ lỗi mã C #. Tạo một dự án WPF mới với tênWPFDebuggingDemo. Kéo bốn nhãn, ba hộp văn bản và một nút từ hộp công cụ. Hãy xem mã XAML sau đây.

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

Dưới đây là mã C # trong đó sự kiện nhấp vào nút được triển khai.

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

Khi bạn biên dịch và thực thi đoạn mã trên, nó sẽ tạo ra cửa sổ sau. Bây giờ, hãy nhập các giá trị vào các hộp văn bản và nhấn nút Total. Bạn sẽ nhận được tổng giá trị sau khi tổng tất cả các giá trị được nhập vào các hộp văn bản.

Nếu bạn cố gắng nhập các giá trị khác với giá trị thực, thì ứng dụng trên sẽ bị lỗi. Để tìm và giải quyết vấn đề (tại sao nó gặp sự cố), bạn có thể chèn các điểm ngắt trong sự kiện nhấp vào nút.

Hãy viết "abc" vào mục 1 như hình dưới đây.

Khi nhấp vào nút Total, bạn sẽ thấy rằng chương trình dừng lại ở điểm ngắt.

Bây giờ hãy di chuyển con trỏ về phía textbox1.Text và bạn sẽ thấy rằng chương trình đang cố gắng thêm abc giá trị với các giá trị khác, đó là lý do tại sao chương trình bị treo.

Gỡ lỗi trong XAML

Nếu bạn đang mong đợi loại gỡ lỗi tương tự trong XAML, thì bạn sẽ ngạc nhiên khi biết rằng không thể gỡ lỗi mã XAML giống như gỡ lỗi bất kỳ mã ngôn ngữ thủ tục nào khác. Khi bạn nghe thấy thuật ngữ gỡ lỗi trong mã XAML, điều đó có nghĩa là hãy thử và tìm lỗi.

  • Trong liên kết dữ liệu, dữ liệu của bạn không hiển thị trên màn hình và bạn không biết tại sao

  • Hoặc một vấn đề liên quan đến bố cục phức tạp.

  • Hoặc vấn đề căn chỉnh hoặc các vấn đề về màu lề, lớp phủ, v.v. với một số mẫu mở rộng như ListBox và hộp tổ hợp.

Gỡ lỗi chương trình XAML là việc bạn thường làm để kiểm tra xem các ràng buộc của bạn có hoạt động hay không; và nếu nó không hoạt động, sau đó để kiểm tra xem có gì sai không. Rất tiếc, không thể thiết lập các điểm ngắt trong liên kết XAML ngoại trừ trong Silverlight, nhưng chúng tôi có thể sử dụng cửa sổ Đầu ra để kiểm tra lỗi liên kết dữ liệu. Chúng ta hãy xem mã XAML sau để tìm lỗi trong liên kết dữ liệu.

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

Thuộc tính văn bản của hai khối văn bản được đặt tĩnh thành “Tên” và “Tiêu đề”, trong khi hai khối văn bản khác Thuộc tính văn bản được liên kết với “Tên đầu tiên” và “Tiêu đề” nhưng các biến lớp là Tên và Tiêu đề trong lớp Nhân viên được hiển thị bên dưới.

Chúng tôi đã cố ý viết một tên biến không chính xác để hiểu chúng tôi có thể tìm thấy loại lỗi này ở đâu khi đầu ra mong muốn không được hiển thị.

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

Đây là phần triển khai của lớp MainWindow trong mã 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(); 
      } 
   } 
}

Hãy chạy ứng dụng này và bạn có thể thấy ngay trong MainWindow của chúng ta rằng chúng ta đã liên kết thành công với Tiêu đề của đối tượng Nhân viên đó nhưng tên không bị ràng buộc.

Để kiểm tra điều gì đã xảy ra với tên, chúng ta hãy nhìn vào cửa sổ đầu ra nơi có rất nhiều nhật ký được tạo.

Dễ dàng tìm thấy lỗi chỉ là tìm kiếm lỗi và bạn sẽ tìm thấy lỗi sau có nội dung “Lỗi đường dẫn BindingExpression: không tìm thấy thuộc tính 'FirstName' trên 'đối tượng' '' Nhân viên”

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

Điều này cho thấy rõ ràng FirstName không phải là thành viên của lớp Nhân viên, vì vậy, nó sẽ giúp khắc phục loại sự cố này trong ứng dụng của bạn.

Khi bạn thay đổi FirstName thành Name một lần nữa, bạn sẽ thấy kết quả mong muốn.

Công cụ gỡ lỗi giao diện người dùng cho XAML

Công cụ gỡ lỗi giao diện người dùng đã được giới thiệu cho XAML với Visual Studio 2015 để kiểm tra mã XAML trong thời gian chạy. Với sự trợ giúp của các công cụ này, mã XAML được trình bày dưới dạng cây trực quan của ứng dụng WPF đang chạy của bạn và cả các thuộc tính phần tử giao diện người dùng khác nhau trong cây. Để bật các công cụ này, hãy làm theo các bước dưới đây.

  • Chuyển đến menu Công cụ và chọn Tùy chọn từ menu Công cụ.
  • Nó sẽ mở hộp thoại sau.
  • Chuyển đến Tùy chọn chung trong mục Gỡ lỗi ở phía bên trái.
  • Đánh dấu vào tùy chọn được đánh dấu, tức là “Bật công cụ gỡ lỗi giao diện người dùng cho XAML” và nhấp vào nút OK.

Bây giờ hãy chạy bất kỳ ứng dụng XAML nào hoặc sử dụng mã XAML sau.

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

Khi bạn thực thi ứng dụng, nó sẽ hiển thị Cây trực quan nơi tất cả các phần tử được hiển thị trong một cây.

Cây Trực quan Trực tiếp này hiển thị cấu trúc bố cục hoàn chỉnh để hiểu vị trí của các phần tử giao diện người dùng. Nhưng tùy chọn này chỉ có sẵn trong Visual Studio 2015. Nếu bạn đang sử dụng tùy chọn cũ hơn của Visual Studio, thì bạn không thể sử dụng công cụ này, tuy nhiên có một công cụ khác có thể được tích hợp với Visual Studio chẳng hạn như XAML Spy cho Visual Studio . Bạn có thể tải xuống từ xamlspy