מדריך Windows Phone – הוספת דפים חדשים

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

הוספת דף חדש

כדי להוסיף דף חדש לאפליקציה נלחץ כפתור ימני בעכבר על שם הפרויקט ברשימת הקבצים שמשמאל ונבחר Add ואז New Item…

בדף שיפתח ניתן לבחור את סוג הדף שנרצה, האפשרויות הן:

• Windows Phone Portrait Page – דף רגיל המותאם לצפייה אנכית
• Windows Phone Landscape Page – דף רגיל המותאם לצפייה אופקית
• Windows Phone Panorama Page – דף מסוג Panorama, ילמד בהמשך המדריך.
• Windows Phone Pivot Page – דף מסוג Pivot, ילמד במשך המדריך.

אנו נבחר בדף רגיל המותאם לצפייה אנכית (Portrait), ניתן לו שם ולנץ על כפתור Add:

כעת יפתח לנו הדף החדש שהוספנו:

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

ניווט באמצעות קוד

ראשית, קצת רקע על ניווט לדפים באפליקציית Windows Phone.
Silverlight for Windows Phone מספק לנו את המחלקות PhoneApplicationFrame ו PhoneApplicationPage לצורך ניווט קל ונוח בין דפים באפליקציה. PhoneApplicationPage מייצג דף בודד ומכיל בתוכו את תוכן הדף. PhoneApplicationFrame מכיל את אוסף הדפים באפליקציה ומספק פונקציות לניווט בין הדפים.

כדי לנווט באמצעות קוד נוסיף כפתור למסך הראשי:

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.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"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  >:local="clr-namespace:PhoneDemo"
  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="navigate using code"
      Click="Button_Click"
      />
  </StackPanel>
</phone:PhoneApplicationPage>

כל דף מכיל את התכונה NavigationService המאפשרת לנו לנווט לחלקים אחרים באפליקציה ע"י שימוש בפונקציה Navigate, באופן הבא:

using System;
using System.Windows;
using Microsoft.Phone.Controls;
 
namespace PhoneDemo
{
  public partial class MainPage : PhoneApplicationPage
  {
    public MainPage()
    {
      InitializeComponent();
    }
 
    private void Button_Click(object sender, RoutedEventArgs e)
    {
      this.NavigationService.Navigate(new Uri("/SecondPage.xaml", UriKind.Relative));
    }
  }
}

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

ניווט באמצעות פקד HyperlinkButton

על הפקד HyperlinkButton כבר למדנו בפרק על פקדי דפדפן. כעת נראה כיצד הפקד הזה עוזר לנו לנווט לדף אחר באפליקציה שלנו.

בדוגמת הקוד הבא ניתן לראות כמה קל השימוש בפקד זה לצורך דפדוף פנימי בתוך האפליקציה. אין צורך בקוד #C:

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.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"
  >:d="http://schemas.microsoft.com/expression/blend/2008"
  >:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  >:local="clr-namespace:PhoneDemo"
  mc:Ignorable="d"
  d:DesignWidth="480"
  d:DesignHeight="800"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  Orientation="Portrait"
  SupportedOrientations="Portrait">
  <StackPanel>
    <HyperlinkButton
      Content="navigate to second page"
      NavigateUri="/SecondPage.xaml" />
  </StackPanel>
</phone:PhoneApplicationPage>

והתוצאה:

שימוש בכפתור Back

לכל מכשיר Windows Phone יש כפתור Back המאפשר לחזור אחורנית לדפים קודמים באפליקציה או לאפליקציות קודמות.

כאשר אנו פותחים דף חדש כפתור Back אוטומטית מספק לנו פונקציונליות של חזרה לדף הקודם. אין צורך לטפל בכך בנפרד.

אם בכל זאת נרצה, נוכל להירשם לאירוע BackKeyPress של הדף בשביל לעשות פעולות מסוימות. לדוגמא אולי נרצה שבלחיצה על כפתור Back להחזיר את המשתמש מספר דפים אחורנית. שימו לב, אין למנוע מהמשתמש חזרה.