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


--


اليوم سنتحدث عن موضوع يعتبر من اهم اركان تقنية الWPF ، واتقانه هو امر ضروري لإحتراف هذه التقنية .

انها لغة XAML .. سنتعرف عليها وسنعرض ايجابياتها بجانب العديد من الامور المتقدمة نوعا ما.

بسم الله ...







ماهي XAML


تعرف XAML بانها اختصار الى جملة Extensible Application Markup Language وتعني - لغة الرقم القابلة للامتداد للتطبيقات - وهي لغة قواعدها بسيطة وموروثة من لغة XML القياسية.

تُستخدم هذه اللغة لإنشاء وتهيئة الكائنات في تقنية WPF ، وتعمل هذه اللغة بنظام العلاقة الهرمية (اي Parent و Children ) ..




صورة 1.1 : العنصر Grid بتضمن بداخله 3 عناصر عبارة عن Button



الان من خلال الصورة السابقة نجد وبشكل واضح من هو الParent ومن هم ال Children
حيث ان الGrid يعتبر Parent والButtons تعتبر Children ، الان لنرى كود الXaml الذي قام بتكوين هذه العناصر :-


PHP كود :
        <Grid HorizontalAlignment="Left" Height="105" Margin="140,110,0,0" Width="240" Background="#FFECECEC" >
            <
Button Content="Button"  Width="75" Height="30" Margin="25,25,140,50"/>
            <
Button Content="Button"  Width="75" Height="30" Margin="80,65,85,10"/>
            <
Button Content="Button" Width="75" Height="30" Margin="145,25,20,50"/>
        </
Grid



شاهد هذه الصورة التي تشرح الكود السابق :-











فوائد لغة XAML


* اكواد XAML قصيرة وسهلة القراءة
* الفصل بين كود التصميم وكود البرمجة
* الفصل بين المبرمج والمصمم (حيث بالامكان استئجار مصمم ليقوم بتصميم واجهة خاصة لك) فلا يتطلب ان يكون خبيرا في البرمجة لانه فقط سيتعامل مع XAML
* امكانية كتابة الكود في برامج اخرى ك (Expression blend) ومن ثم نقله الى مشروعك .











Code-behind Vs Xaml



تعرفنا على كود ْXAML وقلنا انه هو المسؤول عن انشاء الواجهات والعناصر واسناد خصائص لها وغيرها ..


اما الCode-behind هو كود لغة البرمجة الذي يكون اما بلغة الفيجوال بيسك او السي شارب ، وهو الكود الاجرائي المسؤول عن تسيير البرنامج والقيام بوظائفه .

Code-behind هو نفسه الكود الذي نستخدمه في برمجة Windows Forms ، ولكن في WPF ، تستطيع الاكواد المكتوبة في الCode-behind الوصول الى عناصر معرفة في XAML او حتى انشاء عناصر وادراجها لكود xaml ، لتنعكس وتظهر العناصر على الواجهة .



كما قلنا انه يمكن للCode-behind انشاء عناصر جديدة واضافتها للواجهة ، ونفس الشيئ XAML يمكنها انشاء عناصر جديدة واضافتها للواجهة ..



الان نستعرض الكود السابق الذي قام بتكوين هذه الواجهة :




هذا الكود مكتوب بواسطة XAML :
PHP كود :
        <Grid HorizontalAlignment="Left" Height="105" Margin="140,110,0,0" Width="240" Background="#FFECECEC" >
            <
Button Content="Button"  Width="75" Height="30" Margin="25,25,140,50"/>
            <
Button Content="Button"  Width="75" Height="30" Margin="80,65,85,10"/>
            <
Button Content="Button" Width="75" Height="30" Margin="145,25,20,50"/>
        </
Grid



اما لو قررت استخدام الCode-behind لتكوين العناصر السابقة :-

PHP كود :
// عمل حاوية
Grid grid = new Grid();
grid.HorizontalAligment Left;
grid.Height 105;
grid.Margin = new Thickness(140,0,0,0);
grid.Width 240;

this.Content grid;
 
// عمل ازرار
Button button1 = new Button();
Button button2 = new Button();
Button button3 = new Button();


//اسناد الخصائص
button1.Content "Button1";
...
...
...
...

//بعد اكمال الخصائص ، سيقوم الكود اسفله باضافة العناصر الى الواجهة
grid.Children.Add(textBlock); 



ظاهر جدا وضوح ونظافة لغة XAML في انشاء وتهيئة العناصر بكل سهولة .










بعض امكانيات لغة XAML

Properties as Elements : يعرف ان الخصائص في لغة XAML تكتب في Line واحد متصل كهذا الكود مثلا :

