מדריך Windows Phone – סידור פקדים: תכונות נוספות המשפיעות על Layout

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

תכונות השולטות על גודל הפקד

תכונות השולטות על רוחב הפקד

התכונה Width – קובעת את רוחב הפקד להיות בדיוק המספר המבוקש.
התכונה MinWidth – מגבילה את רוחב הפקד להיות לפחות המספר המבוקש
התכונה MaxWidth – מגבילה את רוחב הפקד להיות לכל היותר המספר המבוקש

מומלץ לא לקבוע רוחב מפורש אלא לכל היותר לשים מגבלות מינימום ומקסימום בעת הצורך.

תכונות השולטות על גובה הפקד

התכונה Height – קובעת את גובה הפקד להיות בדיוק המספר המבוקש
התכונה MinHeight – מגבילה את גובה הפקד להיות לפחות המספר המבוקש
התכונה MaxHeight – מגבילה את גובה הפקד להיות לכל היותר המספר המבוקש.

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

תכונות השולטות על מיקום הפקד

התכונה HorizontalAlignment

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

• Left – הפקד יוצמד לשמאל השטח הנתון לו
• Right – הפקד יוצמד לימין השטח הנתון לו
• Center – הפקד יוצמד למרכז השטח הנתון לו
• Stretch – הפקד ימתח על כל השטח הנתון לו לרוחב

בדוגמא הבאה ניתן לראות את האפשרויות השונות לתכונה HorizontalAlignment:

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >: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}">
  <StackPanel>
    <Button
      HorizontalAlignment="Left">Button (Left)</Button>
    <Button
      HorizontalAlignment="Right">Button (Right)</Button>
    <Button
      HorizontalAlignment="Center">Button (Center)</Button>
    <Button
      HorizontalAlignment="Stretch">Button (Stretch)</Button>
  </StackPanel>
</phone:PhoneApplicationPage>

התכונה VerticalAlignment

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

• Bottom – הפקד יוצמד לתחתית השטח הנתון לו
• Top – הפקד יוצמד לראש השטח הנתון לו
• Center – הפקד יוצמד למרכז השטח הנתון לו
• Stretch – הפקד ימתח על כל השטח הנתון לו לגובה

בדוגמא הבאה ניתן לראות את האפשרויות השונות לתכונה VerticalAlignment:

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >: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}"
  Orientation="Portrait"
  SupportedOrientations="Portrait"
  >
  <StackPanel
    Orientation="Horizontal">
    <Button
      VerticalAlignment="Bottom">Bottom</Button>
    <Button
      VerticalAlignment="Top">Top</Button>
    <Button
      VerticalAlignment="Center">Center</Button>
    <Button
      VerticalAlignment="Stretch">Stretch</Button>
  </StackPanel>
</phone:PhoneApplicationPage>

התכונה Margin

התכונה Margin קובעת את המרחק בין הפקד הנוכחי לפקד שמכיל אותו. ניתן לקבוע מרחק שווה מכל כיוון או לקבוע לכל כיוון מרחק שונה.

התכונה Margin יכולה לקבל את ערכה בצורות שונות:

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

הדוגמא הבא ממחישה את כל האפשרויות הללו:

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >: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}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <Grid
    ShowGridLines="True">
    <Grid.RowDefinitions>
      <RowDefinition />
      <RowDefinition />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition />
      <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Button
      Grid.Row="0"
      Grid.Column="0"
      Margin="5"
      Content="5,5,5,5" />
    <Button
      Grid.Row="0"
      Grid.Column="1"
      Margin="15,5"
      Content="15,5,15,5" />
    <Button
      Grid.Row="1"
      Grid.Column="0"
      Margin="15,5,15,5"
      Content="15,5,15,5" />
    <Button
      Grid.Row="1"
      Grid.Column="1"
      Margin="15,15,5,5"
      Content="15,15,5,5" />
  </Grid>
</phone:PhoneApplicationPage>

התכונה Padding

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

בדוגמת הקוד הבאה ניתן לראות כי במקרה של השמת ערך Padding לכפתור נוצר רווח בין הכפתור לטקסט שהוא מכיל.

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  >="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  >:x="http://schemas.microsoft.com/winfx/2006/xaml"
  >:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >: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}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <StackPanel>
    <Button
      Content="button 1" />
    <Button
      Content="button 2"
      Padding="0,40,0,10" />
  </StackPanel>
</phone:PhoneApplicationPage>

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