دوستان و علاقمندان به مباحث WPF وقتتون بخیر. با آموزش WPF از وب سایت آموزشی پی وی لرن همراهتون هستیم. در ادامه ی مبحث اشکال زدایی یا Debugging در WPF که در جلسه ی پیش آغاز نمودیم، اشکال زدایی یا Debugging در XAML را مورد بحث قرار می دهیم و در آخر نیز در مورد ابزارهای Debugging یا اشکال زدایی UI برای XAML توضیحاتی خواهیم داشت.
اگر در XAML انتظار همان نوع اشکال زدایی را دارید ، شاید تعجب کنید، اگر بدانید که Debugging یا اشکال زدایی در کد XAML مانند اشکال زدایی در هر کد زبان دیگر رویه ای امکان پذیر نیست. هنگامی که اصطلاح اشکال زدایی یا debugging را در کد XAML می شنوید ، به این معنی است که باید error را پیدا کنید و آن را رفع کنید.
اشکال زدایی در یک برنامه XAML فرایندی است که به طور معمول انجام می دهید تا بررسی کنید که آیا اتصالات شما درست کار می کند یا خیر. و اگر درست کار نمی کند ، باید بررسی کنید که چه اشتباهی رخ داده است. متأسفانه تنظیم نقاط break در اتصالات XAML به جز Silverlight امکان پذیر نیست ، اما می توانیم از پنجره Output برای بررسی ارورهای اتصال داده (data binding) استفاده کنیم. بیایید به کد XAML زیر توجه کنیم تا اروری در اتصال داده ها پیدا شود.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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> |
خصوصیات متن دو بلوک متنی به صورت استاتیک برای “Name” و “Title” تنظیم شده اند ، در حالی که دو بلوک متنی دیگر خصوصیات متن به “FirstName” و “Title” متصل می شوند ، اما کلاس متغیرها در Name و Titleدر کلاس Employee هستند که در زیر نشان داده شده است.
در این جا عمداً یک نام متغیر نادرست نوشتیم تا درک کنیم وقتی خروجی مورد نظر نشان داده نمی شود ، ما می توانیم این نوع اشتباه را پیدا کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | 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; } } } |
در این جا اجرای کلاس MainWindow در کد #C انجام شده است.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | 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(); } } } |
بیایید این برنامه را اجرا کنیم و می توانید بلافاصله در MainWindow ببینید که ما با موفقیت به Title آن شیء Employee محدود شده ایم. اما نام آن محدود نیست.
برای بررسی این که چه اتفاقی برای نام افتاده است ، باید به پنجره خروجی که در آن تعداد زیادی log تولید می شود ، نگاه کنیم.
برای پیدا کردن آسان error فقط باید برای این ارور جستجو کنید و شما خطای زیر را پیدا می کنید که می گوید “خاصیت BindingExpression path error: ‘FirstName در ‘object’ ”Employe” یافت نشد.
1 2 3 4 | 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') |
که به وضوح نشان می دهد که FirstName عضو کلاس Employee نیست ، بنابراین به رفع این نوع مسائل در برنامه شما کمک می کند.
هنگامی که دوباره FirstName را به Name تغییر دهید ، خروجی مورد نظر را مشاهده خواهید کرد.
ابزارهای رفع اشکال UI برای XAML با Visual Studio 2015 برای بررسی کد XAML در زمان اجرا معرفی شدند. با کمک این ابزارها ، کد XAML در قالب یک درخت بصری از برنامه WPF در حال اجرا و همچنین ویژگی های مختلف عنصر UI در درخت ارائه شده است. برای فعال کردن این ابزارها ، مراحل ذکر شده در زیر را دنبال کنید.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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> |
هنگامی که برنامه را اجرا می کنید ، آن Live Visual Tree را نشان می دهد که در آن همه عناصر در یک درخت نشان داده شده اند.
این Live Visual Tree ساختار کامل طرح را برای درک مکان عناصر UI نشان می دهد. اما این گزینه فقط در Visual Studio 2015 موجود است. اگر از گزینه های قدیمی تر Visual Studio استفاده می کنید ، نمی توانید از این ابزار استفاده کنید ، اما ابزار دیگری وجود دارد که می تواند با ویژوال استودیو مانند XAML Spy برای Visual Studio یکپارچه شود. . می توانید آن را از xamlspy بارگیری کنید.
در این بخش از آموزش wpf با اشکال زدایی یا Debugging در XAML آشنا شدیم و ابزارهای Debugging یا اشکال زدایی UI برای XAML را نیز بیان نمودیم. در بخش بعد به بررسی Custom Controls یا کنترل های سفارشی می پردازیم. با ادامه ی آموزش ها و وب سایت پی وی لرن همراه باشید.