۱۹
اسفند

جلسه ۰۴ : معرفی XAML – آموزش WPF

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

جزئیات

دوستان و علاقمندان به مباحث WPF وقتتون بخیر. با آموزش WPF از وب سایت آموزشی پی وی لرن همراهتون هستیم. معرفی XAML و سینتکس XAML را در ادامه ی آموزش WPF بررسی خواهیم نمود.

فهرست

معرفی XAML

یکی از اولین مواردی که هنگام کار با WPF با آن روبرو می شوید XAML است. XAML مخفف Extensionible Markup Language است. این یک زبان ساده و اعلانی مبتنی بر XML است.

در XAML ایجاد ، مقداردهی و تنظیم خواص اشیاء با روابط سلسله مراتبی بسیار آسان است.

XAML عمدتا برای طراحی رابط کاربری گرافیکی مورد استفاده قرار می گیرد ، اما می تواند برای مقاصد دیگر نیز استفاده شود ، به عنوان مثال ، برای workflow در Workflow Foundation.

در ادامه سینتکس XAML را خواهیم داشت.

سینتکس XAML

وقتی پروژه WPF جدید خود را ایجاد می کنید ، مطابق شکل زیر با برخی از کد XAML به طور پیش فرض در MainWindow.xaml روبرو می شوید.

مثال :

<Window x:Class = "Resources.MainWindow" 
   xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
   Title = "MainWindow" Height = "350" Width = "525"> 
	
   <Grid> 
         
   </Grid> 
	
</Window>

<Window x:Class = "Resources.MainWindow"

xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"

Title = "MainWindow" Height = "350" Width = "525">

<Grid>

</Grid>

</Window>

فایل XAML فوق شامل انواع مختلفی از اطلاعات است. جدول زیر به طور خلاصه نقش هر اطلاعات را توضیح می دهد.

اطلاعات	شرح
Window>	این باز کردن عنصر شیء یا کانتینر ریشه است.
“x:Class = “Resources.MainWindow	این یک اعلان کلاس جزئی است که نشانه گذاری را به کد کلاس جزئی تعریف شده در پشت متصل می کند.
“xmlns = “http://schemas.microsoft.com/win fx/2006/xaml/presentation	فضای نامی پیش فرض XAML را برای مشتری / چارچوب WPF ترسیم می کند.
“xmlns:x = “http://schemas.microsoft.com/w infx/2006/xaml	فضای نام XAML برای زبان XAML که آن را به 😡 پیشوند ترسیم می کند.
<	انتهای عنصر شیء ریشه
<Grid> <Grid/>	شروع و بستن تگ ها از یک شی گراید خالی است.
<Window/>	بستن عنصر شی

قوانین سینتکس برای XAML تقریباً شبیه XML است. اگر به یک سند XAML نگاهی بیندازید ، متوجه می شوید که در واقع یک فایل XML معتبر است ، اما یک فایل XML لزوماً یک فایل XAML نیست. از آن جا که در XML ، مقدار ویژگی ها باید یک رشته باشد در حالی که در XAML ، می تواند یک شیء متفاوت باشد که به عنوان سینتکس عنصر Property شناخته می شود.

سینتکس یک عنصر Object با یک (>) شروع می شود و به دنبال آن نام یک جسم ، به عنوان مثال Button می آید.
برخی از خصوصیات و ویژگی های آن عنصر را تعریف کنید.
عنصر Object باید با یک اسلش (/) و به دنبال آن بلافاصله با یک براکت < بسته می شود.

نمونه ای از شی ساده و بدون شی کودک را در زیر می بینیم.

مثال :

<Button/>

نمونه ای از عنصر شی با برخی خصوصیات را می بینیم.

مثال :

<Button Content = "Click Me" Height = "30" Width = "60" />

1	<Button Content = "Click Me" Height = "30" Width = "60" />

نمونه ای از سینتکس متناوب ، خواص را تعریف می کند (نحو عنصر Property )

مثال :

<Button> 
   <Button.Content>Click Me</Button.Content> 
   <Button.Height>30</Button.Height> 
   <Button.Width>60</Button.Width> 
</Button>

<Button.Content>Click Me</Button.Content>

<Button.Height>30</Button.Height>

<Button.Width>60</Button.Width>

</Button>

نمونه ای از Object با Child Element: StackPanel شامل Textblock به عنوان عنصر کودک است

مثال :

<StackPanel Orientation = "Horizontal"> 
   <TextBlock Text = "Hello"/> 
</StackPanel>

</StackPanel>

چرا XAML در WPF

