מדריך Silverlight – סידור פקדים: Grid

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

הגדרת שורות ב Grid

הגדרת שורות נעשית באמצעות התכונה RowDefinitions של Grid ובאמצעות אוביקטי RowDefinition נוספים כפי שניתן לראות בדוגמא הבאה:

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             >:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >:d="http://schemas.microsoft.com/expression/blend/2008"
             >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <Grid ShowGridLines="True">
    <Grid.RowDefinitions>
      <RowDefinition Height="30" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="2*" />
    </Grid.RowDefinitions>
  </Grid>
</UserControl>

בדוגמא זו אנו מגדירים Grid בעל 4 שורות. נעיר כי הגדרנו את התכונה RowDefinitions ע"י שימוש בכתיב Property Element Syntax מאחר והתוכן של התכונה מורכב מדי לייצוג ע"י מחרוזת בודדת. לפרטים נוספים על Property Element Syntax ניתן לחזור לפרק קביעת ערכי Properties בXAML .

לכל שורה אנו מגדירים את גובהה, כאשר יש מספר דרכים להגדיר גובה של שורה:

1. ע"י ציון מספר קבוע – מספר זה יקבע באופן מפורש את גובה השורה. בדוגמא שלנו קבענו את השורה הראשונה להיות בגובה 30.
2. ע"י שימוש בערך Auto – ערך זה קובע כי גובה השורה יקבע בהתאם לתוכן של השורה.
3. ע"י שימוש בערך * – ערך זה מציין כי גובה השורה יקבע להיות "כל שאר המקום הפנוי", לאחר שלקחנו בחשבון שורות בעלות ערך קבוע וערך Auto. בנוסף, אם יש שורות נוספות בעלות ערך * אזי הגובה הנותר יתחלק בין השורות באופן יחסי לפי מספר הכוכביות. בדוגמא שלנו, השורה השלישית היא בעלת גובה * והשורה הרביעית היא בעלת גובה *2, כלומר גובה כפול מגובה השורה השלישית, לכן השטח הנותר יתחלק כך שהשורה השלישית תקבל שליש ממנו והשורה הרביעית תקבל שני-שליש ממנו.

להלן תוצאת הקוד הקודם

השורה הראשונה תופסת 30 פיקסלים. השורה השנייה אינה נראית מאחר ואין לה תוכן אז Auto הפך בעצם ל0. ושתי השורות האחרונות מקבלות את כל שאר הגובה הפנוי כאשר השורה האחרונה גודלה פי 2 מהשורה הקודמת.

נעיר כי הדלקנו את הדגל ShowGridLines להיות True כדי לעזור לנו לראות את השורות השונות. כאשר אנו מסיימים למקם את הפקדים ניתן להוריד דגל זה.

הגדרת עמודות בGrid

הגדרת עמודות נעשית באופן דומה להגדרת שורות, ע"י שימוש בתכונה ColumnDefinitions של Gridובאוביקטים מסוג ColumnDefinition כפי שניתן לראות בדוגמא הבאה:

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             >:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >:d="http://schemas.microsoft.com/expression/blend/2008"
             >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <Grid ShowGridLines="True">
    <Grid.RowDefinitions>
      <RowDefinition Height="30" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="2*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="2*" />
      <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>
  </Grid>
</UserControl>

בדוגמא זו אנו מגדירים 3 עמודות. הגדרת הרוחב של עמודה נעשית לפי אותם כללים כמו בשורות, ע"י ציון מספר קבוע, הערך Auto, או הערך *.

בדוגמא זו קבענו את רוחב העמודה השנייה להיות פי 2 מרוחב העמודה הראשונה, ואת רוחב העמודה השלישית להיות פי 3 מרוחב העמודה הראשונה. לכן סה"כ הרוחב של הGrid מתחלק לפי היחסים הנ"ל

הצבת פקד בתא מסוים

כדי להציב פקד בתא מסוים (שורה ועמודה מסוימת) יש להגדיר אותו בתוך ה Grid ולהשתמש בתכונות Grid.Row כדי לקבוע את מספר השורה, ובתכונה Grid.Column כדי לקבוע את מספר העמודה. נעיר כי הספירה נעשית החל מ 0.

בדוגמת הקוד הבאה אנו מציבים כפתור בשורה השניה ובעמודה השלישית:

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             >:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >:d="http://schemas.microsoft.com/expression/blend/2008"
             >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <Grid ShowGridLines="True">
    <Grid.RowDefinitions>
      <RowDefinition Height="30" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="2*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="2*" />
      <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>
    <Button Grid.Row="1"
            Grid.Column="2"
            Content="Hello Grid" />
  </Grid>
</UserControl>

והתוצאה שנקבל:

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

הצבת פקד במספר תאים

ניתן לקבוע שפקד מסוים יתפרש על פני מספר שורות או מספר עמודות. זה נעשה באמצעות השימוש בתכונות Grid.RowSpan ו Grid.ColumnSpan.

לדוגמא, הקוד הבא מציב את הכפתור בעמודה שניה, אבל מציין שעל הכפתור להיפרש על פני שתי עמודות:

<UserControl x:Class="FirstSilverlightApplication3.MainPage"
             >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             >:x="http://schemas.microsoft.com/winfx/2006/xaml"
             >:d="http://schemas.microsoft.com/expression/blend/2008"
             >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             d:DesignHeight="300"
             d:DesignWidth="400">
  <Grid ShowGridLines="True">
    <Grid.RowDefinitions>
      <RowDefinition Height="30" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="2*" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="*" />
      <ColumnDefinition Width="2*" />
      <ColumnDefinition Width="3*" />
    </Grid.ColumnDefinitions>
    <Button Grid.Row="1"
            Grid.Column="1"
            Grid.ColumnSpan="2"
            Content="Hello Grid" />
  </Grid>
</UserControl>

תוצאת הרצת הקוד הנ"ל היא