PHP كود :
<Button Content="OK" />. 
الكود السابق يقوم بتعريف Button واسناد قيمة نصية "OK" الى الخاصية Content




الان لو افترضنا ان القيمة كانت معقدة وطويلة .. في تلك الحالة ، يفضل وضعها في في مكان اخر وهذا المكان هو تحت الElement الذي هو عبارة عن Propertie - حيث بالامكان تحويل الPropertie الى Element :-
PHP كود :
        <Button>
            <
Button.Content>
                
OK
            
</Button.Content>
        </
Button





------------------




Markup Extensions : الوسوم الممتدة ، هي كلمات توضع كـ قيمة لخاصية ما . هذه الوسوم هي كلمات تنوب عن قيمة معينة ، حيث تشير هذه الكلمات الى قيمة في مكان ما .

بعبارة مبسطة ، انها مثل مبدأ (المُتغيرات) تقريبا .



مثال من واقع الحياة : انت اسمك الكريم (حسن منصور عبدالمنعم) وكنيتك "ابو علي"

لو ناديتك : "ابو علي" بدل (حسن منصور عبدالمنعم) هل في ذلك اشكالية ؟

اذن "ابو علي" تشير الى (حسن منصور عبدالمنعم) .. من هذا التشبيه يمكن اعتبار "ابو علي" كوسم ممتد ههههه.



من المنظور البرمجي هناك اختلاف بسيط تقنيا ، لكن نفس الفكرة المذكورة في الاعلى ..




--



بعض من هذه الوسوم الممتدة :-


* Binding
جلب قيمة خاصية من خاصية اخرى

* StaticResource
جلب قيمة من الرسورس

* DynamicResource
جلب قيمة من الرسورس ديناميكيا - طبعا كل هذا سيتم توضحيه في دروس متقدمة

* TemplateBinding
جلب قيمة من الTarget الذي تقوم بعمل templating له

* x:Static
جلب قيمة من خاصية معرفة كـ static

* x:Null
يتم تعويضها وقت الruntime ب null



--




مثال على طريقة الاستخدام :-

PHP كود :
<TextBox x:Name="textBox"/>
<
Label Content="{Binding Text, ElementName=textBox}"/> 



الوسم الممتد الذي تم استخدامه في الكود السابق هو Binding ..

قامت Binding بجلب قيمة الtextbox واسندتها الى خاصية content التابعة للLabel

اذن Binding تشير الى قيمة خاصية في عنصر ما .



امكانيات WPF عالية للغاية حيث بالامكان تكوين Custom Markup Extensions ، وهذا مفيد بشكل كبير لنقل قيم من والى Code-behind

وتستخدم بكثرة مع مستخدمي نمط MVVM .





------------------




Namespaces : ومن منا لايعرف فضاءات الاسماء التي تحتوي بداخلها على ال classes ..
كل ملف من نوع xaml لابد ان يحتوي على 2 من الNamespace على الاقل وهما :

إقتباس :http://schemas.microsoft.com/winfx/2006/xaml
^ تحتوي هذه المكتبة على الكلمات الرئيسية او الكلمات المحجوزة الخاصة ب xaml



إقتباس :http://schemas.microsoft.com/winfx/2006/...esentation
^تحتوي هذه المكتبة على جميع الControls .. كـ Button, label, checkbox .....الخ



وطريقة اضافتها :-

PHP كود :
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</
Window


حيث انك لابد ان تقوم بكتابة الكلمة المحجوزة xmlns قبل اسم المكتبة لإضافتها .. ولكن هذا متاح لاول مكتبة فقط

فالمكتبات الاخرى لابد من اسناد حرف بجانب xmlns مثلا :-
PHP كود :
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
^ الحرف x تمت اضافته لكي نتمكن من اضافة هذه المكتبة - يمكنك اضافة اي حرف بدل ال X -










الخاتمة


احب اقول ان لغة XAML سهل وحلوة للغاية ، حاولوا بعد هالدرس تفتحون الفيجوال ستوديو وتكتبون يدويا اكواد XAML المذكورة في الموضوع - فقط للتدريب

قهذا مفيد جدا وسترى ذلك عندما تقوم بكتابتها لأنك سترى ماتكتبه في XAML ينعكس على الواجهة .

فا XAML هو كود الواجهات .




نلقاكم غدا - تحياتي






انتهى
الرد }}}}
#2
الله لا يحرمك الاجر اخوي محمد.
الرد }}}}
تم الشكر بواسطة:
#3
مــوضــوع مهــم .. مشــكور عـليه اخــي ...
لكــن ان تــِشرح بــلغه C# صح ...
هل بــامكــانك دمج لـغه Vb.Net

