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

מדריך WPF – סידור פקדים: StackPanel & WrapPanel

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

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

בפרק זה נלמד על הפאנלים StackPanel ו WrapPanel.

הפקד StackPanel

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

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

<Window x:Class="StackPanelDemo.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow"
       Height="350"
       Width="525">
  <StackPanel>
    <Button Content="button 1" />
    <Button Content="button 2" />
    <Button Content="button 3" />
  </StackPanel
>
</
Window
>

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

מדריך WPF – סידור פקדים: StackPanel & WrapPanel

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

התכונה Orientation

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

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

<Window x:Class="StackPanelDemo.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow"
       Height="350"
       Width="525">
  <StackPanel Orientation="Horizontal">
    <Button Content="button 1" />
    <Button Content="button 2" />
    <Button Content="button 3" />
  </StackPanel
>
</
Window
>

והתוצאה

מדריך WPF – סידור פקדים: StackPanel & WrapPanel

 

הפקד WrapPanel

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

בקטע הקוד הבא אנחנו מגדירים 5 כפתורים בתוך WrapPanel:

<Window x:Class="WrapPanelDemo.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow"
       Height="350"
       Width="525">
  <WrapPanel>
    <Button Content="button 1" />
    <Button Content="button 2" />
    <Button Content="button 3" />
    <Button Content="button 4" />
    <Button Content="button 5" />
  </WrapPanel
>
</
Window
>

ומקבלים את התוצאה

מדריך WPF – סידור פקדים: StackPanel & WrapPanel

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

מדריך WPF – סידור פקדים: StackPanel & WrapPanel

כלומר שני הכפתורים האחרונים גלשו לשורה הבאה מאחר ולא היה להם מקום בשורה הראשונה.

התכונה Orientation

גם ל WrapPanel יש את התכונה Orientation והיא עובדת באותה צורה. נעיר רק כי אם משתמשים בסידור פקדים מאונך (Vertical), אזי הגלישה תיצור עמודה חדשה. בנוסף, כדאי לדעת שברירת המחדל של התכונה Orientation של WrapPanel היא דווקא Horizontal.

בקטע הקוד הבא אנו יכולים לראות דוגמא לשימוש בWrapPanel מאונך עם גלישה לעמודות:

<Window x:Class="WrapPanelDemo.MainWindow"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       Title="MainWindow"
       Height="350"
       Width="525">
  <WrapPanel Orientation="Vertical">
    <Button Content="button 1" />
    <Button Content="button 2" />
    <Button Content="button 3" />
    <Button Content="button 4" />
    <Button Content="button 5" />
  </WrapPanel
>
</
Window
>

והתוצאה

מדריך WPF – סידור פקדים: StackPanel & WrapPanel

arikp, מכללת סלע

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

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

תגובות למאמר



עוד במדריך

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

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