مدخل الي الـ WPF وتصميم برامج باحترافية تدعم 3D Objects

[COLOR="#696969"]

اعضاء منتدي Vb4arab الكرام :

اليوم اخواني سوف اتحدث عن تقنية تسمي بالـ WPF وهي اختصار لــ
Windows Presentation Foundation
وهي تقنية للغات الدوت نت
(VB.Net , C-Sharp)
فنحن جميعا نعلم ان هناك انواع من الـ Applications
وهي ما نختارها عند عمل مشروع جديد بالفيجوال او السي شارب
مثل :
Console Application
وهو خاص بالبرامج التي تعمل في بيئة الدوس
وايضا :
Windows Form Application
وهو ما نعرفة ونستخدمة جميعا
اي برنامج ذات واجهة رسومية
والسؤال هنا ما هو الـ WPF وفيما يختلف عن الـ
Windows Form Application
؟?؟?؟?؟?؟
الـ WPF اختلفت عن الـ Windows Form في انة تم فصل اكواد
التصميم اي الـ Design الخاص بالبرامج التي ستبنى بهذة التقنية عن
السي شارب و الفي بي دوت نت
وهنا يوجد سؤال اخر :
ما نعرفة في الويندوز فورم ابليكشن ان تصميم البرنامج يكون بأكواد السي شارب اذا
كان البرنامج مبني بالسي شارب او بالفي بي دوت نت اذا كان البرنامج مبني بالفي بي دوت نت
فبأي لغة يتم تصميم واجهات المستخدم في الـ WPF ؟؟؟
ببساطة تم عمل لغة جديد مشتقة من لغة الـ XML لتصميم الواجهات في الـ WPF
وهذة اللغة تسمي Xaml وتنطق zammel (زامل)
وهي اختصار لـــ
Extensible Application Markup Language
وبالتالي اصبحت التطبيقات مثل الـ ASP او الويب ابليكشن عامة
فالتصميم في الويب يكون بالـ HTML و CSS وغيرة
والبرمجة بالـ PHP او C# او VB.Net او اي لغة برمجة ويب عامة
وايضا اعطتنا هذة اللغة القدرة علي التصميم باحترافية فبهذة اللغة متاح لك
ان تفعل اي شئ يخطر علي بالك في تصميم برنامجك
فمثلا في الـ windows Form Application العادي
لا يمكنك ان تصمم زر (Button) بالشكل التالي :

فانظر الي الزر المقلوب علي يسارك
فبالـ WPF يمكنك التحكم الكامل بما تريد
وايضا هذا شكل اخر يوضح امكانية التحكم بالالوان في زر ايضا :

فيمكنك ادخال اكثر من لون علي البوتون او اي شئ اخر
وهذة امثلة للتوضيح فقط
واسف اني اطلت عليكم بالمقدمة عن هذة التقنية
والان ندخل في اساسيات ومبادئ الـ Xaml

كما قلت لكم ان الـ Xaml هي لغة
مشتقة من Xml
ومن لدية خلفية عن الـ Xml سيتعلم الـ Xaml سريعا .
كود الـ Xaml يتألف من مجموعة من العناصر elements
ويتألف كل منها من مؤثرات او تاجات فتح واغلاق
<Start Tag></Close Tag>
ويمكننا اضافة خصائص Attributes للعناصر
مما يتيح لنا تخصيص اكبر وامكانيات اكثر
وطبعا هناك عنصر يسمي العنصر الجذر او
Root Element
هذا العنصر الجذر هو الذي يحتوي علي باقي العناصر الاخري
فكما نعلم ان لغة Xml من مميزاتها هي الاحتواء
وهي احتواء عنصر داخل عنصر
وفي Xaml ايضا يوجد هذة الخاصية
وللتبسيط
انة اذا تم تعريف عنصر من النوع Panel
داخلة عنصر من النوع Button
فسنجد في البرنامج ان البوتون يوجد داخل البانل
اما لتوضيح ما هو العنصر وما هو الـ Attribute وغيرة :
هذة صورة للتوضيح :

وهذا كود Xaml لانشاء زر جديد
اولا :
الـ Element Start Tag هو Button>
ثانيا :
height و Margin و Name و Width
هم Attributes
خصائص الـ Button
واخيرا Element Close Tag
وهو خاص باغلاق التاج Button
اما الاخير هو Comments لكتابة التعليقات بين الاكواد
واعتقد الان اتضحت الفكرة

عند عمل مشروع WPF جديد
نجد ان ملف الـ Xaml يحتوي علي الكود التالي :

PHP كود :

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

اولا كما نلاحظ
ان هذا الملف يحتوي علي 2 Element
الاول : Window> وهو العنصر الجذر (Root Element)
والثاني : Grid>
ونلاحظ ايضا ان الـ Root Element
يحتوي علي بعض الخصائص (Attributes)
وهي :
Title
وهي عنوان النافذة
Height
وهي ارتفاع النافذة
Width
وهي عرض النافذة
ونجد هناك كودان هما :

PHP كود :

xmlns="http://schemas.microsoft.com/winfx/2...l/presentation"
3  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

