Windows Presentation Foundation

أتابع معك وبحماس وإليك الدرس التالي عسى أن تتقبله مني كمشاركة تفاعلية كما يمكنك تعديله كما تشاء فقط راسلني:

تعرف وافهم زامل XAML  الجزء الأول:

ماهي XAML
زامل هي أشبه بلغة من خلالها نستطيع تنجيز واجهات WPF مشابهة كثير للغة HTML,XML . فزامل تمتلك القدرة على تمثيل البيانات كاستنساخ من الاغراض.
لنلقي نظرة داخل VS2010 :
ابدأ مشروع WPF Application   وانظر إلى كود زامل التالي  و قم بادخال ما يحتوي العنصر Grid  بالنسخ واللصق:

<Window x:Class="HellowWorld.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid >
<Button Content="ClickMe!" Height="144" HorizontalAlignment="Left"
Margin="143,60,0,0" Name="button1" VerticalAlignment="Top" Width="166"
BorderBrush="#E9931963"
Click="button_Click" FontSize="24" />
</Grid>
"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid >
<Button Content="ClickMe!" Height="144" HorizontalAlignment="Left"
Margin="143,60,0,0" Name="button1" VerticalAlignment="Top" Width="166"
BorderBrush="#E9931963"
Click="button_Click" FontSize="24" />
</Grid>

</Window>

أيضا في الكود الخلفي لوثيقة xamel أضف ما يلي :

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("Hellow! WPF");
        }

لاحظ ما يلي:
إن وثيقة زامل الاولية تحتوي فقط على عنصرين عنصر window وهو الممثل لكامل النافذة وهي ما يمثله Form بالنموذج القديم وأيضا عنصر Grid وهو عبارة عن حاوية تحتوي كل العناصر البقية
ونحن أضفنا العنصر الثالث في المرة السابقة بالسحب والافلات هل تذكره ؟ عنصر زر Button
وكما في كل أكواد HTML و XML ينطبق عليها هذا الكلام تحديدا هناك عنصر علوي يحتوي على بقية اعناصر وتنتهي الوثيقة باغلاقه وهنا مبدئيا وقبل التعرف على بقية العناصر الـ Top level سنعتبر العنصر الوحيد هو <Window> وبمجر اغلاق هذا العنصر بـ </window> ستعتبر الوثيقة منتهية ولا يوجد محتويات جديدة ستضاف.

كذلك الامر لبقية التحكمات controls تغلق بنفس الطريقة <control></control>
 

التركيب النحوي والاملائي لزامل
كقاعدة عليك بمعرفتها ان اي عنصر من زامل هو مستنسخ من غرض آخر وخصائص العنصر موروثة من هذا الغرض

إسناد الخصائص لعناصر التحكم:
لاحظ الزر التالي :

<Button Content="ClickMe!" Height="144" Name="clickMe" Width="166" Click="button_Click" FontSize="24" />

وبالطبع يمكن عمل محتوى الزر كما في كل XML كمايلي:

<Button Height="144" Name="clickMe" Width="166" BorderBrush="#E9931963" Click="button_Click" FontSize="24" >ClickMe!</Button>

إن هذا الكود مشابه لكود C# التالي :

Button clickMe = new Button();
blueButton.Width = 100;
blueButton.Height = 40;
blueButton.Content = "Click Me";
blueButton.Background = new SolidColorBrush(Colors.Blue);

سنعقد الأمر قليلا :
هناك بعض الخصائص لعناصر التحكم مركبة لا تقبل أن تكون ضمن الكود
لنفرض أننا نريد وضع خلفية للزر ClickMe "كان الله في عونه" وأردنا أن يكون اللون ثابنا "في المرحلة الحالية فقط!"
يمكننا أن نقوم بعمل مايلي:

<Button>
<Button.Background>
<SolidColorBrush Color="#E9931963"/>
</Button.Background>
</Button>

لاحظ هنا أن العنصر الابن ما هو إلا خاصة من خصائص العنصر الاب وتأخذ النموذج <Class.Property/> (في مثالنا <Button.Background>) إن محتوى العنصر الابن هو عبارة عن قيمة نريد أن نلحقها بالعنصر الاب
 

الخاصيىة Content:
قبل قليل رأينا كيف أمكننا ان نضع محتوى الزر بطريقتين فنحن في المرة السابقة أسندنا قيمة نصية للخاصة Content ألا وهي ClickMe
أما الان فقد حان وقت التغيير إنها WPF! يمكنك أن تضع ما تريد !! ماذا عن وضع textbox ضمن الزر !
هيا لنرى كيف , فقط!

داخل الـGrid إكتب ما يلي:

