XAML - Hata Ayıklama
Herhangi bir yordamsal dilde (C #, C / C ++ vb.) Hata ayıklamaya aşinaysanız ve breakve XAML'de aynı türde hata ayıklamayı beklerseniz, başka herhangi bir yordamsal dil kodunda hata ayıklamak için kullandığınız gibi bir XAML kodunda hata ayıklamanın henüz mümkün olmadığını bilmek sizi şaşırtacaktır. Bir XAML uygulamasında hata ayıklamak, bir hata bulmaya çalışmak anlamına gelir;
Veri bağlamada, verileriniz ekranda görünmez ve nedenini bilmiyorsunuz
Veya bir sorun karmaşık düzenlerle ilgilidir.
Veya ListBox ve combo box gibi bazı kapsamlı şablonlarla bir hizalama sorunu veya kenar boşluğu rengi, kaplamalar vb.
XAML'de hata ayıklama, genellikle bağlamalarınızın çalışıp çalışmadığını ve çalışmıyorsa, neyin yanlış olduğunu kontrol etmek için yaptığınız bir şeydir. Ne yazık ki, Silverlight dışında XAML bağlamalarında kesme noktaları ayarlamak mümkün değildir, ancak veri bağlama hatalarını kontrol etmek için Çıktı penceresini kullanabiliriz. Veri bağlamadaki hatayı bulmak için aşağıdaki XAML koduna bir göz atalım.
<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>İki metin bloğunun metin özellikleri statik olarak "Ad" ve "Başlık" olarak ayarlanırken, diğer iki metin bloğunun Metin özellikleri "Ad" ve "Başlık" a bağlıdır. Ancak, sınıf değişkenleri kasıtlı olarak Employee sınıfında yanlış değişken adları olan Ad ve Başlık olarak alınır. Şimdi, istenen çıktı gösterilmediğinde bu tür bir hatayı nerede bulabileceğimizi anlamaya çalışalım.
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;
}
}
}İşte MainWindow sınıfının C # kodundaki uygulaması -
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();
}
}
}Bu uygulamayı çalıştıralım ve MainWindow'umuzda o Employee nesnesinin Başlığına başarıyla bağlandığımızı ancak adın bağlı olmadığını hemen görebilirsiniz.
İsme ne olduğunu kontrol etmek için, çok sayıda günlüğün oluşturulduğu çıktı penceresine bakalım.
Bir hatayı bulmanın en kolay yolu, yalnızca hatayı aramaktır ve " BindingExpression yol hatası:" FirstName " özelliği, " nesne "" "Çalışan" üzerinde bulunamadı " yazan aşağıdaki hatayı bulacaksınız.
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')Bu, FirstName'in Employee sınıfının bir üyesi olmadığını açıkça gösterir, bu nedenle uygulamanızda bu tür sorunları gidermenize yardımcı olur.
Değiştirdiğinizde FirstName -e Name tekrar istediğiniz çıktıyı göreceksiniz.
XAML için UI Hata Ayıklama Araçları
XAML için kullanıcı arabirimi hata ayıklama araçları, çalışma zamanında XAML kodunu incelemek için Visual Studio 2015 ile birlikte sunulur. Bu araçların yardımıyla, XAML kodu, çalışan WPF uygulamanızın görsel ağacı ve ayrıca ağaçtaki farklı UI öğesi özellikleri biçiminde sunulur. Bu aracı etkinleştirmek için aşağıda verilen adımları izleyin.
Step 1 - Araçlar menüsüne gidin ve Araçlar menüsünden Seçenekler'i seçin.
Step 2 - Aşağıdaki iletişim kutusunu göreceksiniz.
Step 3 - Sol taraftaki Hata Ayıklama öğesinin altındaki Genel Seçeneklere gidin.
Step 4 - Vurgulanan seçeneği, yani "XAML için UI Hata Ayıklama Araçlarını Etkinleştir" seçeneğini işaretleyin
Step 5 - OK düğmesine basın.
Şimdi herhangi bir XAML uygulamasını çalıştırın veya aşağıdaki XAML kodunu kullanın -
<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>Uygulama yürütüldüğünde, tüm öğelerin bir ağaçta gösterildiği Canlı Görsel Ağacı gösterecektir.
Bu Canlı Görsel Ağaç, UI öğelerinin nereye yerleştirildiğini anlamak için tam düzen yapısını gösterir. Ancak bu seçenek yalnızca Visual Studio 2015'te mevcuttur. Visual Studio'nun eski bir sürümünü kullanıyorsanız, bu aracı kullanamazsınız; ancak, Visual Studio için XAML Spy gibi Visual Studio ile entegre edilebilecek başka bir araç vardır. Buradan indirebilirsinizhttp://xamlspy.com/download. Visual Studio'nun eski bir sürümünü kullanıyorsanız bu aracı indirmenizi öneririz.