شرح ومناقشة تقنية wpf - RaggiTech - 21-10-12
كاتب الموضوع : المخلب الجارح
Windows Presentation Foundation (WPF) Overview
السلام عليكم ورحمة الله
سنناقش في هذا الموضوع تقنية WPF ومزاياها وكيفية البرمجة باستخدم اكواد XAML
احد شروط المشاركة في النقاش هو ان يكون لدى الشخص فكرة عن الموضوع وحسب معرفتي بهذة التقنية
اظنها ما زالت غريبة ويكسوها الغموض بالنسبة لاكثرية المبرمجين العرب ولا تكاد تجد مرجع واحد باللغة العربية يشرحها
بل لن تجد بين مواقع الانترنت العربية من يبعد ذلك الغموض عن هذة التقنية فرئيت ان واجبي العلمي ان ابعد ذلك الغموض
واكون نقطه البداية لمن يريد تعلم هذة التقنية وتهتم هذة التقنية بجانب Design ويعتبر احد اهم اسباب نجاح النظام من فشله
ولقد قمت باعداد هذة المقدمة البسيطة كي يتم النقاش بمعرفة جيدة لما يتم النقاش عنه كي نحصد اكبر فائدة مرجوة من الموضوع
وكي يشارك ويستفيد من النقاش اكبر عدد من الاعضاء وبعد قرئة المقدمة اجبني عن هذة الاسئلة وناقشني فيما لفة الغموض فيما قرئتة
1- لماذا لايوجد الكثير من المواضيع عن هذة التقنية باللغة العربية حتى الان ؟
2- هل تعرفت الى مميزات هذة التقنية مقارنة مع WinForm من الافضل بنظرك ولماذا ؟
3- ماهو الذي مازلت تبحث عنة في تصميم واجهات العرض ولم تجدة بهذة التقنية ؟
4- هل تعتقد ان لواجهات العرض تاثير في بيع النظم ام انها شئ ثانوي ؟
5- ماهو الذي ينقصك حتى الان للبدء في تعلم هذة التقنية ؟
مقدمة الى WPF
Windows Presentation Foundation (WPF) وهي أعظم خطوة في تطوير واجهات المستخدم
قامت بها Microsoft وتعتبر الجيل ألرسومي الجديد لنظم العرض على كلتي منصات العمل
Windows- web-based applications
وتقنيته WPF الرسومية تعتمد على DirectX أي أنها اخف وأسرع للترجمة من GDI/GDI+
اذا أصبحت واجهات المستخدم تمتلك كل الإمكانيات المتاحة على اجهزة العرض (video cards)
وتمثل WPF اتحاد بين الشكل والوظيفة ومنافس قوي ل Flash , HTML وتوفر الحريه التامة
والسهولة في التصميم وتتطلب وجود (Framework 3.0) أو اعلي منه.
WPF Features :
3.0
Extensible Application Markup Language (XAML), controls, data binding, layout, 2-D and 3-D graphics, animation, styles, templates, documents, media, text, and typography,
3.5
Firefox support for XBAPs, Data binding support for LINQ, Data binding support for IDataErrorInfo, Support for placing interactive controls (such as buttons) inside a RichTextBox control. Support for placing 2-D elements on 3-D surfaces, An add-in model.
أدوات تطويرWPF :
XAML.
Microsoft Expression Blend.
يمكنك تحميله من هنا
Visual Studio 2005-2008-2010 (C#,VB) .
وتوجد الكثير غيرها من ادوات تطوير WPF
XAML :
Extensible Application Markup Language (XAML) وهي لغة فرعية من XML وليست لغة برمجية بحد
ذاتها وإنما هي لغة وصفية ظهرت مع Framework 3.0 .وتفسر تعليماتها بشكل لحظي CLR و باستخدام تعليماتها نقوم بالإعلان وإنشاء وترتيب وتنظيم الأدوات.
كافة تعليماتXAML يمكن الاستعاضة عنها بكود C#, VB ولكن استخدام XAML يسهل العمل على الواجهات بشكل كبير و لمقارنة كيفية كتابة كود XAML وكود أخر بال C# أو VB مثلا
كود :
[i][color=#000080]<!-- XAML version -->[/color][/i]
[color=#000080]<MyObject SomeProperty='1' />[/color]
// C# version
MyObject obj = new MyObject();
obj.SomeProperty = 1;
' VB version
Dim obj As New MyObject()
obj.SomeProperty = 1
اما بالنسبة لكيفية تضمين namespaces مع XAML فسيوضح الامر هذا المثال التوضحي
كود :
[i][color=#000080]<!-- XAML version -->[/color][/i]
[COLOR=#000080]<MyObject
xmlns='clr-namespace:Samples;assembly=samples.dll'
SomeProperty='1' />[/COLOR]
// C# version
csc /r:samples.dll test.cs
using Samples;
MyObject obj = new MyObject();
obj.SomeProperty = 1;
Hello World WPF :
قم بإنشاء ملف TXT وذلك بفتح برنامج notepad ثم قم بكتابه هذا الكود
كود :
[color=#000000][COLOR=#0000bb] [/color][color=#007700]<[/color][COLOR=#0000bb]Page
xmlns[/COLOR][color=#007700]=[/color][COLOR=#dd0000]'http://schemas.microsoft.com/winfx/2006/xaml/presentation'
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]'Hello World!'[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Height[/color][color=#007700]=[/color][color=#dd0000]"80" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"200"[/color][color=#007700]>[/color][color=#0000bb]Hello World[/color][color=#007700]!</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Page[/color][COLOR=#007700]>
[/COLOR][color=#0000bb][/color][/COLOR]
ألان قم بحفظ الملف بصيغة XAML وبعد الحفظ قم بالضغط دبل كليك على الملف لفتحة سيتم فتحة بواسطة IE
قام هذا الكود بإنشاء صفحة Child الأساسي بها (Body in HTML-Content in XAML) عبارة عن Button
شرح الكود :
الكود مكون من عدة تعليمات خاصة بلغة XAML كل تعليمة لها وسم بداية و نهاية
التعليمة Page : قامت بإنشاء الصفحة وقمنا بإغلاق التعليمة في أخر الكود بهذا الوسم
كود :
[color=#000000][COLOR=#0000bb] [/color][color=#007700]</[/color][color=#0000bb]Page[/color][COLOR=#007700]>
[/COLOR][color=#0000bb][/color][/COLOR]
التعليمة xmlns : قامت بتضمين namespaces المراد استخدام مكتباتها ضمن الأداة أو النافذة والصفحة وهي خاصية موجودة مع كافة الأدوات لفهم كيفية استخدامها مع الادوات قم بإعادة كتابة الكود السابق بهذا
كود :
[color=#000000][COLOR=#0000bb] [/color][color=#007700]<[/color][color=#0000bb]Button xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"80" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"200" [/color][color=#007700]>[/color][color=#0000bb]Hello World[/color][color=#007700]!</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
[/COLOR][color=#0000bb][/color][/COLOR]
وهذا الرابط
كود :
[color=#000000][COLOR=#0000bb] http[/color][color=#007700]:[/color][COLOR=#ff8000]//schemas.microsoft.com/winfx/2006/xaml/presentation
[/COLOR][color=#0000bb][/color][/COLOR]
الذي يمثل قيمة الخاصية xmlns
انما هو عبارة عن namespace الأساسي لإنشاء كافة الادوات التابعة WPF والمكتبة التي يمثلها الرابط السابق هي
PresentationCore.dll كما يمكن تضمين namespace بطريقة اخرى نوضح فيها اسم مكتبة DLL واسم namespace المراد التعامل معه كهذا
كود :
xmlns='clr-namespace:Samples;assembly=samples.dll'
التعليمة Button : قامت بإنشاء زرContent الخاص به عبارة عن نص و وسم اغلاق التعليمة </Button> كما يمكننا ان نكتب الكود بصور أخري وهي
كود :
[color=#000000][COLOR=#0000bb] [/color][color=#007700]<[/color][color=#0000bb]Button Height[/color][color=#007700]=[/color][color=#dd0000]"80" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"200" [/color][color=#0000bb]Content[/color][color=#007700]=[/color][color=#dd0000]"Hello World!" [/color][COLOR=#007700]/>
[/COLOR][color=#0000bb][/color][/COLOR]
حيث ان الخاصية Content تستخدم لتحديد مكونات العنصر (Body) ويمكن إن تحتوى على أي عنصر او عناصر اخرى فيمكن ان تكون نص او مجموعه من الأدوات مجتمعة معا ولكن ضمن Panel مثلا
كود :
[color=#000000][COLOR=#0000bb] [/color][color=#007700]<[/color][color=#0000bb]Button Height[/color][color=#007700]=[/color][color=#dd0000]"80" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"200" [/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Label Content[/color][color=#007700]=[/color][color=#dd0000]"Hello World!"[/color][COLOR=#007700]/>
<[/COLOR][color=#0000bb]Label Content[/color][color=#007700]=[/color][color=#dd0000]"Hello World!"[/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Button[/color][COLOR=#007700]>
[/COLOR][color=#0000bb][/color][/COLOR]
WPF Application :
هنالك نوعان من Application ضمن WPF
1- standalone applications
المشاريع المستقلة التى يتم استخدامها ضمن جهاز واحد ونستخدم معها الكائن Window
2- Browser applications
وهي المشاريع التى يتم استخدامها ضمن شبكة كالانترنت مثلا ونستخدم معها الكائن Page , NavigationWindow
والان قم بانشاء مشروع جديد باستخدام VS 2008 وقم باختيار WPF Application
بعد انشاء المشروع سيظهر ملفان بنافذة Solution Explorer بصيغة XAML
لكل ملف صفحة كود خاصة به بالإضافة إلى كود XAML
1- Application.xaml وهو الملف الخاص بالمشروع حيث يمكننا من خلاله تحديد الملفات والخدمات الإضافية
كما يمكننا تحديد Resource و Properties المراد مشاركتها بين كافة أعضاء المشروع أيضا يمكننا تحديد نافذة او صفحة البداية إلى جانب العديد من المهام والوظائف
2- Window1.xaml وهي نافذة البداية التى يتم إنشائها تلقائيا مع امكانية اضافة المزيد من النوافذ والصفحات حسب
متطلبات المشروع طبعا
يتم انشاء كود XAML تلقائي مماثل لهذا ضمن محرر XAML التابع Application.xaml
كود :
[color=#000000][COLOR=#0000bb] [/color][color=#007700]<[/color][color=#0000bb]Application x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Application"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]StartupUri[/color][color=#007700]=[/color][color=#dd0000]"Window1.xaml"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Application[/color][color=#007700].[/color][color=#0000bb]Resources[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Application[/color][color=#007700].[/color][color=#0000bb]Resources[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Application[/color][COLOR=#007700]>
[/COLOR][color=#0000bb][/color][/COLOR]
التعليمة x:Class تحدد اسم Class المرتبط بتعليمات XAML
التعليمة StartupUri تحدد اسم النافذة او الصفحة التى ستكون صفحة او نافذة البداية
ايضا يتم انشاء كود XAML تلقائي مماثل لهذا ضمن محرر XAML التابع Window1.xaml
كود :
[color=#000000][COLOR=#0000bb] [/color][color=#007700]<[/color][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"300"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Grid[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Grid[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][color=#0000bb][/color][/COLOR]
Grid هي احد انواع Penal الموجودة ضمن ادوات WPF و من انواع Penal
StackPanel, DockPanel, WrapPanel وغيرها ولكل نوع مميزاته الخاصه
ملاحظة : من الضروري احتواء Window او Page على أي نوع منPenal لتمثل Childالاساسي ثم وضع الادوات الباقية عليها لان خاصية Content التى تحدد مكونات أي كائن تاخذ قيمة واحدة فقط فمثلا لو كتبا كود بهذا الشكل
كود :
[color=#000000][COLOR=#0000bb] [/color][color=#007700]<[/color][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button[/color][color=#007700]>[/color][color=#0000bb]vb4arab[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBox[/color][color=#007700]>[/color][color=#0000bb]An editable text box[/color][color=#007700]</[/color][color=#0000bb]TextBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]CheckBox[/color][color=#007700]>[/color][color=#0000bb]A check box[/color][color=#007700]</[/color][color=#0000bb]CheckBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Grid[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBlock Text[/color][color=#007700]=[/color][color=#dd0000]"I'm a TextBlock you can't change me" [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]Grid[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][color=#0000bb][/color][/COLOR]
الكود السابق صحيح لكن لو كتبناه بهذا الشكل
كود :
[color=#000000][COLOR=#0000bb] [/color][color=#007700]<[/color][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][COLOR=#007700]>
<!-- [/COLOR][color=#0000bb]يجب تضمين كافة الادوات ضمن نوع من انواع البنل [/color][COLOR=#007700]-->
<[/COLOR][color=#0000bb]Button[/color][color=#007700]>[/color][color=#0000bb]vb4arab[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBox[/color][color=#007700]>[/color][color=#0000bb]An editable text box[/color][color=#007700]</[/color][color=#0000bb]TextBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]CheckBox[/color][color=#007700]>[/color][color=#0000bb]A check box[/color][color=#007700]</[/color][color=#0000bb]CheckBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Grid[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBlock Text[/color][color=#007700]=[/color][color=#dd0000]"I'm a TextBlock you can't change me" [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]Grid[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][color=#0000bb][/color][/COLOR]
الكود السابق خاطئ ولقد تم ذكر السبب
وباستخدام الخاصية Content لاي اداة يمكننا عمل سلسله غير منتهية من الادوات المتداخلة قم بتجربه هذا الكود
كود :
[color=#000000][COLOR=#0000bb] [/color][color=#007700]<[/color][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"600" [/color][color=#0000bb]Name[/color][color=#007700]=[/color][color=#dd0000]"Window1"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Grid[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]ComboBox Height[/color][color=#007700]=[/color][color=#dd0000]"150" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"500"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]ComboBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button[/color][color=#007700]>[/color][color=#0000bb]vb4arab[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Content[/color][color=#007700]=[/color][color=#dd0000]"المخلب الجارح"[/color][COLOR=#007700]/>
<[/COLOR][color=#0000bb]TextBox[/color][color=#007700]>[/color][color=#0000bb]An editable text box[/color][color=#007700]</[/color][color=#0000bb]TextBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]CheckBox[/color][color=#007700]>[/color][color=#0000bb]A check box[/color][color=#007700]</[/color][color=#0000bb]CheckBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBlock TextWrapping[/color][color=#007700]=[/color][color=#dd0000]"Wrap" [/color][color=#0000bb]Text[/color][color=#007700]=[/color][color=#dd0000]"I'm a TextBlock you can't change me" [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]ComboBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button[/color][color=#007700]>[/color][color=#0000bb]vb4arab[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Content[/color][color=#007700]=[/color][color=#dd0000]"المخلب الجارح"[/color][COLOR=#007700]/>
<[/COLOR][color=#0000bb]TextBox[/color][color=#007700]>[/color][color=#0000bb]An editable text box[/color][color=#007700]</[/color][color=#0000bb]TextBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]CheckBox[/color][color=#007700]>[/color][color=#0000bb]A check box[/color][color=#007700]</[/color][color=#0000bb]CheckBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBlock TextWrapping[/color][color=#007700]=[/color][color=#dd0000]"Wrap" [/color][color=#0000bb]Text[/color][color=#007700]=[/color][color=#dd0000]"I'm a TextBlock you can't change me" [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]ComboBox[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Grid[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][color=#0000bb][/color][/COLOR]
كيفية اضافة Event :
والان سوف نقوم بانشاء Button يمتلك حدث والامر في غاية البساطة بعد اضافة Button الى نافذة البداية وقد تعلمنا
كيفية اضافة Button مسبقا نقوم بالضغط علية دبل كليك حندخل بداخل حدث الضغط كما يمكن اضافة الحدث من داخل نافذة تحرير الكود ولكن علينا ان نعلم ان الادوات لن تظهر ضمن قائمة Class Nameالموجود بنافذة تحرير الكود الا بعد إضافة أسماء لها بواسطة الخاصية Name
كود :
[color=#000000][COLOR=#0000bb] [/color][color=#007700]<[/color][color=#0000bb]Button Name[/color][color=#007700]=[/color][color=#dd0000]"btnhi" [/color][color=#0000bb]Content[/color][color=#007700]=[/color][color=#dd0000]"HI" [/color][COLOR=#007700]/>
[/COLOR][color=#0000bb][/color][/COLOR]
ايضا يمكننا اضافة حدث الضغط من نافذة تحرير XAML بالانتقال الى وسم Button واختيار الحدث Click فيظهر خيار New Event Handler نقوم بالضغط علية فيتم انشاء الحدث ضمن Class المرتبط بصفحة تعليمات XAML
Built-in WPF controls :
Buttons : Button , RepeatButton
Digital Ink : InkCanvas , InkPresenter
Documents : DocumentViewer , FlowDocumentPageViewer , FlowDocumentReader , FlowDocumentScrollViewer , StickyNoteControl
Input : TextBox , RichTextBox PasswordBox
Layout : Border , BulletDecorator , DockPanel , Canvas , Expander , Grid , GridView , GridSplitter , GroupBox , Panel , ResizeGrip ,Separator , ScrollBar ,ScrollViewer , StackPanel , Thumb , Viewbox , VirtualizingStackPanel , Window , WrapPanel
Media : Image , MediaElement , SoundPlayerAction
Menus : ContextMenu , Menu , ToolBar
Navigation : Frame , Hyperlink , Page , NavigationWindow , TabControl
Selection : CheckBox , ComboBox , ListBox , TreeView , RadioButton , Slider
User Information : AccessText , Label , Popup , ProgressBar , StatusBar , TextBlock , ToolTip
شرح ومناقشة تقنية wpf - RaggiTech - 21-10-12
كاتب المشاركة : المخلب الجارح
Layout :
DockPanel : ترتب الادوات على حواف Penal
مثال :
كود :
[color=#000000][COLOR=#007700]<[/color][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"300"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]DockPanel LastChildFill[/color][color=#007700]=[/color][color=#dd0000]"True"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBox DockPanel[/color][color=#007700].[/color][color=#0000bb]Dock[/color][color=#007700]=[/color][color=#dd0000]"Top"[/color][color=#007700]>[/color][color=#0000bb]Dock [/color][color=#007700]= [/color][color=#dd0000]"Top"[/color][color=#007700]</[/color][color=#0000bb]TextBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBox DockPanel[/color][color=#007700].[/color][color=#0000bb]Dock[/color][color=#007700]=[/color][color=#dd0000]"Bottom"[/color][color=#007700]>[/color][color=#0000bb]Dock [/color][color=#007700]= [/color][color=#dd0000]"Bottom"[/color][color=#007700]</[/color][color=#0000bb]TextBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBox DockPanel[/color][color=#007700].[/color][color=#0000bb]Dock[/color][color=#007700]=[/color][color=#dd0000]"Left"[/color][color=#007700]>[/color][color=#0000bb]Dock [/color][color=#007700]= [/color][color=#dd0000]"Left"[/color][color=#007700]</[/color][color=#0000bb]TextBox[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBox Background[/color][color=#007700]=[/color][color=#dd0000]"White"[/color][color=#007700]>[/color][color=#0000bb]This TextBox [/color][color=#dd0000]"fills" [/color][color=#0000bb]the remaining space[/color][color=#007700].</[/color][color=#0000bb]TextBox[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]DockPanel[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][/COLOR]
UniformGrid : يتم ترتيب الادوات على شكل صفوف واعمدة ويتم ملى الصفوف حسب ترتيب اضافة الادوات
مثال :
كود :
[color=#000000][COLOR=#007700]<[/color][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"300"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]UniformGrid Rows[/color][color=#007700]=[/color][color=#dd0000]'3' [/color][color=#0000bb]Columns[/color][color=#007700]=[/color][color=#dd0000]'3'[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Margin[/color][color=#007700]=[/color][color=#dd0000]'5'[/color][color=#007700]>[/color][color=#0000bb]1[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Margin[/color][color=#007700]=[/color][color=#dd0000]'5'[/color][color=#007700]>[/color][color=#0000bb]2[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Margin[/color][color=#007700]=[/color][color=#dd0000]'5'[/color][color=#007700]>[/color][color=#0000bb]3[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Margin[/color][color=#007700]=[/color][color=#dd0000]'5'[/color][color=#007700]>[/color][color=#0000bb]4[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Margin[/color][color=#007700]=[/color][color=#dd0000]'5'[/color][color=#007700]>[/color][color=#0000bb]5[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Margin[/color][color=#007700]=[/color][color=#dd0000]'5'[/color][color=#007700]>[/color][color=#0000bb]6[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Margin[/color][color=#007700]=[/color][color=#dd0000]'5'[/color][color=#007700]>[/color][color=#0000bb]7[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Margin[/color][color=#007700]=[/color][color=#dd0000]'5'[/color][color=#007700]>[/color][color=#0000bb]8[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Margin[/color][color=#007700]=[/color][color=#dd0000]'5'[/color][color=#007700]>[/color][color=#0000bb]9[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]UniformGrid[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][/COLOR]
Grid : يتم تحديد مواضع الأدوات حسب الصف والعمود كما يمكن تحديد موضع اي اداة ضمن أي خلية
مثال :
كود :
[color=#000000][COLOR=#007700]<[/color][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Grid Sample" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"300"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Grid [/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Grid[/color][color=#007700].[/color][color=#0000bb]RowDefinitions[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]RowDefinition[/color][COLOR=#007700]/>
<[/COLOR][color=#0000bb]RowDefinition[/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]Grid[/color][color=#007700].[/color][color=#0000bb]RowDefinitions[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Grid[/color][color=#007700].[/color][color=#0000bb]ColumnDefinitions[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]ColumnDefinition[/color][COLOR=#007700]/>
<[/COLOR][color=#0000bb]ColumnDefinition[/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]Grid[/color][color=#007700].[/color][color=#0000bb]ColumnDefinitions[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button Grid[/color][color=#007700].[/color][color=#0000bb]Row[/color][color=#007700]=[/color][color=#dd0000]"0" [/color][color=#0000bb]Grid[/color][color=#007700].[/color][color=#0000bb]Column[/color][color=#007700]=[/color][color=#dd0000]"1" [/color][color=#0000bb]Content[/color][color=#007700]=[/color][color=#dd0000]"1"[/color][COLOR=#007700]/>
<[/COLOR][color=#0000bb]Button Grid[/color][color=#007700].[/color][color=#0000bb]Row[/color][color=#007700]=[/color][color=#dd0000]"1" [/color][color=#0000bb]Grid[/color][color=#007700].[/color][color=#0000bb]Column[/color][color=#007700]=[/color][color=#dd0000]"1" [/color][color=#0000bb]Content[/color][color=#007700]=[/color][color=#dd0000]"2"[/color][COLOR=#007700]/>
<[/COLOR][color=#0000bb]Button Grid[/color][color=#007700].[/color][color=#0000bb]Row[/color][color=#007700]=[/color][color=#dd0000]"0" [/color][color=#0000bb]Content[/color][color=#007700]=[/color][color=#dd0000]"3" [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]Grid[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][/COLOR]
StackPanel : يتم تكديس الادوات فوق بعض بشكل افقى او عمودي
مثال :
كود :
[color=#000000][COLOR=#007700]<[/color][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"300"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]StackPanel Orientation[/color][color=#007700]=[/color][color=#dd0000]"Horizontal"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBox Margin[/color][color=#007700]=[/color][color=#dd0000]'5' [/color][color=#0000bb]Text[/color][color=#007700]=[/color][color=#dd0000]"vb4arab"[/color][COLOR=#007700]/>
<[/COLOR][color=#0000bb]Button Margin[/color][color=#007700]=[/color][color=#dd0000]'5' [/color][color=#0000bb]Content[/color][color=#007700]=[/color][color=#dd0000]"vb4arab.com" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"150" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"50"[/color][COLOR=#007700]/>
<[/COLOR][color=#0000bb]ListBox Margin[/color][color=#007700]=[/color][color=#dd0000]'5'[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]ListBoxItem[/color][color=#007700]>[/color][color=#0000bb]1[/color][color=#007700]</[/color][color=#0000bb]ListBoxItem[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]ListBoxItem[/color][color=#007700]>[/color][color=#0000bb]2[/color][color=#007700]</[/color][color=#0000bb]ListBoxItem[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]ListBoxItem[/color][color=#007700]>[/color][color=#0000bb]3[/color][color=#007700]</[/color][color=#0000bb]ListBoxItem[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]ListBox[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][/COLOR]
WrapPanel : ترتيب الادوات من اليسار الى اليمين مع إمكانية التفاف الأدوات إلى سطر جديد عند عدم وجود مساحة كافية في السطر الحالي
مثال :
كود :
[color=#000000][COLOR=#007700]<[/color][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"150"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]WrapPanel [/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button[/color][color=#007700]>[/color][color=#0000bb]One[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button[/color][color=#007700]>[/color][color=#0000bb]Two[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button[/color][color=#007700]>[/color][color=#0000bb]Three[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button[/color][color=#007700]>[/color][color=#0000bb]Four[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button[/color][color=#007700]>[/color][color=#0000bb]Five[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Button[/color][color=#007700]>[/color][color=#0000bb]Six[/color][color=#007700]</[/color][color=#0000bb]Button[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]WrapPanel[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][/COLOR]
شرح ومناقشة تقنية wpf - RaggiTech - 21-10-12
Data Binding :
اغلبية الانظمة والمشاريع انشئت من اجل توفير كافة الوسائل للمستخدمين لعرض وتعديل البيانات
هنالك تقنيات عديدة تعمل على جلب وخزن وادارة البيانات مثل Oracle,SQL Server,ADO.NET وغيرها
كما يمكن خزن البيانات على اشكال عدة XML,Text
ويبدا عمل WPF بعد جلب البيانات من أي مصدر حيث تعمل على
1- نسخ البيانات التى تم جلبها من مصدر البيانات الى الاداة التى ستقوم بعرض تلك البيانات مع امكانية تعديلها
2- ضمان تعديل البيانات على المصدرData object بعد ان يتم تعديلها بالادوات المتصله معها
ولتبسيط تطوير المشاريع المتصله بمصادر بيانات تمتلك WPF وسائل تقوم بعمل هذة الخطوات بشكل سريع وتلقائي ونواه هذا الوسائل الكائن Binding class وعملة وصل الادوات Controls(the binding target) بمصادر البيانات Data objects (the binding source)
كما ان تقنية WPF جائت بحلول كثيرة في جانب ارتباط User Interface(UI) بمصادر البيانات
وسنتعرف على Data Binding وكيفية استخدام Data Grid لعرض وتعديل البيانات في درس خاص بذلك
اما الان سوف نقوم بعمل الامثله
مثال 1 : Binding from property of class
قم بانشاء مشروع WPF Application جديد ثم انشئ Class جديد اسمية Web واضف هذا الكود
كود :
[color=#000000][COLOR=#007700]Class [/color][COLOR=#0000bb]Web
[/COLOR][color=#007700]Private [/color][color=#0000bb]_MY_Web [/color][color=#007700]As [/color][color=#0000bb]String [/color][color=#007700]= [/color][COLOR=#dd0000]"WWW.VB4ARAB.COM"
[/COLOR][color=#007700]Public [/color][color=#0000bb]Property MY_Web[/color][color=#007700]() As [/color][COLOR=#0000bb]String
Get
[/COLOR][color=#007700]Return [/color][COLOR=#0000bb]_MY_Web
End Get
Set[/COLOR][color=#007700]([/color][color=#0000bb]ByVal value [/color][color=#007700]As [/color][color=#0000bb]String[/color][COLOR=#007700])
[/COLOR][color=#0000bb]_MY_Web [/color][color=#007700]= [/color][COLOR=#0000bb]value
End Set
End Property
End [/COLOR][COLOR=#007700]Class
[/COLOR][/COLOR]
الان قم بالدخول الى شاشة الكود الخاصة بال بالنافذة وفي وفي الحدث Window_Loaded قم بكتابة هذا الكود
كود :
[color=#000000][COLOR=#007700]Private [/color][color=#0000bb]Sub Window1_Loaded[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]Object[/color][color=#007700], [/color][COLOR=#0000bb]ByVal e _
[/COLOR][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Windows[/color][color=#007700].[/color][color=#0000bb]RoutedEventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles Me[/color][color=#007700].[/color][COLOR=#0000bb]Loaded
Dim web [/COLOR][color=#007700]As [/color][color=#0000bb]Web [/color][color=#007700]= New [/color][color=#0000bb]Web[/color][COLOR=#007700]()
[/COLOR][color=#0000bb]Make data source available [/color][color=#007700]for [/color][COLOR=#0000bb]binding
Me[/COLOR][color=#007700].[/color][color=#0000bb]DataContext [/color][color=#007700]= [/color][COLOR=#0000bb]web
End Sub
[/COLOR][/COLOR]
الان عد الى محرر XAML للنافذة التنفيذ وقم باضافة هذا الكود
كود :
[color=#000000][COLOR=#007700]<[/color][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"300"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Grid[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBox Text[/color][color=#007700]=[/color][color=#dd0000]"{Binding Path=MY_Web}" [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]Grid[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][/COLOR]
مثال 2 : Binding from StaticResource
قم بانشاء مشروع WPF Application جديد وفي محرر XAML للنافذة التنفيذ اضاف هذا الكود
كود :
[color=#000000][COLOR=#007700]<[/color][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]sys[/color][color=#007700]=[/color][COLOR=#dd0000]"clr-namespace:System;assembly=mscorlib"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"300"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Window[/color][color=#007700].[/color][color=#0000bb]Resources[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]ObjectDataProvider x[/color][color=#007700]:[/color][color=#0000bb]Key[/color][color=#007700]=[/color][COLOR=#dd0000]"DayValues"
[/COLOR][color=#0000bb]MethodName[/color][color=#007700]=[/color][COLOR=#dd0000]"GetValues"
[/COLOR][color=#0000bb]ObjectType[/color][color=#007700]=[/color][color=#dd0000]"{x:Type sys:Enum}"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]ObjectDataProvider[/color][color=#007700].[/color][color=#0000bb]MethodParameters[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]x[/color][color=#007700]:[/color][color=#0000bb]Type TypeName[/color][color=#007700]=[/color][color=#dd0000]"sys:DayOfWeek" [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]ObjectDataProvider[/color][color=#007700].[/color][color=#0000bb]MethodParameters[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]ObjectDataProvider[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][color=#007700].[/color][color=#0000bb]Resources[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Label Height[/color][color=#007700]=[/color][COLOR=#dd0000]"25"
[/COLOR][color=#0000bb]Content[/color][color=#007700]=[/color][color=#dd0000]'{Binding ElementName=_days,Path=SelectedValue}' [/color][COLOR=#007700]/>
<[/COLOR][color=#0000bb]ComboBox x[/color][color=#007700]:[/color][color=#0000bb]Name[/color][color=#007700]=[/color][COLOR=#dd0000]"_days"
[/COLOR][color=#0000bb]ItemsSource[/color][color=#007700]=[/color][COLOR=#dd0000]"{Binding Source={StaticResource DayValues}}"
[/COLOR][color=#0000bb]SelectedValue[/color][color=#007700]=[/color][COLOR=#dd0000]"{x:Static sys:DayOfWeek.Sunday}"
[/COLOR][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"25" [/color][color=#0000bb]VerticalAlignment[/color][color=#007700]=[/color][color=#dd0000]"Center" [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][/COLOR]
مثال 3 : Binding from property of control
قم بانشاء مشروع WPF Application جديد وفي محرر XAML للنافذة التنفيذ اضاف هذا الكود
كود :
[color=#000000][COLOR=#007700]<[/color][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]sys[/color][color=#007700]=[/color][COLOR=#dd0000]"clr-namespace:System;assembly=mscorlib"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"300" [/color][color=#0000bb]FontSize[/color][color=#007700]=[/color][color=#dd0000]"16"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]TextBox x[/color][color=#007700]:[/color][color=#0000bb]Name[/color][color=#007700]=[/color][color=#dd0000]'textBox1' [/color][color=#0000bb]Text[/color][color=#007700]=[/color][color=#dd0000]"المخلب الجارح" [/color][COLOR=#007700]/>
<[/COLOR][color=#0000bb]Label Margin[/color][color=#007700]=[/color][color=#dd0000]'5' [/color][color=#0000bb]Content[/color][color=#007700]=[/color][color=#dd0000]'{Binding ElementName=textBox1,Path=Text}' [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]StackPanel[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][/COLOR]
قم بتنفيذ المثال
Graphics :
WPF يقدم مزايا رسومية توصف بالشمول وقابلية التوسع والمرونة وتعتبر WPF منافس حقيقى امام Flash والبرامج الرسومية وتحريك الصور (Animation) الاخرى وهذة المزايا تتمتلك هذا الفوائد :
• Resolution-independent and device-independent graphics.
• Improved precision.
• Advanced graphics and animation support.
• Hardware acceleration.
2-D Shapes
WPF توفر مكتبة من vector-drawn 2-D لرسم الاشكال مثل الدوائر والمربعات والمثلثات وغيرها
وهذة الاشكال والرسومات ليست للعرض فقط بل يمكن اضافة احداث لها فتعتبر كالادوات
مثال :
قم بانشاء مشروع WPF Application جديد وفي محرر XAML للنافذة التنفيذ اضاف هذا الكود
كود :
[color=#000000][COLOR=#007700]<[/color][COLOR=#0000bb]Window
xmlns[/COLOR][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]x[/color][color=#007700]:Class=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"200" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][COLOR=#dd0000]"200"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Click the Ellipse"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Ellipse Name[/color][color=#007700]=[/color][color=#dd0000]"clickableEllipse" [/color][color=#0000bb]Fill[/color][color=#007700]=[/color][color=#dd0000]"Blue" [/color][color=#0000bb]MouseUp[/color][color=#007700]=[/color][color=#dd0000]"clickableEllipse_MouseUp" [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][/COLOR]
وفي نافذة الكود قم باضافة هذا الحدث
كود :
[color=#000000][COLOR=#007700]Private [/color][color=#0000bb]Sub clickableEllipse_MouseUp[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]Object[/color][color=#007700], [/color][COLOR=#0000bb]ByVal e _
[/COLOR][color=#007700]As [/color][color=#0000bb]MouseButtonEventArgs[/color][COLOR=#007700])
[/COLOR][color=#0000bb]MessageBox[/color][color=#007700].[/color][color=#0000bb]Show[/color][color=#007700]([/color][color=#dd0000]"You clicked the ellipse!"[/color][COLOR=#007700])
[/COLOR][COLOR=#0000bb]End Sub
[/COLOR][/COLOR]
2-D Geometries
توفر WPF مجموعه من الاشكال الرسومية 2-D البسيطة ولكن كل شخص يريد رسم اشكاله الخاصه لما يتوافق مع الواجهه التى يصممها لذلك قدمت WPF ما يعرف بالهندسيات geometries لتمكينك من انشاء كل ما تريد من الاشكال كالرسم بشكل مباشر او عمل فرشاة او عمل Clip لشكل او اداة معينة
وباستخدام هذين الكائنين Path, Geometry يمكنك رسم اي شكل تريد
2-D Effects
مجموعه جزئية من قدرات WPF الرسومية 2-D متظمنة التاثيرات البصرية مثل :
gradients, bitmaps, drawings, painting with videos, rotation, scaling, and skewing
كلها منجزة بواسطة brushes
3-D Rendering
WPF ايضا يتضمن قدرات العرض ثلاثي البعد 3-D rendering متندمج في ذلك مع الرسم الثنائي 2-D ليسمح بانشاء اكثر اثارة ومتعه لواجهات العرض
مثلا هذة الصورة تظهر صور ثنائية البعد تكسي اشكال ثلاثية البعد
حمل المثال من هنا 3-D Solids Sample
لانشاء الاشكال ثلاثية البعد يمكنك استخدام برنامج ZAM3D ثم عمل حفظ للشكل بامتداد XAML
Animation :
WPF لدية امكانيات تحريك الرسومات او ما يعرف Animation كجعل اداة مثلا تكبر وتصغر او تلتف او تهتز او تدور او تتلاشئ فيمكنك انشاء مقاطع ممتعه على هذة الشاكلة ويمكن عمل تحريك رسومي لمعظم كلاسات WPF شاهد هذة الصورة
Media :
Images
تعتبر برامج عرض الصور من البرامج الشائعة وتقنية WPF توفر الكثير من الطرق لعرض واستخدام الصور
شاهد هذة الصورة
Video and Audio
الاداة MediaElement قادرة على تشغيل كلا من الصوتيات والفديو ومرنة بما فية الكفاية لتكون اساس لمشاريع تشغيل الصوت او الفديو
هذا هو كود XAML الخاص باضافة الاداة
كود :
[color=#000000][COLOR=#007700]<[/color][COLOR=#0000bb]MediaElement
Name[/COLOR][color=#007700]=[/color][COLOR=#dd0000]"myMediaElement"
[/COLOR][color=#0000bb]Source[/color][color=#007700]=[/color][COLOR=#dd0000]"sample.wmv"
[/COLOR][color=#0000bb]LoadedBehavior[/color][color=#007700]=[/color][COLOR=#dd0000]"Manual"
[/COLOR][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"350" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"250" [/color][COLOR=#007700]/>
[/COLOR][/COLOR]
Text and Typography
توفر WPF عرض عالي الجودة للنصوص وتمتلك عدة مزايا لذلك
• OpenType font support .
• ClearType enhancements .
• High performance that takes advantage of hardware acceleration .
• Integration of text with media, graphics, and animation .
• International font support and fallback mechanisms .
شاهد هذة الصورة
Documents :
WPF يمتلك ويدعم ثلاثة انواع من المستندات
• Flow documents
• Fixed documents
• XML Paper Specification (XPS) documents
ايضا WPF يدعم انشاء وعرض وادارة وتحزيم وانشاء التلميحات وطباعة المستندات
Flow Documents
تم تصميم المستند التدفقي او الانسيابي لايجاد افضل الحلول لجعل عرض المستند تكيفي وديناميكي مع حجم النافذة و تغير اعدادات العرض
باعادة تحجم محتوى المستند(Content) وذلك كله من اجل وعرض واضح وقرائة جيدة
مثال 1 :
كود :
[color=#000000][COLOR=#007700]<[/color][color=#0000bb]FlowDocument xmlns[/color][color=#007700]=[/color][color=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Paragraph FontSize[/color][color=#007700]=[/color][color=#dd0000]"18" [/color][color=#0000bb]FontWeight[/color][color=#007700]=[/color][color=#dd0000]"Bold"[/color][color=#007700]>[/color][color=#0000bb]Flow Document[/color][color=#007700]</[/color][color=#0000bb]Paragraph[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]Paragraph[/color][COLOR=#007700]>
[/COLOR][color=#0000bb]Lorem ipsum dolor sit amet[/color][color=#007700], [/color][color=#0000bb]consectetuer adipiscing elit[/color][color=#007700], [/color][COLOR=#0000bb]sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat[/COLOR][color=#007700]. [/color][COLOR=#0000bb]Ut wisi
enim ad minim veniam[/COLOR][color=#007700], [/color][COLOR=#0000bb]quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat[/COLOR][color=#007700]. [/color][color=#0000bb]Duis autem vel eum iriure[/color][COLOR=#007700].
</[/COLOR][color=#0000bb]Paragraph[/color][COLOR=#007700]>
</[/COLOR][color=#0000bb]FlowDocument[/color][COLOR=#007700]>
[/COLOR][/COLOR]
مثال 2 :
هذا المثال يقوم بتحميل FlowDocument من ملف XAML محفوظ مسبقا
كود :
[color=#000000][COLOR=#007700]<!--[/color][color=#0000bb]XAML[/color][COLOR=#007700]-->
<[/COLOR][color=#0000bb]Window x[/color][color=#007700]:Class=[/color][COLOR=#dd0000]"Window1"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml/presentation"
[/COLOR][color=#0000bb]xmlns[/color][color=#007700]:[/color][color=#0000bb]x[/color][color=#007700]=[/color][COLOR=#dd0000]"http://schemas.microsoft.com/winfx/2006/xaml"
[/COLOR][color=#0000bb]Title[/color][color=#007700]=[/color][color=#dd0000]"Window1" [/color][color=#0000bb]Height[/color][color=#007700]=[/color][color=#dd0000]"200" [/color][color=#0000bb]Width[/color][color=#007700]=[/color][color=#dd0000]"400"[/color][COLOR=#007700]>
<[/COLOR][color=#0000bb]FlowDocumentReader Name[/color][color=#007700]=[/color][color=#dd0000]"flowDocumentReader" [/color][COLOR=#007700]/>
</[/COLOR][color=#0000bb]Window[/color][COLOR=#007700]>
[/COLOR][COLOR=#0000bb]VB
[/COLOR][color=#007700]Private [/color][color=#0000bb]Sub Window1_Loaded[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]Object[/color][color=#007700], [/color][COLOR=#0000bb]ByVal e _
[/COLOR][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]Windows[/color][color=#007700].[/color][color=#0000bb]RoutedEventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles Me[/color][color=#007700].[/color][COLOR=#0000bb]Loaded
Using stream1 [/COLOR][color=#007700]As [/color][color=#0000bb]IO[/color][color=#007700].[/color][color=#0000bb]FileStream [/color][color=#007700]= New [/color][color=#0000bb]IO[/color][color=#007700].[/color][color=#0000bb]FileStream[/color][color=#007700]([/color][color=#dd0000]"C:\SampleDoc.xaml"[/color][color=#007700], [/color][COLOR=#0000bb]_
IO[/COLOR][color=#007700].[/color][color=#0000bb]FileMode[/color][color=#007700].[/color][color=#0000bb]Open[/color][color=#007700], [/color][color=#0000bb]IO[/color][color=#007700].[/color][color=#0000bb]FileAccess[/color][color=#007700].[/color][color=#0000bb]Read[/color][COLOR=#007700])
[/COLOR][color=#0000bb]Dim document1 [/color][color=#007700]As [/color][color=#0000bb]FlowDocument [/color][color=#007700]= [/color][COLOR=#0000bb]_
TryCast[/COLOR][color=#007700]([/color][color=#0000bb]XamlReader[/color][color=#007700].[/color][color=#0000bb]Load[/color][color=#007700]([/color][color=#0000bb]stream1[/color][color=#007700]), [/color][color=#0000bb]FlowDocument[/color][COLOR=#007700])
[/COLOR][color=#0000bb]Me[/color][color=#007700].[/color][color=#0000bb]flowDocumentReader[/color][color=#007700].[/color][color=#0000bb]Document [/color][color=#007700]= [/color][COLOR=#0000bb]document1
End Using
End Sub
[/COLOR][/COLOR]
في الملف SampleDoc.xaml قم بكتابة الكود الموضح بالمثال 1
سيكون العرض على هذا الشكل
Fixed Documents
المستند الثابت تم اعدادة للانظمة التى تتطلب عرض دقيق وعلى وجه الخصوص تلك المراد طباعتها
فتكون مقاسات العرض الظاهر مساوية لمقاسات الطباعة what you see is what you get
والاستعملات المثالية للمستندات الثابته تتضمن النشر المكتبي ومعالجة النصوص وتخطيط النماذج
فالتمسك بالتصميم الاصلي للصفحة مهم .
فتحافظ المستندات الثابتة على الترتيب الدقيق لمحتواها على نهج وحدة مستقلة .
XPS Documents
XML Paper Specification (XPS) مستند مبني على مبدا المستندات الثابتة الخاصه ب WPF
و تعتبر وصف لمخططات XML-based تعرض صفحات ثابتة المحتوى بشكل صفحات الكترونية
و تعمل مستندات XPS على تسهيل انشاء ومشاركة وطباعة المستندات ثابتة المحتوى
وتبين هذة الصورة مستند XPS معروضا بواسطة DocumentViewer
حمل المثال من هنا الامثلة التى ستوضح كيفية انشاء وعرض مستندات XPS
ومن امثلة البرمجيات المعدة باستخدام WPF :
Yahoo! Messenger
http://messenger.yahoo.com/platform/win
Contoso Healthcare Sample Application
http://windowsclient.net/downloads/f...entry3754.aspx
Asahiyama Zoo
http://www.asahiyamazoo-aict.jp/asahiyamazoo.xbap
مدير المخازن من برمجتي web-based application :
وكل ما ترونة مبرمج باكواد XAML ولا يوجد صور الا ايقونات Button
مشروع تخرجي SMS News - standalone application
انتهى
-------------
بالنسبة Microsoft Expression Blend 2
http://www.microsoft.com/expression/ رابط الموقع
اخص بشكري لنجاح هذة المقدمة زميلي واخي WAIS
اتمنى يكون نقاش مثمر وعائد بما نرجوة
|