וובמאסטר - תיכנות ובניית אתרים

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

arikp ,‏ מכללת סלע‏ ‏/‏ 7 יולי, 2011
F+
F-

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}">
  <Grid
   ShowGridLines="True">
    <Grid.RowDefinitions>
      <RowDefinition
       Height="30" />
      <RowDefinition
       Height="Auto" />
      <RowDefinition
       Height="*" />
      <RowDefinition
       Height="2*" />
    </Grid.RowDefinitions>
  </Grid
>
</
phone:PhoneApplicationPage
>

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

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

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

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

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

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}">
  <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
>
</
phone:PhoneApplicationPage
>

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

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

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}">
  <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
>
</
phone:PhoneApplicationPage
>

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

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

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}">
  <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
>
</
phone:PhoneApplicationPage
>

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

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

arikp, מכללת סלע

אריק פוזננסקי הוא יועץ בכיר ומרצה בסלע. הוא השלים שני תארי B.Sc. במתמטיקה ומדעי המחשב בהצטיינות יתרה בטכניון. לאריק ידע נרחב בטכנולוגיות מיקרוסופט, כולל .NET עם C#, WPF, Silverlight, WinForms, Interop, COM/ATL, C++ Win32 ו reverse engineering.
תגיות: SilverLight‏  /  Windows Phone‏  /  סלולארי‏  /  מדריך‏  /  פיתוח‏  

תגובות בפייסבוק

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות