آموزش برنامه نویسی

XAML چیست؟

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

<openTag>data</closeTag>

البته برای ایجاد یک عنصر XAML می‌توان بعد از نام عنصر در تگ اول علامت / را هم گذاشت، در این صورت دیگر نیازی به تگ بسته نیست :

<openTag />

عناصر XAML همانند عناصر XML می‌توانند دارای خواصی باشند. این خواص ممکن است طول، ارتفاع، رنگ و … مربوط به عنصر باشد. این خواص را می‌توان بعد از نام عنصر در تگ آغازین به صورت زیر تعریف کرد :

<openTag att1="value1" att2="value2" ... attN="valueN">data</closeTag>

یا

<openTag att1="value1" att2="value2" ... attN="valueN" />

XAML همانند XML به بزرگ و کوچک بودن حروف حساس است (case sensitive). و این حساسیت هم در مورد نام کنترل ها و هم خاصیت های آنها وجود دارد. بنابراین دو کلمه Button و button با هم متفاوتند. XAML فضاهای خالی را نادیده می‌گیرد، بنابراین به جای نوشتن یک فایل در یک خط می‌توانید آن را در چند خط بنویسید تا خوانایی آن بالاتر رود. بین عناصر XAML ممکن است رابطه پدر- فرزندی وجود داشته باشد، یعنی تگ‌ها به صورت تو در تو باشند :

<parent>
   <child1>data</child1>
   <child2>
      <grandchild1>data</grandchild1>
   </child2>
</parent>

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

<Button Content="Button" Width="200" Height="90"/>

کد بالا یک کنترل دکمه (Button) ایجاد می‌کند که دارای سه خاصیت Width ،Height و Content می‌باشد. در مورد این خاصیت‌ها و همچنین کدهایی که در ادامه این درس آمده اند، در درس‌های آینده بیشتر توضیح می‌دهیم. کد بالا را به صورت زیر هم می‌توان نوشت :

<Button Content="Button" Width="200" Height="90"></Button>

کدهای بالا هر دو عملکرد یکسانی دارند و یک دکمه با عرض 200 و ارتفاع 90 ایجاد می‌کنند که روی آن کلمه Button نوشته شده است :

کدهای بالا را به صورت تو در تو هم می‌توان نوشت:

<Button>
    <Button.Content>Button</Button.Content>
    <Button.Width>  200   </Button.Width>
    <Button.Height> 90    </Button.Height>
</Button>

کد بالا هم همان دکمه را ایجاد می‌کند. تفاوتی که این نوع کدنویسی با روش‌های بالا دارد این است که دست شما را برای ایجاد کنترل‌های پیچیده باز می‌گذارد. فرض کنید که می‌خواهیم رنگ پس زمینه و متن دکمه را تغییر دهیم. این کار بسیار ساده بوده و با استفاده از همان حالت اول امکان پذیر است :

<Button Content="Button" Width="200" Height="90" Background="Green" Foreground="White"/>

خروجی کد بالا به صورت زیر است:

اما اگر بخواهیم یک طیف رنگی (Gradient) به دکمه اعمال کنیم، استفاده از روش بالا عملاً غیر ممکن است و باید به صورت زیر عمل کنیم:

  1 <Button Content="Button" Width="200" Height="90" Foreground="White">
  2    <Button.Background>
  3       <LinearGradientBrush StartPoint="0, 1" EndPoint="0, 0">
  4          <GradientStop Color="Green"     Offset="0"/>
  5          <GradientStop Color="#FFFFFFFF" Offset="0.99"/>
  6       </LinearGradientBrush>
  7    </Button.Background>
  8 </Button>

خروجی کد بالا به صورت زیر است :

همانطور که از کد بالا احتمالاً متوجه شده‌اید، می‌توان از خاصیت‌ها به صورت تلفیقی هم استفاده کرد. مثلاً در کد بالا ما سه خاصیت Width، Height و Content را بعد از نام عنصر (خط 1) و خاصیت Background را به صورت جدا و در تگ‌های باز و بسته نوشته‌ایم (خطوط 2 و 7). حال ممکن است که این سؤال برایتان پیش آمده باشد که چرا نمی‌توان در داخل تگ باز، همین طیف رنگ را اعمال کرد؟ دلیل آن این است که LinearGradientBrush و GradientStop خود اشیایی هستند که دارای خواص مختص به خود می‌باشند. یا بهتر است بگوییم که خاصیت Background دارای یک رنگ خالص نیست و باید از شیء LinearGradientBrush برای ایجاد رنگ‌های آن استفاده کنیم که در نتیجه نمی‌توان این خاصیت (Background) را در داخل تگ ابتدایی نوشت.
برای استفاده از WPF می‌توانید از XAML استفاده نکنید و به کدنویسی #C بسنده نمایید ولی کارتان سخت‌تر می‌شود. برای درک بهتر، فرض کنید کد ابتدای درس را می‌خواهیم از طریق کدنویسی #C پیاده سازی کنیم :

Grid grid = new Grid();
this.Content = grid;

Button button  = new Button();        
button.Width   = 200;
button.Height  = 90;
button.Content = "Button";

grid.Children.Add(button);

همانطور که مشاهده می‌کنید کدی که در #C نوشته‌ایم طولانی‌تر از کدی است که در XAML نوشته‌ایم. کد XAML ابتدای درس بسیار خواناتر و کوتاه‌تر می‌باشد. نکته آخر اینکه، می‌توان با استفاده از یک ویرایشگر متن ساده فایل‌های XAML تولید کرد اما ویژوال استودیو دارای یک ویرایشگر XAML قوی بوده که فایل را به صورت خودکار قالب بندی می‌کند و همچنین می‌توان از خاصیت IntelliSense برای سرعت بخشیدن به کارتان استفاده کنید.