تقييم الموضوع :
  • 4 أصوات - بمعدل 5
  • 1
  • 2
  • 3
  • 4
  • 5
[WPF حتى الاحتراف] {0} - نظرة عامة عن WPF
#1
بسم الله الرحمن الرحيم

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

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


--


نرحب بكم اخواننا الاعزاء في اول موضوع من مواضيع دورة [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- جميع التفاصيل التي ذكرت هنا سيتم شرحها في مواضيع منفصلة مع امثلة - لذلك لاتقلق .





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






انتهى
الرد }}}}
#2
و عليكم السلام و رحمة الله و بركاته,

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

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


السلام عليكم.
الرد }}}}
تم الشكر بواسطة: ali.alfoly
#3
(16-06-14, 09:42 AM)hoob computer كتب : و عليكم السلام و رحمة الله و بركاته,

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

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


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


عليكم السلام والرحمة ...


يسعدني مرورك ياغالي ، وبالفعل الدورة مخصصة للمبدأين او المتوسطين القادمين من Windows forms وتأخذ بيدهم حتى مستوى فاهم كل الاساسيات ويعرف كيف يبرمج

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


ان شاء الله تستفيد جميعا مع هذه التقنية الرائعة
الرد }}}}
تم الشكر بواسطة: ali.alfoly , hoob computer
#4
الحمد لله اني اول مبتداء قام بالرد علي هذا الموضوع الجميل
بالفعل استفدت
بساطة في الطرح ودقة في الكلمات هذا ما اعتدناه منك اخي محمد
متعوب عليه
جزاك الله خيرا
احلي تقيم
متابع معك حتي الاحتراف
الرد }}}}
تم الشكر بواسطة:
#5
السلام عليكم

شكرا لك على هذا الدرس الرائع وان شاء الله يكون بداية لسلسلة من الدروس في هذا المجال

يعطيك العافية
شـــايـفـــك

الرد }}}}
تم الشكر بواسطة:
#6
السلام عليكم ورحمة الله وبركاته

يسعدني الانضمام معك في دورة

اشكرك على درس الرائع استفدت منه بعض المعلومات المقدمة حول WPF

في انتظر باقي الدروس Heart
الرد }}}}
تم الشكر بواسطة:
#7
السلام عليكم

جزاك الله خيرا اخوي العزيز ان شاءالله نستفاد منك الكثير

موفق باذن الله يغالي

تحياتي لك
الرد }}}}
تم الشكر بواسطة:
#8
شاكر لكم مروركم اخواني الاعزاء

وان شاء الله مابقصر معاكم ..
الرد }}}}
تم الشكر بواسطة: hoob computer , أبو الحسن
#9
جزاكم الله خيرا
بانتظار المزيد من الابداع
الرد }}}}
تم الشكر بواسطة:
#10
وعليكم السلام ورحمة الله وبركاته

اشكرك أخي الشاكي لله ( لم تقل لنا اسمك ) على الشرح الرائع والواضح ، فعلاً شرحك كان واضح وسهل الإستيعاب.

يسرني الإنضمام للدورة.
قال رسول الله صلى الله عليه وسلم ( من قال لا إله إلا الله دخل الجنة ) حديث صحيح.
قال رسول الله صلى الله عليه وسلم ( كلمتان خفيفتان على اللسان ثقيلتان في الميزان حبيبتان للرحمن : سبحان الله وبحمده سبحان الله العظيم ) حديث صحيح.
الرد }}}}
تم الشكر بواسطة:


المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الاول) الشاكي لله 5 748 02-12-16, 11:07 PM
آخر رد: alsef
  [WPF حتى الاحتراف] {1} - إنشاء برنامجك الاول الشاكي لله 29 6,231 16-08-16, 11:09 AM
آخر رد: أبوبكر سويدان
  [WPF حتى الاحتراف] {4.3} - الـTemplate ومقدمة عن الـTrigger الشاكي لله 7 1,637 13-08-16, 07:01 PM
آخر رد: Anas gafer
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (3- الانميشن) الشاكي لله 16 682 02-06-16, 02:53 PM
آخر رد: CLARO
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (2- البرمحة) الشاكي لله 1 190 14-05-16, 11:54 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (1- التصميم) الشاكي لله 1 183 14-05-16, 11:27 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.3} - اداة الـ Grid الشاكي لله 14 2,715 31-03-16, 11:11 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.1} - الـ Layout الشاكي لله 13 2,898 17-03-16, 12:14 PM
آخر رد: mtalma
  [WPF حتى الاحتراف] {4.6} - الـ Data Template و الـ Sample Data الشاكي لله 12 2,348 14-02-16, 10:54 AM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الخامس) الشاكي لله 4 491 18-10-15, 11:46 PM
آخر رد: الشاكي لله

التنقل السريع :


يقوم بقرائة الموضوع: بالاضافة الى ( 1 ) ضيف كريم