تقييم الموضوع :
  • 0 أصوات - بمعدل 0
  • 1
  • 2
  • 3
  • 4
  • 5
شرح ومناقشة تقنية wpf
#1
كاتب الموضوع : المخلب الجارح

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
}}}
تم الشكر بواسطة: احمد074
#2
كاتب المشاركة : المخلب الجارح

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]



}}}
تم الشكر بواسطة: احمد074
#3
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


اتمنى يكون نقاش مثمر وعائد بما نرجوة
}}}



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


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