دوره في السلفرلايت - الدرس الرابع

السلام عليكم ورحمه الله وبركاته

بعد أن تعرفنا في الدرس السابق على التعامل مع أدوات السلفرلايت سنتتطرق اليوم الأنماط والقوالب في السلفرلايت.

- الأنماط

عندما نتحدث حول تطبيق نمط لكائن في صفحة ASP.NET أو تطبيق سلفرلايت فإننا نعني بها القدرة على تعديل مظهر هذا الكائن تغيير الحجم, المحاذاة ... إلخ

ولتتأثر الخواص التي تهتم بمظهر أي كائن, يمكننا التحكم بها ضمن وسم الكائن Inline ولكن تغيير الخواص من حين إلى آخر يعتبر أمر مرهق لذا لابد من وضع النمط في مكان مركزي ليسهل تعديل الخواص بسهولة, وهذا الحال يشبه حال الـ CSS. وهذا النوع ليس إلا ضبط أكثر من خاصية للكائن, وهذا الأمر واضح وهذه بعض الأمثلة

<TextBlock Text="My Red Bold Arial Label" Foreground="#FF0000"
FontFamily="Arial" FontWeight="Bold" />

في المثال السابق تم ضبط لون الخط إلى أحمر, واسم الخط ووزنه.

<Rectangle Width="100" Height="100">
<Rectangle.Fill>
<SolidColorBrush Color="#FF0000" />
</Rectangle.Fill>
</Rectangle>

وهنا قمنا بضبط طول وعرض المستطيل كما تم تعبئة لونه باللون الأحمر.

كما يمكننا خزن الأنماط في مكان مركزي والذي سيمنحنا السهولة في التعامل مع الأنماط وأيضا سهولة في التغيير بدلاً من التغيير على مستوى كل أداة. قدمت لنا السلفرلايت الكائن Style الذي يمكننا من خلاله تعريف نمط لأداة أو أكثر من ثم إعادة استخدامها.

<Style x:Key="StandardTextBox" TargetType="TextBox">
<Setter Property="FontFamily" Value="Times New Roman" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Width" Value="150" />
</Style>

كما نلاحظ من المثال السابق تم عمل نمط يستهدف الادوات من نوع TextBox وذلك من خلال الخاصية TargetType, وبعدها يأتي دور الكائن Setter الذي يمكن من خلال خاصيتيه Property و Value لتحديد خاصية الأداة المحددة اعلاه وقيمتها.

فيمكننا تعريف النمط على مستوى صفحة أو UserControl وذلك بتعريف الكائن Style ضمن مصدر الأداة يعني داخل الوسم UserControl.Resources على الصورة التالية

<UserControl.Resources>
<Style x:Key="StandardTextBox" TargetType="TextBox">
<Setter Property="FontFamily" Value="Times New Roman" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Width" Value="150" />
</Style>
</UserControl.Resources>

أو على مستوى التطبيق وذلك بتعريفة ضمن ملف الـ App.Xaml في الوسم Application.Resources على الصورة التالية

<Application.Resources>
<Style x:Key="StandardTextBox" TargetType="TextBox">
<Setter Property="FontFamily" Value="Times New Roman" />
<Setter Property="FontSize" Value="12" />
<Setter Property="Width" Value="150" />
</Style>
</Application.Resources>

وبعدها يمكن استخدام النمط بالصورة التالية

<TextBox x:Name="username" Canvas.Top="40" Canvas.Left="150"
Style="{StaticResource StandardTextBox}"/>

من المثال أعلاة نلاحظ استخدام الخاصية Style لتحديد النمط الذي سيتم تطبيقه على مربع النص.

- القوالب

تعلمنا سابقا كيفية تطبيق الأنماط على أدوات السلفرلايت وذلك بضبط خواصها أو بإستخدام الكائن Style, لكن ماذا لون أردنا أن نغير شكل الكائن بدلاً من تغيير حجمه أو لونه. ماذا لو فكرنا في عمل زر دائري هذا غير ممكن بضبط خواصه, يمكننا عمل هذا وأكثر بإستخدم القوالب ControlTemplate

  	<"Style x:Key="CircleButton" TargetType="Button>
        	<"Setter Property="Template>
            	<Setter.Value>
                	<ControlTemplate TargetType="Button">
                    	<Grid>
<Ellipse Fill="#FF0000" Storke="Black" StorkThickness="1" Height="100" Width="100" />                  	
<Grid/>
                	<ControlTemplate/>
            	<Setter.Value/>
        	<Setter/>
>/Style <

نلاحظ من المثال السابق لقد تم عمل نمط يغير في الخاصية ControlTemplate وقمنا بتغيير الشكل الإفتراضي للزر بحيث يظهر على صورة دائرة وذلك بإستخدام الأداة Ellipse. كما يمكننا عمل أنماط وقوالب عند النقر على الزر أو المرور عليه وذلك باستخدام الكائن VisualState.

وأخيراً وليس أخراً يمكننا ضم مجموعة من الأنماط للأدوات بحيث تكون Theme ونقوم بالاشارة إليها من ملف ال App.Xaml بالصورة التالية

<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="/SilverlightApp;component/AppThemes/CustomTheme.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>

كما توجد مجموعة رائعة من الثيمات المرفقة مع الـ Silverlight Toolkit يمكنك إستخدامها لإعطاء منظر جميل جداً للأدوات.

وأخيرا وصلنا إلى نهاية درسنا الرابع .. انتظروني في الدرس التالي للتعامل مع البيانات في السلفرلايت.