بسم الله الرحمن الرحيم

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

والصلاة والسلام على اشرف الخلق محمد وعلى اله الطيبين الطاهرين


--

نرحب بكم اخواننا الاعزاء في اول موضوع من مواضيع دورة [WPF حتى الاحتراف]

وهي الدورة الاولى من نوعها التي ستتطرق لجميع مايخص WPF ان شاء الله

بدأ بالاساسيات والتعامل مع قواعد البيانات والانماط وغيرها من الامور التي ستكون مفهرسة في موضوع منفرد لاحقا

بالنسبة لنظام الشرح في هذه الدورة ، فأنا سأعتمد على نفس نظامي القديم في الشرح + في بعض الدروس ساقوم برسم WorkFlow ومخططات او SketchFlow للامثلة التي سيتم وضعها .

علما بان مرجع الدروس في هذه الدورة هو موقع wpftutorial وموقع MSDN .

نبدا معكم في اولى الدروس ، بسم الله ....

---

نظرة عامة

WPF هي تقنية رسومية من ابتكار شركة مايكروسوفت للبرمجيات ، حيث تعتبر هذه التقنية (الجيل الجديد) للواجهات الرسومية .

تم اصدار تقنية ال WPF في سنة 2006 في اصدار NET framework 3.0 وهي تعمل على الاصدار المذكور وعلى الاصدارات الاعلى .

لمزيد من المعلومات ، قم بزيارة الموضوع السابق

---

كيف تتكون الواجهات المصممة بواسطة WPF

إن الواجهات التي يتم تصميمها بواسطة WPF تجمع بين 2D graphics, 3D graphics, documents and multimedia .. حيث ان محرك تصميم الواجهات اي المسؤول عن عملية الRendering ، يعتمد بشكل كبير على Graphic cards . وقد تم استغلال ذلك للحصول على سرعة كبيرة في الاستجابة عند الواجهات ، الحصول على Layout وتحجيمات بالاضافة الى الحصول على واجهات مناسبة لجميع الشاشات .

صورة 1.1 - المميزات الرئيسية لتقنية الWPF

---

الفصل بين الواجهات وبين الاكواد

إن احدى اهداف تقنية WPF ، هي الفصل بين الاكواد البرمجية التي تكون إما بلغة السي شارب او الفيجوال بيسك ، وبين سلوك وتصميم الواجهة ، حيث لايتطلب ان تتدخل لغة البرمجة لإجراء Animation مثلا او عمل Style او Action ، فكل هذا يمكن القيام به دون تدخل لغة البرمجة .


لذلك السؤال الي يطرح نفسه كيف يكون ذلك ؟؟؟


للإجابة على هذا السؤال ، قامت مايكرسوفت بحل رائع جدا ، يشبه كثيرا عملية تصميم صفحات الويب ، قامت بابتكار لغة توصيف التي تسمى XAML وهي لغة مشتقة من XML

وهذه الغة بسيطة جدا وسيتم التعامل معها كثيرا في هذه الدورة ، ومع الدروس القادمة ستتقنها تلقائيا لسهولتها .

---

الدمج بين التركيبات والعناصر

في WPF يمكنك القيام بتضمين عناصر داخل عنصر ما ، وليكن ذلك العنصر عبارة عن Button :

كود الXAML المسؤول عن تكوين هذا الزر :-

PHP كود :

<Button>
    <StackPanel Orientation="Horizontal">
        <Image Source="speaker.png" Stretch="Uniform"/>
        <TextBlock Text="Play Sound" />
    </StackPanel>
</Button> 


الزر اعلاه يتكون من 3 عناصر :
العنصر الاول : Stackpanel - حاوية
العنصر الثاني : Image - صورة
العنصر الثالث : TextBlock - مشابه للLabel

في الاساس العنصر الثاني والثالث تم احتضانهما داخل العنصر الاول الذي هو عبارة عن Container .


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

PHP كود :

        <Button>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:PlaySoundAction Source="Vb4arb.wmv"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <StackPanel Orientation="Horizontal">
                <Image Source="speaker.png" Stretch="Uniform"/>
                <TextBlock Text="Play Sound" />
            </StackPanel>
        </Button> 


