مروری بر تکنولوژی XAML – آموزش WPF

چهارشنبه ۱۹ شهریور ۱۳۹۹
بازدید ۱,۳۸۷ نفر
AmRo
(10 امتیاز از 2 رای)
Loading...

تصویر wpf-xaml-overview_9042 مروری بر تکنولوژی XAML - آموزش WPF

مروری بر تکنولوژی XAML

یکی از اولین چیزهایی که ممکن است شما هنگام کار با WPF با آن برخورد کنید، XAML است. در این بخش تکنولوژی XAML را بررسی خواهیم کرد. XAML کوتاه شده عبارت Extensible Application Markup Language و یک زبان نشانه گذاری مبتنی بر XML است. به شکل عمده از این زبان برای طراحی رابط کاربری برنامه استفاده می شود. با این حال XAML کاربردهای دیگری نیز دارد. در این زبان ایجاد، مقداردهی اولیه و تنظیم خواص اشیاء بسیار راحت است.

سینتکس پایه

زمانی که یک پروژه WPF ایجاد می شود، به صورت پیش فرض کدهای زیر در داخل فایل 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>

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

بخش	توضیحات
	این تگ شروع کننده عنصر روت است که سایر اعناصر را در خود جای می دهد.
x:Class = “Resources.MainWindow”	این بخش مربوط به اعلان کلاس partial است که کلاس ایجاد شده در بخش xaml را به کلاس موجود در بخش code-behind متصل می کند.
xmlns = “http://schemas.microsoft.com/win fx/2006/xaml/presentation”	این بخش فضای نام پیشفرض برای WPF client/framework را مشخص می کند.
xmlns:x = “http://schemas.microsoft.com/w infx/2006/xaml”	فضای نام پیشفرض برای زبان XAML را بر روی x: تنظیم می کند.
>	پایان تگ شروع کننده عنصر روت را مشخص می کند.
	این بخش شامل تگ شروع کننده و پایان دهنده عنصر Grid است که هیچ عنصر فرزندی ندارد.
	تگ پایان دهنده عنصر روت

قوانین حاکم بر زبان XAML تقریبا مشابه زبان XML است. در XAML برای تعریف یک عنصر باید قوانین زیر را رعایت کنید.

تعریف یک عنصر با یک < و نام آن عنصر شروع می شود.
سپس خاصیت های مورد نیاز تعریف می شوند.
بعد از آن تگ مربوط به عنصر باید بسته شود. برای اینکار از /> استفاده می شود.

مثالی از یک عنصر بدون فرزند:

<Button/>

مثالی از یک عنصر به همراه چند خاصیت:

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

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

مثالی از یک روش جایگزین برای تعریف خاصیت ها:

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

مثالی از تعریف یک عنصر با فرزند. در این مثال عنصر StackPanel عنصر TextBlock را به عنوان فرزند خود شامل می شود:

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

</StackPanel>

چرا در WPF از XAML استفاده می کنیم؟

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

<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 ایجاد کردیم را با استفاده از 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# را کامپایل و اجرا کنید، خروجی زیر را مشاهده خواهید کرد.

تصویر wpf-xaml-overview_1 مروری بر تکنولوژی XAML - آموزش WPF

همانطور که می بینید، خروجی هر دو کد یکسان است. در انتها بهتر است به چند نکته توجه کنید.

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

WPF - درخت عناصر WPF - ساخت اولین برنامه