أدوات التحكم بترتيب العناصر Silverlight And Wpf

توفر لنا Silverlight و wpf نظام مرن لترتيب العناصر يمكن المطورون والمصممون من تحديد موقع العناصر بسهولة على واجهة المستخدم بحيث يدعم التموضع الثابت والتموضع بواسطة المحددات كما يدعم التموضع الديناميكي الذي يحدد حجم وموضع التحكمات عندما يتغير حجم المستعرض وهنا لدينا ثلاث أدوات تفيدنا في هذا الخصوص هي Canvas و StackPanel و Grid

Canvas Panel

يعتبر الـ Canvas Panel الـ Layout Panel الأساسي الذي يدعم تموضع التحكمات المحتواة فيه باستخدام محددات صريحة ونحن نقوم بتحديد موضع التحكمات فيه باستخدام الخصائص المرتبطة التي تمكنك من تحديد موقعها بالنسبة للتحكم Canvas الأب المباشر لها وهذه الخصائص المرتبطة مفيدة لأنها تمكن اللوح الأب من توسيع الخصائص المضبطة للتحكم الذي بداخله فبتحديد الخصائص المرتبطة مثلا Top و Left الأساسيتين يضيف إمكانية لتحديد ارتباط Top و Left للزر أو أي عنصر آخر ضمن الواجهة بدون الحاجة لإضافة هذه الخاصية لفئة الزر أو تعديل فئة الزر بأي شكل فيمكننا إضافة زرين لـ Canvas وضبط موضعهما بمسافة 50 بكسل من اليسار و 50 و 150 بكسل من الأعلى باستخدام xaml كما في الكود

<Canvas Background="Aquamarine" >
	<Button Content="Button 1" Width="100" Height="50" 
			Canvas.Left="50" Canvas.Top="50"></Button>

	<Button Content="Button 2" Width="100" Height="50" 
			Canvas.Left="50" Canvas.Top="150"></Button>

</Canvas>

وبينما يكون الـ Canvas مفيدا في الحالات التي لن يتحرك فيها عناصر الواجهة ولكنك لن تجده بتلك المرونة عندما نضيف تحكمات للواجهة وتعالج أوضاع تحتاج فيها إلى تغيير حجم أو مكان بعض تحكمات الواجهة ففي هذه الحالات سيتوجب عليك كتابة كود النقل أو إعادة التحجيم بنفسك لتحريك الأشياء بداخل الـ Canvas ويكمن الحل الأفضل لهذه المشكلة هو باستخدام عنصر ترتيب مختلف للواجهة مثل StackPanel أو Grid

StackPanel

هو عبارة عن تحكم بسيط لترتيب الواجهة يدعم تموضع التحكمات التي بداخله إما بشكل أفقي أو رأسي وهو يستخدم عادة لترتيب جزء صغير من واجهتك ففي المثال التالي نستخدمه لترتيب ثلاثة أزرار بشكل شاقولي كما في الكود

<StackPanel Background="Bisque" >
	<Button Content="Button 1" Width="100" Height="50" Margin="10"/>
	<Button Content="Button 2" Width="100" Height="50" Margin="10"/>
	<Button Content="Button 3" Width="100" Height="50" Margin="10"/>
</StackPanel>

أو يمكننا ضبط الخاصية Orientation له إلى Horizontal لضبط الترتيب بشكل أفقي كما في الكود

	<StackPanel Background="Bisque" Orientation="Horizontal" >
		<Button Content="Button 1" Width="100" Height="50" Margin="10"/>
		<Button Content="Button 2" Width="100" Height="50" Margin="10"/>
		<Button Content="Button 3" Width="100" Height="50" Margin="10"/>
	</StackPanel>

Grid Panel

يعتبر هذا التحكم هو الأكثر مرونة بين الثلاث تحكمات الخاصة بترتيب الواجهة بما انه يدعم ترتيب التحكمات بعدة أسطر وعدة أعمدة وهنا عليك فقط تحديد الأسطر والأعمدة باستخدام الخاصيتين Grid.RowDefinitions و Grid.ColumnDefinitions اللتان يتم تعريفهما مباشرة تحت التحكم <Grid> ويمكنك استخدام الخصائص المرتبطة Attached Property للتحكمات المحتواة ضمن الـ Grid لتحديد أين يقع التحكم في أي سطر أو عمود فمثلا يمكننا تعريف Grid بثلاثة اسطر و ثلاثة أعمدة ووضع أربع أزرار بداخلها كما في الكود

	<Grid Background="BlueViolet"
		<Grid.RowDefinitions>
			<RowDefinition Height="60"/>
			<RowDefinition Height="60"/>
			<RowDefinition Height="60"/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="110"/>
			<ColumnDefinition Width="110"/>
			<ColumnDefinition Width="110"/>
		</Grid.ColumnDefinitions>
		<Button Content="Button 1" Width="100" Height="50" 
				Grid.Column="1" Grid.Row="0">
		</Button>
		<Button Content="Button 2" Width="100" Height="50" 
				Grid.Column="0" Grid.Row="1">
		</Button>
		<Button Content="Button 3" Width="100" Height="50" 
				Grid.Column="3" Grid.Row="1">
		</Button>
		<Button Content="Button 4" Width="100" Height="50" 
				Grid.Column="1" Grid.Row="2">
		</Button>
	</Grid>

إضافة إلى دعم الـ Grid تحديد الحجم بشكل قيمة ثابتة كما في مثالنا السابق فهي تدعم أيضا التحكم الآلي بالحجم Height=”Auto” كما تدعم تحديد حجم أدنى وحجم أقصى بحيث يحدد حجم الأسطر والأعمدة بناء على محتوياتها وحجم الصفحة المتواجدة فيها كما تدعم أن يتم وضع قياس الأسطر والأعمدة نسبة لبعضها ومع استخدامك المتكرر لهذا التحكم ستجد الكثير من المرونة فيه كما تستخدم * لجعل التقسيم بنسب معينة مثل 2* أو 3* كما في المثال

	<Grid Background="BlueViolet">
		<Grid.RowDefinitions>
			<RowDefinition Height="auto"/>
			<RowDefinition Height="auto"/>
			<RowDefinition Height="auto"/>
		</Grid.RowDefinitions>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="auto"/>
			<ColumnDefinition Width="2*"/>
			<ColumnDefinition Width="3*"/>
		</Grid.ColumnDefinitions>
		<Button Content="Button 1" Width="100" Height="50" 
				Grid.Column="1" Grid.Row="0">
		</Button>
		<Button Content="Button 2" Width="100" Height="50" 
				Grid.Column="0" Grid.Row="1">
		</Button>
		<Button Content="Button 3" Width="100" Height="50" 
				Grid.Column="3" Grid.Row="1">
		</Button>
		<Button Content="Button 4" Width="100" Height="50" 
				Grid.Column="1" Grid.Row="2">
		</Button>
	</Grid>