<Grid >
<Button Height="144" Name="clickMe" Width="166" BorderBrush="#E9931963" Click="button_Click" FontSize="24" Margin="117,36,220,130">
<TextBox Height="30" HorizontalAlignment="Left" Name="textBox1" VerticalAlignment="Top" Width="151" Margin="124,123,0,0" />
</Button>
</Grid>

واستبدل الرسالة في الكود الخلفي بـ

textBox1.Text = "Hellow WPF!";

استبدال الرسالة

//MessageBox.Show("HellowWPF World");

ياترى ماللذي سيحدث ! اضغط الزر لترى

الوسوم بامتدادات خاصة Markup Extension :
مهما كانت اللغة سهلة سريعة وذات امكانيات هائلة إلا أننا لاننكر رغبتنا أحيانا بتخصيص قيم لا تستطيع زامل تنجيزها أو حتى أنها تقع خارج كود الزامل لكن نرغب باستيرادها وهنا جاءات خاصية markup extension وهي تنفع جدا وكمثال عنها يمكننا عمل مجموعة أزرار وهذه المجموعة تأخذ خاصية اللون من زر معين! كيف؟! ببساطة بواسطة جعل هذا الزر كمفتاح مورد resource key "يمكن تشبيهها بالوراثة "
سنغطي أكثر الامتدادات أهمية وكل في أوانه .. وإن شاء الله ستفهمها حتى قبل التعمق بعا لتصبح المعلومات عنها سهلة ومفيدة
إن أهم هذه الوسوم هي الوسم Binding ومن تعامل مع ASP بعرف هذا الوسم جيدا.

يمكننا من خلال هذه الوسم النفاذ لخصائص غرض معين :
بافتراض أن لدينا زر ومربع نص ونريد أن يكون النص الموجود على الزر هو عبارة عن النص المكتوب في مربع النص بكل بساطة ماذا سنفعل :
لنعدل الكود قليلا ليصبح كما يلي :

<Button Height="144" x:Name="ClickMe" Width="166" Click="button_Click"
Content="{Binding ElementName=textBox1, Path=Text}" FontSize="24" Margin="117,36,220,130"/>
<TextBox Height="30" x:Name="textBox1" Width="151" Margin="132,229,220,52" />

اضغط على F5 ليعمل المشروع واكتب أي عبارة ستجد ان الزر يكتب العبارة مباشرة ! كيف ذلك ؟

ستتعرف لاحقا على الخاصية الرائعة Dependency Property وقدراتها الههائلة التي أكسبت الجمالية لمشروعنا
لنعد لتفسير السطر

 Content="{Binding ElementName=textBox1, Path=Text}"

لاحظ أنني أردت أن يظهر نص الزر باسم محدد هو الخاصة text من العنصر textBox1 وبالتالي حتى أستطيع عمل ذلك فلا بد لي من ربط الخاصة المطلوب ربطها (ContentBinding ) عن طريق ElementName التي حددت اسم العنصر و Path التي حددت الخاصية المطلوبة

فضاءات الاسماء :
كما لكل لغة فضاء أسماء وأيضا في زامل يمكنك تعريف فضاءات أسماء تريدها لكن هنا يجب أن يكون لدينا فضائين أساسيين يكونان دائما كلازمة في مشروعنا هما :

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

لاحظ أننا قمنا بتسمية اسم الزر في المثال الاخير واسم مربع النص ضمن فضاء الاسماء x x:Name="ClickMe"

لاحظ طريقة تعيين فضاء اسماء جديد عن طريق الوسم xmlnsxmlns: NewNameSpace="Path Of your NameSpace "

هذا يا صديقي مبدأ زامل وللزامل بقية
 

كل الشكر لك صديقي العزيز.

في الواقع موضوع WPF موضوع واسع ومهم جداً، وبدايتك موفقة في التعريف عن XAML، خصوصاً أن كل ميزات WPF يمكن تعريفها واستخدامها ضمن XAML بكل سهولة ويسر. فأصبح بإمكاننا إنشاء واجهات قوية بدون اللجوء إلى كتابة كود طويل ومعقد! ومثالك الخاص بالـ Binding هو من أهم المواضيع في WPF، وبالطبع هناك عدة طرق لعمل الـ Binding، وستزيد متعة العمل وجودة النتائج مع استخدام التقنيات الاخرى مع Binding:

1. Converters حيث بإمكاننا أخذ قيمة من عنصر معين Source  وارسالها إلى محول معين، والذي سيقوم بدوره بتحويل القيمة إلى قيمة أخرى معينة ومن ثم إرجعاها إلى عنصر آخر Target لعرضها.
2. Validation حيث يتم أخذ القيمة وإرسالها إلى محقق بيانات، والذي بدورة سيتحقق من صلاحية القيمة، وفي حال عم صلاحيتها سيقوم بعرض رسالة عدم صلاحيتها حسب طريقة عرض نقوم بتعريفها. 

    

