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

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

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

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

הוספת דף חדש

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

image

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  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:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns: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));
    }
  }
}

 

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

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

 

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

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

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

<phone:PhoneApplicationPage
  x:Class="PhoneDemo.MainPage"
  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:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns: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
>

 

והתוצאה:

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

 

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

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

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

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

arikp, מכללת סלע

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

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

תגובות למאמר



עוד במדריך

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

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