XAML نه تنها به طور گسترده ای شناخته شده ترین ویژگی WPF است ، بلکه یکی از ویژگی های misunderstood نیز محسوب می شود. اگر در معرض WPF هستید ، حتماً از XAML شنیده اید. اما به دو واقعیت کم تر شناخته شده زیر در مورد XAML نیز توجه داشته باشید.

WPF به XAML نیاز ندارد.
XAML به WPF احتیاج ندارد.

آنها در حقیقت قطعات فن آوری جدا هستند. برای درک این مسئله می توانیم به یک مثال ساده نگاه کنیم که در آن یک دکمه با برخی از خصوصیات XAML ایجاد شده است.

مثال :

<Window x:Class = "WPFXAMLOverview.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> 
      <Button x:Name = "button" Content = "Click Me" HorizontalAlignment = "Left"  
         Margin = "150" VerticalAlignment = "Top" Width = "75" /> 
   </StackPanel> 
	
</Window>

<Window x:Class = "WPFXAMLOverview.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">

<Button x:Name = "button" Content = "Click Me" HorizontalAlignment = "Left"

Margin = "150" VerticalAlignment = "Top" Width = "75" />

</StackPanel>

</Window>

در صورت عدم استفاده از XAML در WPF ، می توانید همان نتیجه رابط کاربری گرافیکی را با زبان رویه ای نیز بدست آورید. بیایید به همان مثال نگاهی بیندازیم ، اما این بار دکمه ای در #C ایجاد خواهیم کرد.

مثال :

using System.Windows; 
using System.Windows.Controls;  

namespace WPFXAMLOverview { 
   /// <summary> 
      /// Interaction logic for MainWindow.xaml 
   /// </summary> 
	
   public partial class MainWindow : Window { 
	
      public MainWindow() { 
         InitializeComponent(); 
			
         // Create the StackPanel 
         StackPanel stackPanel = new StackPanel(); 
         this.Content = stackPanel; 
			
         // Create the Button 
         Button button = new Button();
         button.Content = "Click Me"; 
         button.HorizontalAlignment = HorizontalAlignment.Left; 
         button.Margin = new Thickness(150); 
         button.VerticalAlignment = VerticalAlignment.Top; 
         button.Width = 75; 
         stackPanel.Children.Add(button);  
      } 
   } 
}

using System.Windows;

using System.Windows.Controls;

namespace WPFXAMLOverview {

/// <summary>

/// Interaction logic for MainWindow.xaml

/// </summary>

public partial class MainWindow : Window {

public MainWindow() {

InitializeComponent();

// Create the StackPanel

StackPanel stackPanel = new StackPanel();

this.Content = stackPanel;

// Create the Button

Button button = new Button();

button.Content = "Click Me";

button.HorizontalAlignment = HorizontalAlignment.Left;

button.Margin = new Thickness(150);

button.VerticalAlignment = VerticalAlignment.Top;

button.Width = 75;

stackPanel.Children.Add(button);

}

وقتی کد XAML یا کد #C را کامپایل و اجرا می کنید ، خروجی را مشاهده می کنید که در زیر مشاهده می کنید.

معرفی XAML

از مثال بالا مشخص است که آنچه در XAML می توانید برای ایجاد ، مقداردهی و تنظیم خواص اشیاء انجام دهید ، همان کارها را نیز می توانید با استفاده از کد انجام دهید.

XAML تنها روش ساده و آسان دیگری برای طراحی عناصر UI است.
با XAML ، به این معنی نیست که چیری که با طراحی عناصر UI می توانید انجام دهید ، تنها راه است. می توانید اشیاء را در XAML اعلام کنید یا آنها را با استفاده از کد تعریف کنید.
XAML اختیاری است ، اما با وجود این ، در قلب طراحی WPF قرار دارد.
هدف XAML قادر ساختن طراحان بصری برای ایجاد عناصر رابط کاربری به طور مستقیم است.
هدف WPF تا کنترل همه جنبه های بصری رابط کاربری از نشانه گذاری را امکان پذیر سازد.

کلام پایانی

معرفی XAML و سینتکس XAML را ادامه ی آموزش WPF مورد بررسی قرار دادیم. در جلسه ی آینده به بررسی Elements Tree خواهیم پرداخت.

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

XAML چیست؟ ,آموزش XAML ,آموزش سینتکس XAML ,چرا XAML در WPF ,فایل XAML

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

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

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

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

جلسه ۰۴ : معرفی XAML – آموزش WPF

معرفی XAML

سینتکس XAML

چرا XAML در WPF

کلام پایانی

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

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