خواستههای یک طراح از برنامهنویس
مقدمهای بر XAML
یکی از با اهمیتترین فاکتورها در توسعه نرمافزارها، GUI یا رابط کاربری است، همان چیزی که شما به عنوان کاربر باید با آن روبهرو شوید. طراحی GUI از یک سری اصول و قواعد پیروی میکند که این قواعد به مرور زمان با گسترش نرمافزارهای مختلف، استانداردهایی که شرکتهای مختلف برای طراحی رابط کاربری خود دارند، بنا شده است. آزمایشها و بازخوردهایی که نرمافزارهای مختلف داشتهاند در این امر بیتاثیر نبوده است.
اما آیا یک برنامهنویس میتواند الزاما یک طراح باشد یا برعکس؟
جواب این پرسش خیر است. حال شما به عنوان برنامهنویس آیا این توانایی را دارید که همان چیزی را که طراحان به شما دادهاند در سیستم خود پیاده کنید؟ یا تکنولوژی مورد استفاده شما این قابلیت را به شما میدهد؟ باز هم جواب خیر است.
مایکروسافت بار دیگر دست به ابتکار زد و یک زبان نشانهگذاری و یک چارچوب کاری برای طراحی GUI و توسعه نسل جدید برنامهها معرفی کرد. این زبان نشانهگذاری که از عبارت Extensible Application Markup Language گرفته شده است، به اختصار XAML (زامل) خوانده میشود. این زبان راهحلی برای تعامل هر چه بیشتر بین برنامهنویس و طراح است. این زبان بر مبنای XML بنا نهاده شده است و شباهتهایی به HTML دارد که بعضیها از آن به Supper HTML یاد میکنند.
ایـن زبــــان نشانهگذاری به شما اجازه طراحی رابط کاربری را میدهد، مثل HTML و همین طور تعریفکردن Styleها برای دلخواهکردن اجزا که کارکرد آن شبیبه به CSS است، برای مثال به کد زیر دقت کنید:
«Style Id = “MyButton”»
«/Style»
«Button Style={StaticResource MyButton} /»
اگر شما با HTML آشنا باشید فهم این کد برای شما آنچنان سخت نیست، اما این زبان چگونه بین طراح و برنامهنویس ارتباط برقرار میکند؟ قبل از این، طراح یکسری عکس و فونت و رنگ به برنامهنویسان میداد تا آنها GUI برنامه را بر اساس طرح ارائه شده و همین طور عکسها و منابعی ایجاد کنند که طراح به آنها داده است. اما با ظهور XAML ابزارهایی برای طراحی و گرفتن خروجی بر مبنای XAML ایجاد شدند. یکی از این بستههای معروف Expression Studio است که طراح، طرح خود را طراحی میکند و سپس به صورت یک فایل XAML خروجی میگیرد. این فایل XAML حاوی یکسری Resource است که برنامهنویس میتواند در برنامه خود اضافه کند و آنها را مورد استفاده قرار دهد، دقیقا چیزی که بر اساس HTML و CSS استفاده میشد یعنی طراح یک CSS به برنامهنویس میداد و برنامهنویس با استفاده از CSS ظاهر برنامه را طراحی میکرد، به همین دلیل اختلاف زیادی بین طرح طراح و خروجی حاصل نمیشد. اما در برنامههای ویندوزی این اختلاف به بالاترین سطح میرسید، چرا که تمامی چارچوبهای کاری که برای طراحی رابط کاربری ارائه میشد اینقدر منعطف نبود و نیاز به کدنویسی زیادی داشت تا به ایده طراح نزدیک شوید.
حال چگونه با XAML کد بنویسیم؟
کد زیر را در نظر بگیرید:
«Button
Name="MyButton"
Width="50"
Content="Click Me!" /»
کد بالا یک button تعریف میکند که محتویات آن Click Me! است و طول آن ۵۰ پیکسل و نام آن MyButton است. همانطور که میبینید کدهای XAML خیلی شبیه به HTML است.
اجزای XAML به ۵ جزء اصلی تقسیم میشود که ۳ تای آنها را در این شماره معرفی میکنیم.
الف ) Root Element المانهایی هستند که در بالاترین سطح قرار میگیرند. اگر شما یک پروژه WPF در Visual Studio بسازید، المان اصلی Window است.
المان اصلی میتواند شامل یک یا چند Content باشد. تمامی کنترلهایی که از کلاس ConentControl به جای مانده، میتوانند به عنوان RootElement شناخته شوند. اما نکتهای که وجود دارد این است که نحوه نمایش آن است و این که آیا آوردن آن به عنوان RootElement منطقی است یا خیر.
ب) Control Element : کنترلها خود به چند دسته تقسیم میشوند:
1ـ Simple Control (کنترلهای ساده): کنترلهایی هستند که مستقیما از کلاس System.Windows.Control به ارث رسیدهاند و شامل ویژگیهای Content و data-x-Items و Header نیستند، جلوتر در مورد این ویژگیها توضیح خواهیم داد.
2ـ Contain Control (کنترلهای شامل شونده): کنترلهایی هستند که فقط دارای صفت Content هستند و از کلاس ContentControl به جای ماندهاند.
3ـ Item Control: این کنترلها دارای یک سری Item درون خود هستند مثل ListBox و StackPanel و...
4ـ HeaderItem Control: کنترلهایی هستند که علاوه بر داشتن یکسری Item میتوانند برای Itemها خصوصیات Header نیز تعریف کردم مثل Menu که شامل یکسری MenuItem است.
5ـ HeaderContent Control: کنترلهایی هستند که علاوه بر داشتن Header میتوانند شامل چند کنترل دیگر نیز باشند. مثل Expander، TabItem.
ج) Panel Elemen: بعضی وقتها نیاز است کنترلهایی که در یک جهت قرار دارند در یک جا باشند و مثلا با یک تیتر مشخص شوند. بگذارید طور دیگری مساله را مطرح کنیم. شما میخواهید در فرم اصلی برنامه یک بخش Login درست کنید.
بهتر است اجزایی را که مربوط به Login است در یک Panel بگذاریم و آن پنل را در جای مربوط به خود در روی فرم اصلی قرار دهیم. این کار چند مزیت دارد، فرم شما ساختاری زیباتر دارد و دسترسی به کنترلهای هر بخش سادهتر میشود، در شمارههای بعدی در مورد User Controlها صحبت میکنیم تا مزیت این کار بیشتر مشخص میشود. از Panelها میشود به Grid و StackPanel، WrapPanel، DockPanel ... نام برد.
امیربهاالدین سبطالشیخ
گفت و گو
