פקד הרשת

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

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

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Button>Button 1</Button>
		<Button>Button 2</Button>
	</Grid>
</Window>

כפי שניתן לראות, הפקד האחרון מקבל את המיקום העליון, מה שאומר במקרה הזה שאי אפשר אפילו לראות את הכפתור הראשון. לא מאד שימושי לרוב המצבים, אז בואו ננסה לחלק את החלל, שזה מה שפקד רשת עושה כל כך טוב. נעשה זאת על ידי שימוש ב ColumnDefinitions (הגדרת עמודות) ו- RowDefinitions (הגדרת שורות). בדוגמה הראשונה, נדבוק בעמודות:

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

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

כפי שניתן לראות, הפקדים ממלאים את כל המרחב הזמין. זו היא התנהגות ברירת המחדל כשהרשת מארגנת את הפקדים-בנים שלה. היא עושה זאת על ידי הקצאת הערך Stretch לתכונות HorizontalAlignment ו- VerticalAlignment של הפקדים הבנים שלה.

יש מצבים בהם תרצו שהם יקחו רק חלק מהמקום שהם צריכים ו/או לשלוט על איך הם ימוקמו בתוך הרשת. הדרך הקלה ביותר לעשות זאת היא עלידי קביעת התכונות HorizontalAlignment ו- VerticalAlignment ישירות על הפקדים שעליהם רוצים לשלוט. הנה גירסה מעודכנת לדוגמה הנ"ל:

<Window x:Class="WpfTutorialSamples.Panels.Grid"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Grid" Height="300" Width="300">
    <Grid>
		<Grid.ColumnDefinitions>
			<ColumnDefinition Width="*" />
			<ColumnDefinition Width="*" />
		</Grid.ColumnDefinitions>		
		<Button VerticalAlignment="Top" HorizontalAlignment="Center">Button 1</Button>
		<Button Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Right">Button 2</Button>
	</Grid>
</Window>

כפי שניתן לראות מצילום המסך, הכפתור הראשון כעת ממוקם למעלה וממורכז. הכפתור השני ממוקם באמצע, מיושר לימין.

Summary

The Grid is a very versatile panel, with many more possibilities than we saw in this article. We'll dig into the rest of them in the next several articles.