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

פאנל (Panel) הוא פקד אשר יכול להכיל מספר פקדים. ישנם מספר פאנלים בXAML, כאשר ההבדל בין הפאנלים הוא בצורה שבה כל פאנל מסדר את הפקדים שהוא מכיל.

בפרק זה נלמד על הפאנל StackPanel.

הפקד StackPanel

הפקד StackPanel הוא פאנל שמסדר את הפקדים שבתוכו בערימה, כלומר אחד אחרי השני.

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

<phone:PhoneApplicationPage
  x:Class="StackPanelDemo.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"
  >:shell="clr-namespace:Microsoft.Phone.Shell;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 Content="button 1" />
    <Button Content="button 2" />
    <Button Content="button 3" />
  </StackPanel>
 
</phone:PhoneApplicationPage>

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

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

התכונה Orientation

לפקד StackPanel יש תכונה בשם Orientation שמאפשרת לקבוע האם סידור הפקדים יהיה מאונך (Vertical) או מאוזן (Horizontal). ברירת המחדל היא מאונך.

נראה כיצד לשנות תכונה זו למצב מאוזן:

<phone:PhoneApplicationPage
  x:Class="StackPanelDemo.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"
  >:shell="clr-namespace:Microsoft.Phone.Shell;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 Orientation="Horizontal">
    <Button Content="button 1" />
    <Button Content="button 2" />
    <Button Content="button 3" />
  </StackPanel>
 
</phone:PhoneApplicationPage>

והתוצאה