آشنایی با محیط کدنویسی WPF
در این درس می‌خواهم شما را با محیط کدنویسی WPF آشنا کنم. من هر مرحله را به صورت گام به گام انجام داده و به طور مختصر در مورد هر کدام توضیح می‌دهم. برنامه ویژوال استودیو را باز کنید و به مسیر Create New Project بروید و مراحل زیر را جهت ایجاد یک برنامه WPF طی نمایید :
بعد از زدن دکمه OK در شکل بالا،مانند شکل زیر از پنجره Window گزینه Reset Window Layout را کلیک نمایید:
با کلیک بر روی گزینه فوق پنجره‌ای به صورت زیر ظاهر می‌شود که در آن بر روی گزینه Yes کلیک کنید:
با کلیک بر روی گزینه Yes، فرم نهایی برنامه به صورت زیر در می‌آید که ما هر قسمت از آن را شماره گذاری کرده‌ایم تا توضیح آنها راحت‌تر باشد :
توضیح هر یک از قسمت‌های محیط WPF در جدول زیر آمده است :
| شماره | نام | توضیح |
| 1 | Document Outline | این پنجره برای نمایش ساختار سلسله مراتبی کنترل‌ها به کار می‌رود. به وسیله این پنجره، درک اینکه چه کنترلی والد و چه کنترلی فرزند است راحت‌تر می‌باشد. |
| 2 | ToolBox | جعبه‌ای که کنترل‌های WPF در آن قرار دارند. |
| 3 | Server Explorer | از این پنجره برای کار با بانک اطلاعاتی استفاده می‌شود که در آینده توضیح می‌دهیم. |
| 4 | MainWindows.xaml | سربرگی که محیط طراحی و کدنویسی در XAML را نشان می‌دهد. |
| 5 | MainWindows.xaml.cs | سربرگی که محیط کدنویسی سی شارپ را نشان می‌دهد. |
| 6 | محیط کدنویسی XAML | محیطی برای نوشتن و ویرایش کدهای XAML |
| 7 | Properties | در این پنجره خصوصیات کنترل انتخاب شده، نمایش داده می‌شود. |
| 8 | Notification | آپدیت‌های جدید نرم افزار ویژوال استودیو در این پنجره نمایش داده می‌شود. |
| 9 | Team Explorer | از این پنجره برای هماهنگ کردن یک تیم برنامه نویسی که بر روی یک پروژه کار می‌کنند، استفاده می‌شود. این پنجره ویژوال استودیو را به پروژه‌های موجود در Azure DevOps متصل می‌کند (توضیح آن خارج از این بحث است). |
| 10 | Solution Explorer | پنجره‌ای برای نمایش فایل‌های پروژه |
همانطور که در بخش Windows Form توضیح داده شد، وقتی که یک کنترل بر روی فرم قرار داده می‌شود، ویژوال استودیو به صورت خودکار و در پس زمینه، کدهای مربوط به این کنترل از جمله مکان قرارگیری کنترل بر روی فرم، اندازه، رنگ، متن و … را تولید می‌کند. مثلاً در برنامه ویندوزی زیر ما یک دکمه بر روی فرم قرار داده‌ایم :
بعد از قرارگیری این کنترل بر روی فرم، کدهایی در پس زمینه و در فایلی با نام و پسوند Designer.cs تولید به صورت می‌شود:
این کدها، کدهای سی شارپی هستند. اما در WPF وضع فرق می‌کند. وقتی که شما یک کنترل را بر روی فرم قرار می‌دهید، در قسمت کدنویسی XAML، کدهای مربوط به این آن به صورت خودکار تولید می‌شوند :
البته همانطور که قبلاً هم اشاره شد، WPF از XAML برای طراحی رابط گرافیکی استفاده می‌کند، ولی این بدان معنا نیست که بدون XAML نمی‌توان ظاهر را طراحی کرد چون شما می‌توانید همین کار را با استفاده از پنجره‌های Toolbox و Properties هم انجام دهید و یا اینکه از کدهای سی شارپ در فایل MainWindow.xaml.cs برای طراحی ظاهر استفاده کنید. مثلاً اگر دکمه بالا را حذف کرده و به سربرگ MainWindow.xaml.cs برویم، می‌توانیم همین دکمه را به صورت زیر با استفاده از کدهای سی شارپ تولید کنیم:
ولی این، کار شما را سخت‌تر می‌کند. ویژوال استودیو به نوعی کدنویسی XAML را راحت‌تر کرده است. مثلاً شما می‌توانید هم با کدنویسی XAML یک دکمه را بر روی فرم قرار دهید و خواصی مانند رنگ و اندازه و … آن را مقدار دهی کنید و هم می‌توانید با استفاده از دو پنجره Properties و Toolbox این کار را انجام دهید:
به عنوان نمونه، اگر کد زیر را در بخش کدنویسی XAML بنویسید، یک دکمه با عرض 300 و ارتفاع 100 ایجاد می‌شود که متن Button در داخل آن نوشته شده است:
<Button Content="Button" Width="300" Height="100"/>
حال اگر نخواهید از کدنویسی استفاده کنید، می‌توانید یک دکمه را از Toolbox بر روی فرم کشیده و در پنجره Properties خاصیت‌های Width و Height آن را به ترتیب برابر 300 و 100 قرار دهید :
گرچه ممکن است تصور کنید که طراحی ظاهر با XAML زمان بر و سخت‌تر است، ولی بعد از مدتی به این نتیجه خواهید رسید که استفاده از XAML و همچنین Intellisence واقعاً قوی ویژوال استودیو، برای طراحی رابط کاربری راحت‌تر است. توصیه اکید ما این است که برای طراحی ظاهر برنامه از XAML استفاده کنید.
بسیار عالی