الدرس الخامس والخمسون : مقدمة إلى Wpf - دورة .net 2008

[khaledbelal]

بسم الله الرحمن الرحيم .
السلام عليكم ورحمة الله وبركاته .

WPF :

Windows Presentation Foundation أو ما يعرف اختصاراً باسم WPF هي تقنية رسومية جديدة من مايكروسوفت بدأت مع .net framework 3.0 تعتمد على ما يعرف باسم Extensible Application Markup ******** واختصاراً باسم XAML ، وهي تعتبر الجيل الجديد من تقنيات مايكروسوفت في الواجهات المرئية بعد Windows Forms و GDI+ و DirectX APIs و Windows Media Player API's للواجهات والرسومات ثنائية وثلاثية الأبعاد والفيديو على الترتيب .

أما مع WPF فقد اصبح بامكانك التحكم بجميع هذه النقاط ابتداء من تصميم الواجهات وانتهاء بالتصميم الثلاثي الأبعاد والفيديو من خلالها .

XAML :
تهدف XAML إلى الفصل بين الكود والتصميم بصورة كاملة مثلما كان يحدث في صفحات ASP.net ، حيث تعد XAML شبيهة ب HTML الذي تستخدمه لتصميم صفحاتك - مع الفارق - حيث أن ال XAML أقرب إلى نظام لغات البرمجة حيث يحتوي على فئات وخصائص ... الخ .

Microsoft Expression
سابقاً ، كان التصميم عبارة عن مجموعة من عمليات الرسوميات ، يتم تعريفها بطريقة ما في الفيجوال ستوديو ، في حين تظل مجرد صور في برنامج لتحرير الصور مثل photoshop وبطريقة أخرى في برنامج مثل Adobe Flash .. تخيل الآن ان لديك برنامج متخصص في الرسوميات ينتج الرسومات بصورة يمكن فهمها في بيئة التطوير الخاصة بك ؟

كانت هذه هي فكرة Expression ، حيث تعتبر برامج متخصصة في التصميم الثابت والمتحرك وخلافه ، ولكن الناتج يمكن أن يكون على شكل XAML يمكن استخدامه في تطبيقاتك المختلفة بسهولة .

هناك عدة اصدارات من هذه البرامج منها المخصص للويب ومنها الرسومي الشبيه بالفوتوشوب او الشبيه بالفلاش . لكننا نتوسع في شرح هذا البرنامج ، ولكن ضع هذا البرنامج في اعتبارك طيلة فترة عملنا على ال WPF حيث يمكن انتاج XAML الذي نستخدمه من خلاله ، يمكنك تحميل نسخة من هنا :
http://www.microsoft.com/expression/...aspx?key=blend

كانت هذه مقدمة سريعة جداً ، سنعود لنبدء عالم ال WPF من البداية .

أنواع تطبيقات WPF :

تطبيق WPF ليس مجرد تطبيق تقليدي فقط ، بل يمكن ان يظهر على أكثر من شكل ، سنحاول التعرف على هذه الأشكال الآن .

1- Traditional Desktop Applications :
النوع الأكثر شيوعاً ، تطبيق تقليدي exe ، ال WPF مجرد طريقة لتحسين المظهر والواجهات وخلافه .

2- Navigation-****d :
يمكنك من خلال WPF اختيار تطبيقك ليكون تطبيق عادي ولكن لديه خصائص المتصفح لديك Forward و Backward حيث يمكن للمستخدم التنقل بين صفحات تحددها أنت في pages ، لا جديد في كونها تطبيق عادي سوى مبدئ التصفح .

3- XBAP Applications :
ميزة جديدة من مميزات WPF لبناء تطبيق يعمل من خلال المتصفح ، شبيه جداً بمبدأ ال **** Applet ، حيث يتم الوصول إليه من خلال عنوان URL ، يقوم بتحميل XBAP application في ال local machine ويقوم بتشغيلها .