وهما namespaces خاصة بالـ WPF
الاول هو مجال يتضمن كل ما يخص الـ WPF
والـ Controls
اي الادوات المستخدمة في التصميم
وهو مجال افتراضي في المستند
اما الثاني هو مجال خاص بالـ Xaml
يحتوي علي بعض عناصر الـ Xaml
ولتعريف اي عنصر ينتمي لهذا المجال يجب وضع اسمة اولا كالتالي :
x.Element
ونلاحظ ايضا في هذا الكود :

PHP كود :

<Window x:Class="WpfApplication1.Window1" 

وجود x:Class
وهي تعني :
إنشاء فئة جديدة اسمها Windows1 في المجال WpfApplication1 وتكون مشتقة من الفئة Window
لاحظ ان هذه الواصفة تبدأ بـ x ما يعني انها تنتمي إلى المجال الثاني الخاص بـ XAML
والان ننتقل لشئ جديد في Xaml
وهو :
بعض الـخصائص لا يمكن تعينها من خلال Attributes
لان قيمتها تمثل عدة كائنات يصعب تعريفها من خلال Attribute
لذالك هناك شئ جديد يسمي بالـ Property Element Syntax
وفيها نقوم بإضافة عنصر XML يمثل الخاصية ويكون اسمه على شكل <TypeName.Property> وينتهي بـ <TypeName.Property/> ، ويتم تحديد القيم المطلوبة داخل هذا العنصر وشكلة يكون كالتالي :

PHP كود :

<Button Height="30" Margin="157,96,0,0" Name="button1" Width="89" Foreground="#FF01FF01">
            <Button.Background>
                <SolidColorBrush Color="Black"/>
            </Button.Background>
        </Button><!--Comment--> 

كما واضح من الكود ان Property Element Syntax تسمي
<Button.Background>
وذالك لتعيين لون الزر
ويمكن عمل ذالك بالـ Attribute
كالتالي :

PHP كود :

<Button Height="30" Margin="157,96,0,0" Name="button1" Width="89" Foreground="#FF01FF01" Background="#FFD1AE63" BorderBrush="#FFFF1010" FontStretch="ExtraCondensed" IsCancel="True" IsDefault="True"></Button> 

ولكن كما قلت لكم سابقا ان الـ Wpf تعطي لك كامل الحرية في عمل ما تريد
وكما وضحت لكم بصورة سابقا ان الزر يمكن ان يحتوي علي لونين
فهل يمكن كتابة الـ Background Attribute
مرتين ؟؟
لأ طبعا سيظهر خطأ
في هذة الحالة سنحتاج ان نستخدم
Property Element Syntax
واستخدام LinearGradientBrush
وهي خاصة باللون المتدرج
كالتالي :

PHP كود :

<Button.Background>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="#710000BC" Offset="1" />
                    <GradientStop Color="Black" Offset="0" />
                </LinearGradientBrush>
            </Button.Background> 

واعتقد ايضا الان استوعبتم الـ Property Element Syntax
وهذة مقدمة بسيطة عن اهم مبادئ لغة الـ Xaml
ولن اشرح شئ اخر بها
لان اكواد الـ Xaml يقوم الفيجوال بعمل generate
لها عند وضع خاصية
فمثلا عند تغير خاصية الـ Background
للـ Button
من خلال شاشة الـ Properties في الفيجوال ستوديو
يتم عمل generate لكود الـ Xaml بدون تدخل منك
ولكن هذا لا يعني انك لن تحتاج لها في كل برنامج تقوم بصنعة بالـ WPF

والان انتهينا من الـ Xaml ..
ندخل علي الجبار
Epression Blend

وطريقك لاحتراف الـ Application Design والـ WPF

جميعنا يعرف او سمع عن الـ Expression Studio
من انتاج Microsoft
وهو ستوديو يجمع 4 برامج وهما :
اولا : Expression Web
بديل الفرونت بيج ومنافس الـ Dream Weaver
ثانيا : Expression Design
وهو خاص بالتصميمات
اي لتصميم صور او اي design ستضعة في موقعك عن
طريق الـ Expression Web
او تصميم اي شئ ستضعة في برنامجك
ثالثا : Expression Blend + SketchFlow
وهذا ما يهمنا
وهو خاص بتصميم واجهات المستخدم لبرامج الـ WPF
والـ Silverlight حيث انة يسهل عليك التصميم لابعد الحدود
والابتعاد عن كتابة اكواد الـ Xaml حيث انة يكتبها هو بدون تدخل منك
وبة امكانيات لا حدود لها سنتطرق لاهمها حاليا
رابعا : Expression Encoder
وهو خاص بالـ Silverlight
لعمل Players لفيديوهات السيلفر لايت المستخدمة في الويب

والان تعرفنا علي الـ Expression Studio .
لتحميلة من microsoft :

والان لنتعرف اكثر علي الـ Expression Blend :
عند فتح الـ Blend ونختار New Project تظهر لنا هذة الصورة :

نختار مثل ما هو واضح بالصورة WPF Application ونضغط ok .

وباقي الشرح بالفيديو ...
شاهد الفيديو سيعجبك كثيرا
واسف حجم الفيديو كبير شوية 32 MB
بس مش كبير علي الـ WPF
التحميل :

اتمني اكون افدتكم بشئ جديد اليوم
واي استفسار انا جاهز
والسلام عليكم ورحمة الله وبركاتة[/COLOR]