[RaggiTech]

كاتب الموضوع : المخلب الجارح

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