4- Silverlight Applications:
من خلال WPF ايضاً يمكنك بناء تطبيقات يتم استضافتها من خلال المتصفح مباشرة ، شديدة الشبه ب embeded flash الموجود في صفحات الإنترنت المختلفة ، يتمتع ال Silverlight بامكانيات غنية في المظهر والتنفيذ على حد سواء .

محتويات الفئة WPF :

System.Windows : العناصر الأساسية لل WPF .
System.Windows.Controls : تحتوي على مجموعة من العناصر اللازمة لبناء تطبيقك مثل القوائم وال Tool Tips وخلافه .
System.Windows.Markup : الفئات الخاصة بفهم وتنفيذ صيغ XAML .
System.Windows.Media : الفئات الخاصة بالتعامل مع الفيديو والصور المتحركة والتصاميم 3D .
System.Windows.Navigation: الفئات الخاصة بالتعامل مع النوع Navigation-****d من التطبيقات الذي وضحناه سابقاً .
System.Windows.Shapes : مجموعة من الأدوات لعمليات التصاميم 2D .

تطبيقك الأول في عالم WPF .

يمكننا بناء تطبيقات WPF بدون الاعتماد على XAML ، ولكننا سنتجاوز هذه المرحلة لنتعلم مباشرة كيفية بناء تطبيقات WPF باستخدام XAML .
لو كنت قد جربت سابقاً التعامل مع HTML فأنت ستكون قد اجتزت نصف المرحلة ، ولمن هذه هي المرة الأولى بالنسبة لهم فقد كانت ال HTML تعتمد على Tags بالشكل التالي مثلاً :

<a href="Ahmed.html">Ahmed</a>

الكود السابق يعني رابط Link يشير إلى الصفحة Ahmed.html في حين ان النص المعروض للمستخدم هو Ahmed .
هناك طريقة أخرى لاكواد ال HTML بالشكل التالي مثلاً :

<img src="ahmed.jpg" alt="ahmed picture" border="0" />

هذا الكود يعني صورة لديها ToolTip وليس لها حدود ، لو لاحظت فليس لها Tag نهاية .

لو كنت ترغب بمعرفة المزيد عن HTML يمكنك البدء من هنا :
http://www.html4arab.com/
ستكون معلومات سريعة + لن تأخذ اكثر من ساعتين في تعلمه + سيكون مفيداً جداً لك في تطوير المواقع + حتى مع استخدام ادوات مثل DreamWaver أو الفيجوال ستوديو في تطبيقاتك فمن المفضل التعرف عليها - شخصياً استخدم لبناء مواقعي ال Notepad في الغالب - .


المهم ، هذا هو كل ما لدينا في عالم XAML ، بنفس الطريقة سيتم توصيف الأدوات الخاصة بنا ، فهذا زر أمر مثلاً :

<Button Height="80" Width="100">
ClickMe
</Button>

وهذا النوع الآخر :

<Button Height="80" Width="100" *******="ClickMe"/>

يمكن ان يكون لدينا زر أمر يحتوي بداخلة على عناصر أخرى ، هذا مثال :

كود PHP:


<Button Height = "80" Width = "100">
<Button.*******>
<ScrollBar Width = "75" Height = "40"/>
</Button.*******>
</Button> 


لكن المثال التالي خاطئ نظراً لإن ال Scroll ليست مشتقة من الفئة *******Control!

كود PHP:

<ScrollBar Height = "80" Width = "100">
<Button Width = "75" Height = "40"/>
</ScrollBar > 


الآن هذه مقدمة مناسبة عن هذا العالم ، نبدأ في التطبيق في الدرس التالي ....

الآن افتح Visual Studio ، قم باختيار انشاء New Project ، قم باختيار WPF Application بالشكل التالي :



قم بوضع زر أمر ومربع نص ، ثم لاحظ شاشة ال XAML ، بالتحديد قم بالتركيز على الجزء التالي :



