التنبيهات التالية ظهرت :
Warning [2] count(): Parameter must be an array or an object that implements Countable - Line: 864 - File: showthread.php PHP 7.4.33 (Linux)
File Line Function
/showthread.php 864 errorHandler->error



تقييم الموضوع :
  • 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 هو كود الواجهات .




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






انتهى
الرد }}}


الردود في هذا الموضوع
[WPF حتى الاحتراف] {2} - لغة XAML - بواسطة الشاكي لله - 17-06-14, 01:01 AM

المواضيع المحتمل أن تكون متشابهة .
الموضوع : الكاتب الردود : المشاهدات : آخر رد
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الثاني) الشاكي لله 9 7,530 06-12-20, 04:09 AM
آخر رد: Mohammed1991
  [WPF حتى الاحتراف] {1} - إنشاء برنامجك الاول الشاكي لله 30 21,880 14-10-18, 08:34 AM
آخر رد: qadar elzaman
  [WPF حتى الاحتراف] {0} - نظرة عامة عن WPF الشاكي لله 14 11,812 14-10-18, 07:58 AM
آخر رد: qadar elzaman
  [WPF حتى الاحتراف] {4.6} - الـ Data Template و الـ Sample Data الشاكي لله 14 10,964 05-03-17, 09:47 AM
آخر رد: dabas
  [WPF حتى الاحتراف] {4.3} - الـTemplate ومقدمة عن الـTrigger الشاكي لله 8 6,979 25-01-17, 04:45 AM
آخر رد: hero2199
  [WPF حتى الاحتراف] - عمل واجهة (الفيديو الاول) الشاكي لله 5 5,208 02-12-16, 11:07 PM
آخر رد: alsef
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (3- الانميشن) الشاكي لله 16 8,947 02-06-16, 02:53 PM
آخر رد: CLARO
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (2- البرمحة) الشاكي لله 1 2,881 14-05-16, 11:54 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] - ورشة عمل Pages Navigation (1- التصميم) الشاكي لله 1 2,748 14-05-16, 11:27 PM
آخر رد: السندبااد
  [WPF حتى الاحتراف] {3.3} - اداة الـ Grid الشاكي لله 14 9,715 31-03-16, 11:11 PM
آخر رد: السندبااد

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


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