كتابة تطبيقنا الأول بتقنية Silverlight

أنشئ تطبيقا جديدا من من نوع Silverlight Application وسمه HelloSilverlight ثم اختر Dynamically Generate an HTML test page to host silverlight within this project

تصميم الواجهة

افتح Solution Explorer ولاحظ الملفات app.xaml الذي يحتوي على المصادر والكود الخاص بالتطبيق بأكمله و page.xaml يمثل صفحة شبيهة لتلك الموجودة في موقع ويب وإذا وسعت العقدة بجانبها ستجد ملف page.xaml.vb أو page.xaml.cs بحسب لغة البرمجة التي تستخدمها وهي تحتوي على الكود المدار الخاص بك وهي تشابه للتك الـ Model الخاصة بـ ASP .net

لتحديد مظهر الشبكة – إن لم تكن الصفحة مفتوحة انقر نقرا مزدوجا على page.xaml لفتحها ثم انتقل لمحرر xaml وحدد عنصر Grid وفي قسم البداية لتعريف الـ Grid غير Background إبى أي لون ترغبه وكذلك حدد الخاصية ShowGridLines إلى true التي تتسبب بغظهار خطوط منقطة توضح أقسام الشبكة الأمر الذي يفيدك عندما تقوم بتصميم الشكل ليظهر القسم كما يلي

<Grid x:Name="LayoutRoot" Background="LightGreen"  ShowGridLines="True" >

سنستخدم الآن الخاصية RowDefinition للشبكة لتحديد الأسطر والأعمدة

داخل grid و بين قسمي البداية والنهاية لـ Grid أدخل الكود التالي بحيث يبدو تعريف Grid كما يلي

<Grid x:Name="LayoutRoot" Background="LightGreen"  ShowGridLines="True">
	<Grid.RowDefinitions>
		<RowDefinition Height="40"/>
		<RowDefinition Height="220"/>
		<RowDefinition Height="40"/>
	</Grid.RowDefinitions>
	<Grid.ColumnDefinitions>
		<ColumnDefinition Width="75" />
		<ColumnDefinition Width="325"/>
	</Grid.ColumnDefinitions>

</Grid>

دعنا نقوم الآن بإضافة بعض التحكمات للتطبيق

قم بسحب كتلة نصوص TextBlock من صندوق الأدوات في بيئة التطوير إلى داخل محرر كود xaml وذلك بعد </Grid.ColumnDefinitions> مباشرة وأضف له الخاصية Text بالقيمة Name: كما في الكود

<TextBlock Text="Name:"></TextBlock>

ثم أنشئ كتلتي نصوص أخريين بنفس الطريقة كما في الكود

<TextBlock Text="Date:"></TextBlock>
<TextBlock Text="Message"></TextBlock>

سترى في نافذة العرض أن صناديق النصوص الثلاثة أصبحت متراكبة في الخلية الأولى في الشبكة ولضبط مكان ظهورها علينا بضبط الخاصيتين Grid.Column ز Grid.row لكل منه كما في الكود حيث ستلاحظ بعد هذه التعديلات ظهور كتل النصوص في أماكنها الصحيحة ضمن الشبكة

<TextBlock Text="Name:" Grid.Row="0" Grid.Column="0"> </TextBlock>
<TextBlock Text="Date:" Grid.Row="1" Grid.Column="0"></TextBlock>
<TextBlock Text="Message" Grid.Row="2" Grid.Column="0" 
		   Grid.ColumnSpan="2" ></TextBlock>

اسحب صندوق نصوص textbox من صندوق الأدوات وأفلته مباشرة بعد كتلة النصوص Message واضبط خصائصه كما في الكود

<TextBox Text="Your Name" Grid.Row="0" Grid.Column="1" 
		 Width="150" HorizontalAlignment="Left" ></TextBox>

ثم قم بسحب StackPanel إلى محرر xaml أسفل صندوق النصوص والذي يستخدم لصف التحكمات أفقيا أو عموديا داخل خلايا الشبكة واضبط خصائصه كما في الكود

<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Vertical" >


</StackPanel>

داخل StackPanel أدخل تحكم Calendar وعندما نضيف تحكم التقويم سنلاحظ أن قسم البداية الخاص به مختلف نوعا ما عن بقية التحكمات حيث بيدأ بـ basics أو بادئة أخرى لأنه ليس قسما من تحكمات Silverlight الأساسية وهو معرف ضمن مجمع آخر لذا يجب عليك إضافة مجال أسماء xml ومرجع للمجمع فعندما نقوم بسحب التحكم إلى داخل كود xaml تقوم بيئة التطوير بإضافة المراجع المناسبة تلقائيا من اجلنا الآن قم بضبط خصائص التقويم كما في الكود

<basics:Calendar SelectionMode="SingleDate" 
				 HorizontalAlignment="Left"></basics:Calendar>

اسحب تحكم زر button أسفل تحكم التقويم واضبط خصائصه كما في الكود

<Button Width="75" Height="25" HorizontalAlignment="Left" 
		Content="OK"></Button>

