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

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

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

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

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

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

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

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

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

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

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

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

התכונה HorizontalAlignment

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

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

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

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

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

התכונה VerticalAlignment

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

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

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

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

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

התכונה Margin

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

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

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

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

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

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


התכונה Padding

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

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

<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}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <StackPanel>
    <Button
     Content="button 1" />
    <Button
     Content="button 2"
      Padding="0,40,0,10" />
  </StackPanel
>
</
phone:PhoneApplicationPage
>

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

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

arikp, מכללת סלע

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

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

תגובות למאמר



עוד במדריך

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

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