ستجد انه كما ذكرنا بالفعل ،قام بعمل انشاء كود XAML لكافة عناصر الفورم ووضعها داخل العنصر Window ثم Grid ، ايضاً تجد بعض العناصر الاضافية في حالة التصميم ، الآن اصبح بامكانك كتابة كود XAML او الاعتماد على التصميم كما تفعل مع تطبيقات الويب - إن كنت مبرمج ويب - .

سنحاول الآن التعديل في خصائص Window لتغيير عنوان الفورم ، قم بمسح الخاصية Title ، ثم اذهب إلى نهاية الوسم وابدأ بكتابة مسافة ومن ثم نقوم باختيار Title ومن ثم نكتب ="WPF Example" بالشكل التالي مثلاً :



سيكون الكود الاجمالي XAML بالشكل التالي :

<Window x:Class="WpfApplication2.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="300" Width="300" Title="WPF Example">
    <Grid>
        <Button Height="23" Margin="99,0,105,91" Name="button1" VerticalAlignment="Bottom" Click="button1_Click">Button</Button>
        <TextBox Height="23" Margin="77,80,81,0" Name="textBox1" VerticalAlignment="Top" />
    </Grid>
</Window>

لاحظ ان بامكانك التحكم في جميع الخصائص لكل الأدوات بنفس الطريقة .
الآن جرب كتابة أمر بالضغط على زر الأمر مرتين ، ستجد نافذة مستقلة للكود غير تلك التي للتصميم ، اكتب فيها الأمر التالي مثلاً :
C#:

كود PHP:

private void button1_Click(object sender, RoutedEventArgs e)
        {
            textBox1.Text = "Welcome WPF";
        } 


vb.net:

كود PHP:

Private Sub button1_Click(ByVal sender As Object, ByVal e As RoutedEventArgs) 
    textBox1.Text = "Welcome WPF" 
End Sub 


والناتج :



ايضاً يمكنك كتابة الكود في نفس شاشة التصميم بالشكل التالي :

<x:Code>
        <![CDATA[
        void CodeExample(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("ahmed");
        }
                
    ]]>
    </x:Code>

مع جعل اسم الدالة على الاسم الذي اخترته في الحدث Click لزر الأمر بالشكل التالي مثلاً :

<Button Height="23" Margin="99,0,105,91" Name="button1" VerticalAlignment="Bottom" Click="CodeExample">Button</Button>

ونفس النظام بالنسبة ل VB.net .
ايضاً أثناء كتابتك للحدث Click يمكنك من خلال Visual Studio انشاء حدث جديد مباشرة ...

خاتمة الجزء الأول - نقاط سريعة - :

- لو كنت تبحث عن معرفة ال Syntax الخاص ب XAML بتوسع يمكنك البدء من هنا :
http://msdn.microsoft.com/en-us/library/ms788723.aspx


- لاعتماد أحداث ال Form_Load وخلافه يمكنك اضافتها ل Window بالشكل التالي مثلاً :

Loaded="Window_Loaded" Closed="Window_Closed"

ونفس الأمر مع جميع أحداث وخصائص كل الأدوات .

- لو استمررت بهذه الطريقة مع WPF فأنت تعطي لنفسك المزيد من التحكم بالمظهر ، لكن لو كنت تريد جمال الواجهات وخلافه فيمكنك البدء مع Microsoft Expression Blend من ضمن مجموعة Microsoft Expression ، هذه صورة للواجهة الرئيسية مثلاً :





ناتج تصميمك سيكون XAML يمكنك وضعه في ال Visual Studio مباشرة .

- لتجربة مثال خطوة بخطوة على هذه العملية راجع الرابط التالي :
http://www.codeproject.com/KB/WPF/DotNet_XAML.aspx

ربما أعود هنا لأشرح الخطوات بواحدة بواحدة ، ولكن ليس الآن .

إلى هنا نكون قد انتهينا من محتويات المجموعة الأولى ، في المجموعة القادمة من الدروس سنتعرف على WPF Controls .

والله الموفق ...
والسلام عليكم ورحمة الله وبركاته .