الــف شكـر لـيك اســتمر



[صورة مرفقة: g5qidgW.jpg]

ســبحــانك الـلهم بـحمدك , الـلهم لا عــلم لـنا الى مــأ علــمتــنا , الـلهـم علــمنـا ما جــهلـنا وانــفـعنــا بــما عــلمــتنـا انــك انـتَ الـسـميع الــعلــيم الـحكـيم ~~!I!

الرد }}}}
تم الشكر بواسطة:
#4
شرح ممتاز ... إستمر
وفقك الله ...



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

لعلي استوعب الدرس بالكامل ما عدا مسألة Namespaces ، لعلي أقرأ الدرس مرة أخرى لعلي استوعب المسألة.
أو لعلك تشرحها بطريقة أخرى إن أمكن بشيء من التفصيل مع مثال.

شاكر لك أخي الشاكي لله على جهودك الطيبة ، واسأل الله أن يجعلك ممن أخلصوا النية لله وأن لا يحرمك الله الأجر.
قال رسول الله صلى الله عليه وسلم ( من قال لا إله إلا الله دخل الجنة ) حديث صحيح.
قال رسول الله صلى الله عليه وسلم ( كلمتان خفيفتان على اللسان ثقيلتان في الميزان حبيبتان للرحمن : سبحان الله وبحمده سبحان الله العظيم ) حديث صحيح.
الرد }}}}
تم الشكر بواسطة:
#6
(21-06-14, 03:09 AM)عبد الله كتب : وعليكم السلام ورحمة الله وبركاته

لعلي استوعب الدرس بالكامل ما عدا مسألة Namespaces ، لعلي أقرأ الدرس مرة أخرى لعلي استوعب المسألة.
أو لعلك تشرحها بطريقة أخرى إن أمكن بشيء من التفصيل مع مثال.

شاكر لك أخي الشاكي لله على جهودك الطيبة ، واسأل الله أن يجعلك ممن أخلصوا النية لله وأن لا يحرمك الله الأجر.


لماذا تستعمل هذه النيم سبيس في برامجك ؟

Import System
Import System.IO
...




بالطبع عشان تستورد Classes .

نفس الشي في xaml ، تحتاج تستورد classes من بعض النيم سبيس
الرد }}}}
تم الشكر بواسطة:
#7
(21-06-14, 03:38 AM)الشاكي لله كتب : لماذا تستعمل هذه النيم سبيس في برامجك ؟
Import System
Import System.IO
...


بالطبع عشان تستورد Classes .
نفس الشي في xaml ، تحتاج تستورد classes من بعض النيم سبيس

هذه مفهومة أنه حينما أريد استيراد class يجب أن أضمنه في البرنامج أُدرجه كمرجع.

لكن في شرحك هنا أضفت عناوين صفحات شبكة :
PHP كود :
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
</
Window

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

اولا انا شاكر لك رسالتك على الخاص وهذا يظهر مدى اخلاقك الكريمة وحبك للخير ..




ثانيا بالنسبة للNamespace >>


في WPF هناك صيغتين لإستيراد الNamespace في XAML :



الصيغة الاولى ، صيغة استيراد الNamespace الخاصة بمكتبات Freamwork - مثال :
PHP كود :
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 


الصيغة الثانية ، صيغة استيراد الNamespace الخاصة بClass library انت قمت بتصميمها او جايبنها من الانترنت ، يعني ان المكتبات ليست تابعة للFreamword ، فتلك المكتبات تستعمل معها الصيغة التالية لإستيرادها - مثال :
PHP كود :
xmlns:vb4arb="clr-namespace:SDKSample;assembly=SDKSampleLibrary" 



واما ليش انها تشبه العناوين http ، فهذا مجرد syntex وليس عنوان حقيقي ، فلا يوجد اي رابط بالانترنت وبين هذا الكود ، انه مجرد صيغة ..


كما هو الحال في لغة HTML :

PHP كود :
<html xml:lang="ar" dir="rtl" xmlns="http://www.w3.org/1999/xhtml" lang="ar"



الNamespace في Xaml تقدر تستفيد منها في اضافة Custom control الى الواجهة ، حيث لابد من اضافة Namespace الى xaml لو حبيت تضيف كونترولك الخاص ، وحتى فيه امور ثانية منستعرضها في دروس قادمة ، خلينا ماشين حبة حبة ياعسل ..Big Grin



على العموم شاكر لك سؤالك فهذا يدل على حرصك على فهم واحتراف التقنية بشكل صحيح
واي سؤال انا حاضر
الرد }}}}
تم الشكر بواسطة: عبد الله , mamas1 , Japan


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

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


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