وتذكر كل هذا ببساطة ودون تدخل لغة البرمجة .

---

قوة التصميم والجمالية

كلنا يعرف شكل الbutton التقليدي القبيح ، لطالما حلمنا بانشاء اشكال اخرى لإدواتنا وللفورم بشكل عام ، سابقا مع Windows form كنا نستعمل Skin جاهزة ، حيث من الصعب جدا للمطور المبتدأ او المتوسط انشاء Skin لبرنامجه لأن ذلك يتطلب خبرة في الGDI ووقتا كثيرا حتى يخرج بالشكل المطلوب .

WPF قدمت لنا ميزتين رائعتين تمكنك من انشاء Skin للواجهة او للControl بكل سهوولة
كانك تشتغل مع الفوتوشوب ..

انهما Styling & Templates :

في الصورة اعلاه ، على اليسار يوجد الزر التقليدي القبيح
وعلى اليمين يوجد الزر نفسه بعد تطبيق عملية Styling له .


انظروا الى الجمالية الامحدودة ، الان يمكنك ان تحلم في واجهات معقدة امثال واجهة Norton :

بواسطة wpf يمكنك القيام بصنع هذا الشكل من الصفر في خلال ساعة واحدة وربما اقل بكل راحة وسهولة .


وكل هذا بواسطة ميزة Styling التي تندرج تحتها ميزة Tempting .

---

توافق الـResolution

احدى المشاكل التي كانت تواجهنا مع Windows forms والتي هي شائعة وتم طرح عدة استفسارات سابقة بخصوصها ، هي مشكلة اختلاف الدقة ( الـResolution ) بين الاجهزة ..

فالمبرمج المسكين عندما يقوم بتشغيل برنامجه على شاشة دقتها مختلفة عن الدقة التي صٌمم البرنامج عليها ، يلقى اختلاف في حجم الForm ..


مثال : مثلا لو صنعت برنامج على قياس شاشة 1024 × 768 وحاولت ان تشغله على قياس شاشة 800 × 600 فلن يظهر كامل البرنامج بل سيظهر نصفه او الجزء اليمين مأكول .. كما في الصورة :

كان الحل للبعض من المبرمجين هو استخدام دقة معينة (بالغالب 600) لتتوافق مع اكثر عدد ممكن من الشاشات ، او لجأ البعض الى تغيير دقة الشاشة بواسطة دوال API الا ان ذلك غير مستحسن ابدا .


--


لكن مع WPF منذ ان تم استخدام الDirectXكمحرك انتاج للواجهات ، تم حل هذه المشكلة ، فالبرنامج الذي يعمل بتقنية الWPF يحتوى على وحدات قياس منطقية اي ان الحسابات تكون بالمنطق وليست مبنية على مقارنات بالنظام الاحداثي (X,Y) ..

مما جعل الواجهات المصممة بهذه التقنية تعمل على كل الـResolution ، ولا تتاثر الواجهات ابدا وتظهر بحجمها الكامل .. حيث ان التقنية تتكفل باعادة تحجيم الفورم للحجم المناسب للشاشة وتحجيم كافة الElements ايضا .

---

ملاحظات :-

1- بدأ من الدروس القادمة سيتم اطلاق مصطلح Window بدل مصطلح Form
2- لاتقلق ان لم تفهم شيئ في هذا الدرس فدورتنا لازالت في البداية ولازال هناك الكثير
3- جميع التفاصيل التي ذكرت هنا سيتم شرحها في مواضيع منفصلة مع امثلة - لذلك لاتقلق .

تحياتي لكم والموضوع مفتوح للاستفسارات .....

انتهى

(16-06-14, 09:42 AM)hoob computer كتب : و عليكم السلام و رحمة الله و بركاته,

يسعدني أن أكون أول شخص يرد على هذا الدرس الرائع.
بالفعل درس ممتاز و يستفيد منه الكثير من المبتدئين ... عسى أن يكون بداية لكل مبتدأ يود الإنتقال إلى هذه التقنية الرائعة.

جزاك الله خيراً أخي محمد على ما تقدمه للمنتدى و اعضاءه. إلى الأمام .


السلام عليكم.