وبهذا نكون قد انتهينا من تصميم الواجهة ويجب أن يبدو كود xaml لديك كما في الكود لا تنس أن تقوم بحفظ المشروع عند هذه النقطة

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  x:Class="HelloSilverlight.Page"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
	Width="400" Height="300">
	<Grid x:Name="LayoutRoot" Background="LightGreen"  ShowGridLines="True">
		<Grid.RowDefinitions>
			<RowDefinition Height="40"/>
			<RowDefinition Height="220"/>
			<RowDefinition Height="40"/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="75" />
			<ColumnDefinition Width="325"/>
		</Grid.ColumnDefinitions>
		<TextBlock Text="Name:" Grid.Row="0" Grid.Column="0"> </TextBlock>
		<TextBlock Text="Date:" Grid.Row="1" Grid.Column="0"></TextBlock>
		<TextBlock Text="Message" Grid.Row="2" Grid.Column="0" 
				  Grid.ColumnSpan="2" ></TextBlock>
		<TextBox Text="Your Name" Grid.Row="0" Grid.Column="1" 
				 Width="150" HorizontalAlignment="Left" ></TextBox>
		<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Vertical" >
			<basics:Calendar SelectionMode="SingleDate" 
							 HorizontalAlignment="Left"></basics:Calendar>
			<Button Width="75" Height="25" HorizontalAlignment="Left" 
				Content="OK"></Button>
		</StackPanel>
	</Grid>

</UserControl>

إضافة الكود

في محرر xaml انتقل إلى كتلة النصوص Message وفي قسم البداية له أضف الخاصية x:name بالقيمة Message1 وهذه الخاصية تقوم بتعريف العنصر بشكل فريد فيصبح التعريف كما يلي

<TextBlock Text="Message" Grid.Row="2" Grid.Column="0"
		   x:Name="Message1"></TextBlock>

كرر العملية بالنسبة لـ TextBox و Calendare و Button بإضافة الخاصية x:name لها كما يلي

x:Name="name1"
x:Name="cal1"
x:Name="okButton"

في قسم البداية للزر okButton اكتب click ثم اضغط tab فيظهر لك صندوق خاصية Intellisense انقر نقرا مزدوجا على New Event handler فيتم إنشاء إجراء معالجة حدث بالاسم الافتراضي ويوضع في ملف الكود الآن انقر بالماوس اليميني على الحدث click ثم اختر navigate to Event Handler حيث يتم نقلك لمحرر الكود

اجعل إجراء معالجة الحدث يبدو كما في الكود

Private Sub okButton_Click(ByVal sender As System.Object, _
							   ByVal e As System.Windows.RoutedEventArgs)

	Dim dateString As String
	If cal1.SelectedDate Is Nothing Then
		dateString = "<date not selected>"
	Else
		dateString = cal1.SelectedDate.ToString()
	End If
	message1.Text = "Hi " & name1.Text & vbCrLf & _
		"Selected Date: " & dateString
End Sub

شغل المشروع واختبره

جعل الواجهة ديناميكية

في محرر xaml وضمن قسم البداية لتعريف UserControl احذف الخاصيتين Width و height وفي تعريف Grid.RowDefinitions غير قيم Height كما يلي

<RowDefinition Height="Auto"/>
<RowDefinition Height="*" MinHeight="240"/>
<RowDefinition Height="Auto"/>

وغير خاصية Width لـ Grid.ColumnDefinitions كما يلي

<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*"/>

أضف الخاصية Margin لكل من تحكمات كتل النصوص Name و Date و Message كما يلي

Margin="10,5,10,5"

وللتحكمات TextBox و Calendar و Button كما يلي

Margin="0,5,0,5"

وأضف الخاصية FontSize لكتلة النصوص Message كما يلي

FontSize="20"

احفظ المشروع واختبره ويبج أن يكون لديك كود xaml الكامل كما يلي

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  x:Class="HelloSilverlight.Page"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
	>
	<Grid x:Name="LayoutRoot" Background="LightGreen"  ShowGridLines="True">
		<Grid.RowDefinitions>
			<RowDefinition Height="auto"/>
			<RowDefinition Height="*" MinHeight="240"/>
			<RowDefinition Height="auto"/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="Auto" />
			<ColumnDefinition Width="*"/>
		</Grid.ColumnDefinitions>
		<TextBlock Text="Name:" Grid.Row="0" Grid.Column="0" 
				   Margin="10,5,10,5"> </TextBlock>
		<TextBlock Text="Date:" Grid.Row="1" Grid.Column="0"
				   Margin="10,5,10,5"></TextBlock>
		<TextBlock Text="Message" Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2"
				   x:Name="Message1" Margin="10,5,10,5" FontSize="20"></TextBlock>
		<TextBox Text="Your Name" Grid.Row="0" Grid.Column="1" Margin="0,5,0,5"
				 Width="150" HorizontalAlignment="Left" x:Name="name1"></TextBox>
		<StackPanel Grid.Column="1" Grid.Row="1" Orientation="Vertical" >
			<basics:Calendar SelectionMode="SingleDate" Margin="0,5,0,5" 
							 HorizontalAlignment="Left" x:Name="Cal1"></basics:Calendar>
			<Button Width="75" Height="25" HorizontalAlignment="Left" 
				Content="OK" x:Name="okButton" Click="okButton_Click"
					Margin="0,5,0,5"></Button>
		</StackPanel>
	</Grid>

</UserControl>