۱۹
اسفند

جلسه ۱۸-۰۲ : اشکال زدایی یا Debugging در WPF

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

دوستان و علاقمندان به مباحث WPF وقتتون بخیر. با آموزش WPF از وب سایت آموزشی پی وی لرن همراهتون هستیم. در ادامه ی مبحث اشکال زدایی یا Debugging در WPF که در جلسه ی پیش آغاز نمودیم، اشکال زدایی یا Debugging در XAML را مورد بحث قرار می دهیم و در آخر نیز در مورد ابزارهای Debugging یا اشکال زدایی UI برای XAML توضیحاتی خواهیم داشت.

فهرست

اشکال زدایی یا Debugging در WPF

اشکال زدایی یا Debugging در XAML

اگر در XAML انتظار همان نوع اشکال زدایی را دارید ، شاید تعجب کنید، اگر بدانید که Debugging یا اشکال زدایی در کد XAML مانند اشکال زدایی در هر کد زبان دیگر رویه ای امکان پذیر نیست. هنگامی که اصطلاح اشکال زدایی یا debugging را در کد XAML می شنوید ، به این معنی است که باید error را پیدا کنید و آن را رفع کنید.

در اتصال داده (data binding) ، داده های شما روی صفحه نمایش داه نمی شوند و شما نمی دانید چرا
یا یک موضوع مربوط به طرح بندی های ( layout) پیچیده است.
یا یک مسئله تراز یا موضوعات مربوط به تفاوت رنگ، هم پوشانی و غیره با برخی از الگوهای گسترده مانند ListBox و combo باکس است.

اشکال زدایی در یک برنامه XAML فرایندی است که به طور معمول انجام می دهید تا بررسی کنید که آیا اتصالات شما درست کار می کند یا خیر. و اگر درست کار نمی کند ، باید بررسی کنید که چه اشتباهی رخ داده است. متأسفانه تنظیم نقاط break در اتصالات XAML به جز Silverlight امکان پذیر نیست ، اما می توانیم از پنجره Output برای بررسی ارورهای اتصال داده (data binding) استفاده کنیم. بیایید به کد XAML زیر توجه کنیم تا اروری در اتصال داده ها پیدا شود.

مثال :

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

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

</StackPanel>

</Grid>

</Window>

خصوصیات متن دو بلوک متنی به صورت استاتیک برای “Name” و “Title” تنظیم شده اند ، در حالی که دو بلوک متنی دیگر خصوصیات متن به “FirstName” و “Title” متصل می شوند ، اما کلاس متغیرها در Name و Titleدر کلاس Employee هستند که در زیر نشان داده شده است.

در این جا عمداً یک نام متغیر نادرست نوشتیم تا درک کنیم وقتی خروجی مورد نظر نشان داده نمی شود ، ما می توانیم این نوع اشتباه را پیدا کنیم.

مثال :

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

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 انجام شده است.

مثال :

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

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 محدود شده ایم. اما نام آن محدود نیست.

اشکال زدایی یا Debugging در XAML

برای بررسی این که چه اتفاقی برای نام افتاده است ، باید به پنجره خروجی که در آن تعداد زیادی log تولید می شود ، نگاه کنیم.

برای پیدا کردن آسان error فقط باید برای این ارور جستجو کنید و شما خطای زیر را پیدا می کنید که می گوید “خاصیت BindingExpression path error: ‘FirstName در ‘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')

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 تغییر دهید ، خروجی مورد نظر را مشاهده خواهید کرد.

ابزارهای Debugging یا اشکال زدایی UI برای XAML

ابزارهای رفع اشکال UI برای XAML با Visual Studio 2015 برای بررسی کد XAML در زمان اجرا معرفی شدند. با کمک این ابزارها ، کد XAML در قالب یک درخت بصری از برنامه WPF در حال اجرا و همچنین ویژگی های مختلف عنصر UI در درخت ارائه شده است. برای فعال کردن این ابزارها ، مراحل ذکر شده در زیر را دنبال کنید.

به منوی Tools رفته و از منوی Tools باید Options را انتخاب کنید.
کادر گفتگوی زیر را باز می کند.

اشکال زدایی یا Debugging در XAML – ابزارهای اشکال زدایی UI برای XAML

به قسمت General گزینه های Debugging در سمت چپ بروید.
روی گزینه هایلایت شده ، یعنی “Enable UI Debugging Tools for XAML” کلیک کنید و بر روی دکمه OK کلیک کنید.
اکنون می توانید هر برنامه ی XAML را اجرا کنید یا از کد XAML زیر استفاده کنید.

مثال :

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

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

</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 را نشان می دهد که در آن همه عناصر در یک درخت نشان داده شده اند.

ابزارهای Debugging یا اشکال زدایی UI برای XAML – اشکال زدایی یا Debugging در WPF

این Live Visual Tree ساختار کامل طرح را برای درک مکان عناصر UI نشان می دهد. اما این گزینه فقط در Visual Studio 2015 موجود است. اگر از گزینه های قدیمی تر Visual Studio استفاده می کنید ، نمی توانید از این ابزار استفاده کنید ، اما ابزار دیگری وجود دارد که می تواند با ویژوال استودیو مانند XAML Spy برای Visual Studio یکپارچه شود. . می توانید آن را از xamlspy بارگیری کنید.

کلام پایانی

در این بخش از آموزش wpf با اشکال زدایی یا Debugging در XAML آشنا شدیم و ابزارهای Debugging یا اشکال زدایی UI برای XAML را نیز بیان نمودیم. در بخش بعد به بررسی Custom Controls یا کنترل های سفارشی می پردازیم. با ادامه ی آموزش ها و وب سایت پی وی لرن همراه باشید.

QR: جلسه ۱۸-۰۲ : اشکال زدایی یا Debugging در WPF

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۸-۰۲ : اشکال زدایی یا Debugging در WPF

اشکال زدایی یا Debugging در WPF

اشکال زدایی یا Debugging در XAML

ابزارهای Debugging یا اشکال زدایی UI برای XAML

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