لوحة الشبكة - الامتداد

السلوك الافتراضي ل لوحة الشبكة هو أن كل أداة تحجز مساحة خلية واحدة, لكن في بعض الأوقات يمكن أن تريد لأداة أن تحجز مساحة أسطر أو أعمدة أكثر. لحسن الحظ الشبكة تجعل هذه العملية سهلة جدا, عن طريق الخصائص المربوطة (امتداد العمود) و (امتداد السطر). القيمة الافتراضية لهذه الخاصية هوي بديهيا 1, لكن تستطيع تحديد رقم أكبر لتجعل الأداة تمتد لأعمدة أو أسطر أكثر.

هنا لدينا مثال بسيط جدا, نستخدم فيه خاصية (امتداد العمود):

<Window x:Class="WpfTutorialSamples.Panels.GridColRowSpan"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridColRowSpan" Height="110" Width="300">
	<Grid>
		<Grid.ColumnDefinitions>			
			<ColumnDefinition Width="1*" />
			<ColumnDefinition Width="1*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Button>Button 1</Button>
		<Button Grid.Column="1">Button 2</Button>
		<Button Grid.Row="1" Grid.ColumnSpan="2">Button 3</Button>
	</Grid>
</Window>

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

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

<Window x:Class="WpfTutorialSamples.Panels.GridColRowSpanAdvanced"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="GridColRowSpanAdvanced" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>
		<Grid.RowDefinitions>
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
			<RowDefinition Height="*" />
		</Grid.RowDefinitions>
		<Button Grid.ColumnSpan="2">Button 1</Button>
		<Button Grid.Column="3">Button 2</Button>
		<Button Grid.Row="1">Button 3</Button>
		<Button Grid.Column="1" Grid.Row="1" Grid.RowSpan="2" Grid.ColumnSpan="2">Button 4</Button>
		<Button Grid.Column="0" Grid.Row="2">Button 5</Button>
	</Grid>
</Window>

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

كما ترا, الامتداد على مجموعة أعمدة و/أو أسطر في لوحة الشبكة سهل جدا. في مقال لاحقة, سوف نستخدم الامتداد, بالاضافة لتقنيات الشبكة الاخرى في مثال عملي أكثر.