הרשת - מתיחה (Spanning)

התנהגות ברירת המחדל של הרשת היא להקצות תא אחד לכל פקד, אבל לפעמים נרצה שפקד מסויים יתפוס יותר שורות או עמודות. למזלנו קל מאד לעשות זאת ברשת על ידי התכונות המצורפות (Attached) ColumnSpan ו - RowSpan. בברירת המחדל הערך של התכונות הללו הוא 1 כמובן, אבל ניתן להקצות להם ערך גדול יותר כדי לגרום לפקד להימתח על פני יותר שורות או עמודות.

הנה דוגמה פשוטה מאד, שבה אנחנו משתמשים בתכונה ColumnSpan:

<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>

רק הגדרנו שתי עמודות ושתי שורות, כולן תופסות חלק שווה במקום. שני הכפתורים הראשונים רק משתמשים בעמודות כרגיל, אבל עם הכפתור השלישי גרמנו לו לתפוס מקום של שתי עמודות בשורה השניה, תוך שימוש בתכונה ColumnSpan.

כל זה כל כך פשוט שיכולנו פשוט להשתמש בצירוף של לוחות כדי להגיע לאותה תוצאה, אבל למקרים קצת יותר מתקדמים, השיטה הזו באמת שימושית. בואו ננסה משהו שמראה טוב יותר עד כמה היא חזקה:

<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: לשתיהן.

So as you can see, spanning multiple columns and/or rows in a Grid is very easy. In a later article, we will use the spanning, along with all the other Grid techniques in a more practical example.