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

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

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

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.PivotPage"
  >="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"
  >:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >: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 תראה כך:

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

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

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

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

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

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

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.PanoramaPage"
  >="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"
  >:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
  >: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}"
  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 תראה כך: