كتابة تطبيقك الأول من النوع Wpf Application

تصميم تطبيق WPF لا يختلف كثيرا عن تصميم تطبيق Windows Forms حيث يمكنك إضافة التحكمات على سطح التصميم ومع ذلك فهناك بعض الاختلافات فبالإضافة لنوافذ التصميم المألوفة ستجد نافذة إضافية تعرض كود XAML حيث تستخدم هذه اللغة لإنشاء واجهة المستخدم. فعندما تقوم بتطوير تطبيقات النوافذ التقليدية تقوم بسحب التحكمات من الـ ToolBox أو إن رغبت يمكنك كتابة كود لإنشاء تلك التحكمات فعندما تقوم بسحب التحكم إلى النموذج يتم إنشاء الكود آليا من أجلك وبشكل مشابه عندما تقوم بإنشاء تطبيق WPF يمكنك إنشاء التحكم بكتابة كود XAML أو بسحب التحكم إلى نافذة WPF.

ولغة XAML منظمة إلى عناصر ببنية شجرية مشابهة لطريقة كتابة ملفات XML حيث تجد أن العنصر مضمن ضمن قوسين حادين وهناك تحديد فتح وتحديد إغلاق لكل عنصر فمثلا قد يكون لديك عنصر Button يمكن أن يظهر بالشكل <Button></Button> ويمكنك أن تصف كيف سيبدو ذلك العنصر بضبط الخصائص attributes كـ Location أو Height أو Width وهي تظهر داخل الأقواس الافتتاحية للعنصر بشكل زوج اسم وقيمة مفصولين بعلامة = حيث تكون القيمة محصورة ضمن علامتي تنصيص مثل

<Button Height="23"></Button>

وعندما تقوم بسحب تحكمات WPF من الـ ToolBox إلى نافذة المصمم تولد بيئة التطوير كود XAML آليا لذلك التحكم فالكود التالي يتم توليده نتيجة عملية إضافة تحكم من النوع System.Windows.Controls.Button

<Button Height="23" HorizontalAlignment="Left" Margin="10,10,0,0" 
	Name="Button1" VerticalAlignment="Top" Width="75">Button</Button>

دعنا نقم ببعض التجارب تطبيقا على ما ورد سابقا:

• أنشئ تطبيقا جديدا من النوع WPF Application و سمه WPFWindow ثم اضغط OK فيتم إنشاء تطبيق WPF جديد من أجلك وسترى قسم XAML جديد تطبيقات WPF وستبدو محتوياته كالتالي

<Window x:Class="Window1"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="Window1" Height="300" Width="300">
	<Grid>

	</Grid>
</Window>

• انقر على Window1 لاختيارها وفي نافذة محرر XAML غير قيمة الخاصية Title إلى WPF Application فنلاحظ تغير نص عنوان النافذة إلى WPF Application كما يمكنك تجريب تغيير قيمة بعض الخصائص الأخرى

• قم بسحب TextBox من الـ ToolBox وضعه في الزاوية اليمينية العليا لنافذة التطبيق ثم انقر عليه لاختياره وفي نافذة الخصائص اضبط قيمة HorizontalAlignment إلى Left ثم قم بضبط الخاصية VerticalAlignment إلى Top والخاصية Width إلى 75 والخاصية Height إلى 26

• في محرر XAML قم بتغيير الخاصية Width إلى 140 والعنصر Margin إلى 30, 56, 0, 0 كما يبدو في المثال

<TextBox Height="26" HorizontalAlignment="Left" Margin="30,56,0,0" 
	Name="TextBox1" VerticalAlignment="Top" Width="140" />

• قم بسحب تحكم Button إلى سطح نافذة التطبيق وقم بالنقر المزدوج عليه لإنشاء إجراء معالجة الحدث Click الخاص به ثم اكتب الكود التالي في الإجراء

MsgBox("Event handler was created by double-clicking the button.")

• أضف تحكم Button آخر للنافذة وقم باختياره ثم قم بإضافة خاصية باسم Click للعنصر Button في محرر كود XAML واضبط قيمتها إلى ButtonOKClicked وهذا الاسم سوف تعطيه لإجراء معالجة الحدث في الكود مع ملاحظة أنه عندما تنشئ إجراء معالجة الحدث بالنقر المزدوج لا يتم إضافة الخاصية Click إلى كود XAML ولكن يستخدم في الكود عبارة Handles عوضا عن ذلك

• انقر بزر الفأرة اليميني على نافذة التصميم واختر ViewCode ثم قم بإضافة الإجراء التالي

Sub ButtonOKClicked(ByVal Sender As Object, _
	ByVal e As RoutedEventArgs)

	MsgBox("Event handler was created manually.")

End Sub

• اضغط F5 لتنفيذ المشروع واختباره