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

מדריך Windows Phone – תצוגות Pivot ופנורמה

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

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

 

הוספת דף מסוג Pivot

דף מסוג Pivot הוא בסך הכל דף רגיל (PhoneApplicationPage) אשר הפקד הראשי בו הוא מסוג Pivot. פקד זה מסוגל להציג בדף אחד, מספר דפים של נתונים, בשיטה המזכירה שימוש ב TabControl באפליקציות חלונאיות.

לצורך הוספת דף Pivot נלחץ כפתור ימני בעכבר על שם הפרויקט, נבחר Add, ואז New Item ובחלון שיפתח נבחר Windows Phone Pivot Page:

מדריך Windows Phone – שימוש בדפים מיוחדים

 

לאחר ההוספה נקבל דף בעל פקד Pivot. תחת פקד זה ניתן להגדיר אובייקטים מסוג PivotItem שלכל אחד מהם יש כותרת ותוכן שונה. בעת הטעינה של הדף הפקד יציג תחילה את ה PivotItem הראשון, וניתן יהיה "לדפדף" ימינה ושמאלה בשביל להגיע לדפים האחרים.

בדוגמא להלן הגדרנו דף Pivot עם שלושה תתי-דפים, כאשר בכל תת-דף מוצגת תמונה אחרת:

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.PivotPage"
  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:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
  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="768"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Portrait"
  Orientation="Portrait"
  shell:SystemTray.IsVisible="True">

  <Grid
   x:Name="LayoutRoot"
   Background="Transparent">
    <controls:Pivot
     Title="MY APPLICATION">
      <controls:PivotItem
       Header="Koala">
        <Grid>
          <Image
           Source="/PhoneDemo;component/Images/Koala.jpg" />
        </Grid>
      </controls:PivotItem>

      <controls:PivotItem
       Header="Penguins">
        <Grid>
          <Image
           Source="/PhoneDemo;component/Images/Penguins.jpg" />
        </Grid>
      </controls:PivotItem>

      <controls:PivotItem
       Header="Jellyfish">
        <Grid>
          <Image
           Source="/PhoneDemo;component/Images/Jellyfish.jpg" />
        </Grid>
      </controls:PivotItem>
    </controls:Pivot>
  </Grid>

</phone:PhoneApplicationPage
>

 

הרצת התוכנית וטעינת דף ה Pivot תראה כך:

מדריך Windows Phone – שימוש בדפים מיוחדים

 

המעבר בין תתי-הדפים השונים נעשה ע"י החלקת האצבע ימינה ושמאלה. שימו לב שבכותרת של כל תת-דף ניתן לראות את שם הדף שנמצא מצד ימין, וזאת כדי לרמוז למשתמש שקיים שם תוכן.

נעיר כי לפקד Pivot יש תכונה בשם ItemsSource שבעזרתה ניתן ליצור דינמית את תתי-הדפים, בדומה ליצירה דינמית של אלמנטים ב ListBox. בנוסף לפקד Pivot יש אירוע SelectionChanged אשר מופעל בעת הצגת תת-עמוד.

 

הוספת דף מסוג Panorama

באופן דומה, דף מסוג Panorama הוא בסך הכל דף רגיל (PhoneApplicationPage) אשר הפקד הראשי בו הוא מסוג Panorama. גם פקד זה מסוגל להציג מספר דפים של נתונים בדף אחד, אם כי חווית המשתמש מעט שונה. התחושה של המשתמש בשימוש בפקד זה היא של צפייה בדף רחב יותר שניתן לגרור ימינה ושמאלה, ולא באוסף של תתי דפים כמו בפקד Pivot.

לצורך הוספת דף Panorama נלחץ כפתור ימני בעכבר על שם הפרויקט, נבחר Add, ואז New Item ובחלון שיפתח נבחר Windows Phone Panorama Page:

מדריך Windows Phone – שימוש בדפים מיוחדים

 

לאחר ההוספה נקבל דף בעל פקד Panorama. תחת פקד זה ניתן להגדיר אובייקטים מסוג PanoramaItem שלכל אחד מהם יש כותרת ותוכן שונה. בעת הטעינה של הדף הפקד יציג תחילה את ה PanoramaItem הראשון, וניתן יהיה "לדפדף" ימינה ושמאלה בשביל להגיע לדפים האחרים.

בשונה מפקד Pivot, הכותרת של פקד ה Panorama נפרשת על פני סך כל תתי-הדפים. בנוסף ניתן להגדיר Background לפקד ה Panorama, ואותו Background גם כן יפרש על פני כל תתי-הדפים.

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

בדוגמא להלן הגדרנו דף Pivot עם שלושה תתי-דפים, כאשר בכל תת-דף מוצגת תמונה אחרת. שימו לב להתנהגות הכותרת ותמונת הרקע. בנוסף שימוש שבעת צפייה בתת-דף אחד ניתן לראות חלק מהתוכן של תת-הדף השני:

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.PanoramaPage"
  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:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
  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}"
  SupportedOrientations="Portrait"
  Orientation="Portrait"
  shell:SystemTray.IsVisible="False">

  <Grid
   x:Name="LayoutRoot">
    <controls:Panorama
     Title="my application">
      <controls:Panorama.Background>
        <ImageBrush
         ImageSource="/PhoneDemo;component/Images/PanoramaBG.png" />
      </controls:Panorama.Background>

      <controls:PanoramaItem
       Header="Koala">
        <Grid>
          <Image
           Source="/PhoneDemo;component/Images/Koala.jpg" />
        </Grid>
      </controls:PanoramaItem>

      <controls:PanoramaItem
       Header="Penguins">
        <Grid>
          <Image
           Source="/PhoneDemo;component/Images/Penguins.jpg" />
        </Grid>
      </controls:PanoramaItem>

      <controls:PanoramaItem
       Header="Jellyfish">
        <Grid>
          <Image
           Source="/PhoneDemo;component/Images/Jellyfish.jpg" />
        </Grid>
      </controls:PanoramaItem>
    </controls:Panorama>
  </Grid>

</phone:PhoneApplicationPage
>

הרצת התוכנית וטעינת דף ה Panorama תראה כך:

מדריך Windows Phone – שימוש בדפים מיוחדים

arikp, מכללת סלע

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

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

תגובות למאמר



עוד במדריך

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

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