مجموعه آموزشی طراحی رابط کاربری در UWP – فصل اول (XAML، زبانی برای طراحی، درس اول (آشنایی با زبان XAML)

مجموعه آموزشی طراحی رابط کاربری در UWP – فصل اول (XAML، زبانی برای طراحی، درس اول (آشنایی با زبان XAML)

زبان XAML که به صورت /zammel/ تلفظ میشود، زبانی است که بوسیلهی آن میتوان عناصر بصری و UI یک اپلیکیشنی را ساخت. این زبان برپایه زبان نشانه‌گذاری XML نوشته شده و به طور گسترده در کنار زبان‌های برنامه نویسی و در اغلب Frameworkهای مایکروسافت مورد استفاده قرار گرفته که یکی از آن‌ها برنامه نویسی یونیورسال ویندوز است. زیاد وارد تئوریات نمیشویم زیرا اصلا کاربردی در برنامه نویسی نداشته و خسته کننده هستند که با هدف این مجموعه آموزشی در مغایرت است!

برای شروع، ویژوال استودیو خود را باز کنید و مسیر زیر را دنبال کنید تا یک پروژه یونیورسال ایجاد کنیم (باید قبل از آن Windows 10 SDK را نصب کرده باشید که متاسفانه بدلیل وجود مشکلاتی در سیستم بنده، از آموزش آن مغذورم ولی میتوانید از این لینک استفاده کنید که نوشته جناب آقای رامین مظلومی در انجمن وین نویس است وبه طور مفصل و زیبا توضیح داده‌اند.):

File > New > Project > Installed > Templates > Visual C# > Windows > Universal > Blank App (universal Windows)

پس از لود شدن، از Solution Explorer که در سمت راست ویژوال استودیو واقع شده، MainPage.xaml را انتخاب کنید. این صفحه به صورت پیشفرض صفحه اصلی است که در زمان اجرا، این صفحه اجرا میشود. با باز کردن MainPage.xaml با دو محیط روبرو خواهید شد. اولی Designer هست که میتوان بصورت Drag & Drop کنترلهای موجود در ToolBox را به صفحه اضافه کرد که معمولا برای کارهای حرفه‌ای استفاده نمیشود. دومین قسمت، قسمتی است که کدهای XAML در آنجا نوشته میشوند. با کدنویسی در قسمت XAML ، تغییرات را میتوانید در دیزاینر ببینید.

در قسمت ویرایشگر XAML عناصری وجود دارند که به آن‌ها تگ میگویند. تگ‌ها به دو صورت نوشته میشوند. در حالت اول، به صورت <Element/> نوشته می‌شوند. این حالت را بیشتر در جاهایی استفاده میکنند که تگ زیر مجموعه ای نداشته باشد (در بیشتر مواقع، نیاز هست که درون تگها، تگهای دیگری قرار دهیم، مثلا وقتی که میخواهیم درون یک دایره یک مستطیل رسم کنیم.). در حالت دوم، تگ‌ها به صورت <Element></Element> نوشته میشوند که از دو تگ آغازین و پایانی تشکیل میشود. در این صورت ما میتوانیم درون این تگها، تگهای دیگری را استفاده کنیم. مثال:

 

در نمونه کد بالا، اولین تگ ما Grid است که نیاز داریم عنصری از نوع TextBlock (که برای نشان دادن یک متن استفاده میشود.) را داشته باشیم. میبینید که بعد از تگ TextBlock، خاصیتهایی (Properties) را به آن اضافه کرده ایم که شامل Name و Text میباشند. از پراپرتی Name برای نشان دار کردن یک المنت استفاده میشود که بعدا میتوانیم در Code Behind (قسمتی که کدهای اجرایی برنامه نوشته میشوند که در این آموزش با زبان سی شارپ یا C# کار خواهیم‌کرد) به آنها دسترسی پیدا کنیم. خاصیت Text هم برای متنی که میخواهیم نشان داده شود، استفاده میکنیم. چون در تگ TextBlock ما نیاز نداشتیم که درون آن المنت دیگری بگذاریم، از حالت اول نگارش تگ‌ها استفاده کردیم، اما میتوانستیم که بصورت دوم نیز بنویسم (به برخی از تگ‌ها نمیتوان تگ زیرین اضافه کرد و تگ TextBlock هم جزو آن‌ها است.). تگ TextBlock بالا، هیچ فرقی با نمونه‌های پایینی ندارد:

و

و

نکته‌ای که در حالت اول وجود دارد، این است که فاصله، تب، اینتر و موارد مشابه، تغییری در عملکرد کدهای زمل ندارند و اگر کد ما زیاد طولانی باشد، میتوانیم برای خوانایی بیشتر بین هر پراپرتی یک اینتر بزنیم.

در حالت دوم نیز همانطور که گفته شد، میتوان تگ ها را به هر صورتی که میخواهیم بنویسیم، و میتوان تگ TextBlock را به صورت باز نیز نوشت، فقط یک نکته وجود دارد و آن این است که ما نمیتوانیم تگی را به عنوان زیر مجموعه تگ TextBlock قرار دهیم، فقط میتوانیم به جای استفاده از پراپرتی Text، متن نمایشی را در داخل تگ باز و بسته‌ی TextBlock قرار دهیم.

به MainPage.xaml برمیگردیم، در قسمت کد، شما شاهد تگ Page، به عنوان اولین و اصلی‌ترین تگ هستید. این تگ، تگی است که در صفحات XAML، به عنوان تگ اصلی محسوب میشود و وجود آن ضروری است. درون تگ Page، فضاهای نام (Name Space)هایی به صورت پراپرتی وجود دارند که دانستن آن‌ها فعلا اصلا ضرورت ندارد و ممکن است که دچار سردرگمی شوید، ولی در فصل‌های آینده در باره آن‌ها صحبت خواهیم کرد.

بعد از تگ Page، تگ Grid قرار دارد. در XAML، تگهایی وجود دارند که ما از آن‌ها استفاده میکنیم تا کنترل‌هایمان را درون آن‌ها نگه‌داریم که مانند ظروفی هستند که از آن به عنوان نگه داشتن مواد خوراکی و غیره استفاده می‌شود. در فصل بعد راجع به این نوع کنترل ها که Layout Panels نامیده میشوند، به طور مفصل صحبت خواهیم کرد. تگ Grid پرکاربردترین کنترل از نوع Layout Controlها می‌باشد.

شاید مطالبی که در این درس گفته شد، زیاد برای شما تفهیم نشده‌باشد، ولی اگر حدود 70 درصد از این درس را بلد شده باشید کافی است و میتوانید با گذراندن درسهای بعدی، کاملا این درس را یاد بگیرد.

در صورتی که مشکلی داشتید یا میخواستید پیشنهادی را مطرح کنید، با کامنت کردن زیر این مطلب، یا با ایمیل زدن به آدرس: ormfm@outlook.com، با من در ارتباط باشید.

1+

درباره نویسنده

مایکروسافت و دیگر هیچ!

مطالب مرتبط

2 نظر

    1. اورمان فقیهی محدث

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

      0
      پاسخ

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد.