17-06-14, 01:01 AM
(آخر تعديل لهذه المشاركة : 21-09-19, 06:03 AM {2} بواسطة الشاكي لله.)
السلام عليكم ورحمة الله وبركاته
--
اليوم سنتحدث عن موضوع يعتبر من اهم اركان تقنية الWPF ، واتقانه هو امر ضروري لإحتراف هذه التقنية .
انها لغة XAML .. سنتعرف عليها وسنعرض ايجابياتها بجانب العديد من الامور المتقدمة نوعا ما.
بسم الله ...
--
اليوم سنتحدث عن موضوع يعتبر من اهم اركان تقنية ال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
--
بعض من هذه الوسوم الممتدة :-
* 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 هو كود الواجهات .
نلقاكم غدا - تحياتي
قهذا مفيد جدا وسترى ذلك عندما تقوم بكتابتها لأنك سترى ماتكتبه في XAML ينعكس على الواجهة .
فا XAML هو كود الواجهات .
نلقاكم غدا - تحياتي
انتهى