ولعل المثال البسيط الآتي سيعطي فكرة عن عالمWPF  الجميل، سنقوم بعمل Binding مع DataConverters:

المثال: عبارة عن مربع نصي نقوم بادخال إسم اللون فقط، وسيقوم WPF بتلوين الزر لهذا اللون.

• نقوم بإنشاء واجهة جديدة، ونضع عليها مربع نصي TextBox، وزر Button.

 <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
            <RowDefinition Height="auto"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Row="0" Text="Enter color name"/>
        <TextBox Grid.Row="1" Name="txtColor" Height="23" Width="120" Margin="10"/>
        <Button Grid.Row="2" Content="Button"   Width="135" Height="66" Margin="10" />
    </Grid>

​

• سوف نقوم بإنشاء الـ Converter الخاص بعملية التحويل، لذلك نقوم بإضافة Class جديد إلى مشروعنا ونسمية TextToColorConverter، نحاول أن يكون الإسم معبر عن المهمة، ونقوم بجعل هذا Class يرث من IValueConverter المزود من قبل WPF، ليصبح لدينا شكل الـ Class كالتالي:

 public class TextToColorConverter : IValueConverter

• يحوي هذا الـ Interface على two methods بعمل تطبيق له، الأولى خاصة بعملية التحويل وتدعى Convert، والثانية مسؤولة عن التحويل العكس ConvertBack، سوف نقوم حالياً باستخدام الأولى. اي التحويل بإتجاه واحد. هنا يجب علينا أخذ القيمة المرسلة وعمل Cast  لها بما يناسبنا ومن ثم القيام بعلمية تحقق معينة، ثم اخيرا ارجاع object من اي نوع نريد، لذلك هنا سوف نعالج القيمة المرسلة على انها نص او كلمة، ثم سوف نتحقق منها إذا كانت إسم للون معين ثم نقوم بإرجاع لون لخلقية الزر المراد تلوينه. سيكون شكل ميثود Convert على الشكل التالي:

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            string text = (string)value;
            text=text.ToUpper();
            switch (text)
            {
                case "RED": return new SolidColorBrush(Colors.Red);
                case "GREEN": return new SolidColorBrush(Colors.Green);
                case "BLUE": return new SolidColorBrush(Colors.Blue);
                case "ORANGE": return new SolidColorBrush(Colors.Orange);
                case "BLACK": return new SolidColorBrush(Colors.Black);
                default: return new SolidColorBrush(Colors.White);

            }
        }

• الأن نعود إلى واجهتنا، وكما ذكر صديق فإننا بحاجة لتعريف فضاء إسم لنتمكن من استخدام المحول الجديد لذلك نضيف ضمن تعريف Window التعريف بالسطر الرابع: xmlns:local

<Window x:Class="WpfApplication3.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication3"
        Title="MainWindow" Height="220.4" Width="253.8">

• الأن نريد تعريف object من هذا المحول ضمن XAML، وهي طريقة سهلة وتتم عن طريق Resource، كما نلاحظ هناك تكامل بين مكونات WPF، الأن علينا أضافة هذا السطر ضمن Window.Resource، ليصبح لدينا الشكل التالي:

   <Window.Resources>
        <local:TextToColorConverter x:Key="TextToColorConverter"/>
    </Window.Resources>

• x:Key هي لتسمية هذا الـ object وبالتالي استخدامة ضمن XAML،
• الأن الخطوة الأهم نقوم بالذهاب إلى XAML الخاص بالزر، حيث نريد تحويل النص إلى لون خلفية للزر. لذلك نحن بحاجة لربط خاصية Backgrond الخاصة بالزر، كالتالي:

Background="{Binding ElementName=txtColor, Path=Text, Converter={StaticResource TextToColorConverter}}"

• هنا قمنا بتريف العنصر المصدر للقيمة والذي هو TextBox حيث txtColor هو اسمة، ثم حددنا الخاصية المطلوبة من هذا العنصر والتي هي Text، الأن نحن بحاجة لتحويل هذا النص إلى لون مناسب، لذلك قمنا بربط Converter مع المحول المعرف مسبقا. وهكذا يتم عملنا بالكامل.
• الأن سوف نقوم بتشغيل البرنامج بالضغط على F5، ثم سنقوم بكتابة اسماء بعض الألوان ضمن المربع النصي:

أرجو أن أكون قد افدت ولو بجزء بسيط، هذا كله غيض من فيض WPF.

وشكراً.

شكرا اخي

متابع معك بأذن الله