• 0
samerselo

كتابة تطبيقك الأول من النوع 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 لتنفيذ المشروع واختباره

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

3 إجابة على هذا السؤال .

  • 0

جزاك الله خير أخي المشرف محمد سامر ولكن مالفرق بينه وبين تطبيقات النوافذ هل هناك اختلاف كبير وماهي هذه اللغة ومافائدتها وشكرا

لأني في الحقيقة قرأت أكثر من مقال عنها ولكن إلى الان لم استوعب هدفها وشكرا

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

الاختلاف بشكل عام في الشكل وفي أنك أصبحت قادرا على استخدام لغة برمجة لتصميم واجهة التطبيق على كل حال هذا الموضوع الأول من سلسة مواضيع حول WPF إن وفقني الله عز وجل للمتابعة

بالنسبة للغة XAML فقد أوضحت الهدف منها في بداية المقال وطريقة كتابتها شبيهة جدا بكتابة XML أو HTML

حيث تستخدم هذه اللغة لإنشاء واجهة المستخدم
0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
  • 0

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

• أنشئ مشروعا جديدا من النوع WPF Application وسمه Ink Pad

• اضبط حجم نافذة التطبيق إلى 550 ارتفاعا و 370 عرضا وذلك بضبط قيم الخصائص Height و Width على التوالي

• غير عنوان نافذة WPF إلى Ink Pad وذلك بضبط الخاصية Title

• غير الخاصية Background لنافذة WPF إلى Brown كما يمكننا ضبط قيمة الخاصية في محرر XAML بإضافة الخاصية Background لكود النافذة فيصبح كود XAML للنافذة كما يلي

<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="550" Width="370" Background="Brown">
<Grid>

</Grid>
</Window>

• افتح صندوق الأدوات ToolBox ثم انقر عليه بزر الفأرة اليميني واختر Choose Items من القائمة ثم انتقل لصفحة WPF Components في صندوق حوار Choose ToolBox Items وانتقل عبر القائمة إلى InkCanvas وقم باختيارها – تأكد من وضع علامة في المربع – ثم اضغط OK

• اسحب InkCanvas من صندوق الأدوات ToolBox إلى سطح النافذة واضبط القيم التالية:

o الخاصية Width و الخاصية Height إلى Auto

o الخاصية HorizontalAlignment و الخاصية Vertical Alignment إلى Stretch

o الخاصية Margins إلى 9,9,9,68

o الخاصية Background إلى LightYellow وسترى أن لون الخلفية أصبح أصفر عندما تشغل البرنامج

• اسحب زرين من صندوق الأدوات إلى سطح النافذة أسفل Ink Canvas وضع Button1 إلى اليسار و Button2 إلى اليمين

• اختر Button1 واضبط كود XAML الخاص به إلى

<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24" 
Name="Button1" VerticalAlignment="Bottom" Width="75">Clear</Button>

• اختر Button2 واضبط كود XAML الخاص به إلى

<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24" 
Name="Button2" VerticalAlignment="Bottom" Width="75">Close</Button>

• وبهذا يصبح كود 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="550" Width="370" Background="Brown">
<Grid>
<InkCanvas Height="Auto" Margin="9,9,9,68" Name="InkCanvas1" VerticalAlignment="Stretch" Width="Auto" HorizontalAlignment="Stretch" Background="LightYellow" />

<Button Height="23" HorizontalAlignment="Left" Margin="85,0,0,24"
Name="Button1" VerticalAlignment="Bottom" Width="75">Clear</Button>

<Button Height="23" HorizontalAlignment="Right" Margin="0,0,72,24"
Name="Button2" VerticalAlignment="Bottom" Width="75">Close</Button>

</Grid>
</Window>

• انقر نقرا مزدوجا على الزر Clear ثم أضف الكود التالي في إجراء معالجة الحدث Click للزر

Me.InkCanvas1.Strokes.Clear()

• وبنفس الطريقة أضف الكود التالي في إجراء معالجة الحدث Click للزر Close

Me.Close

• شغل البرنامج واختبره

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه
زوار
This topic is now closed to further replies.

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .