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

מדריך Windows Phone – הוספת Application Bar

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

לכל דף באפליקציה ב Windows Phone ניתן להגדיר פס בתחתית המסך המכיל עד 4 כפתורים, וכן אוסף פעולות תפריט, רכיב זה נקרא Application Bar. בפרק זה נלמד כיצד לעבוד אתו.

 

הוספת Application Bar

בשביל להוסיף Application Bar לדף כל שנדרש לעשות הוא להוסיף אלמנט מסוג ApplicationBar תחת התכונה ApplicationBar של PhoneApplicationPage, כמו בדוגמא הבאה:

<phone:PhoneApplicationPage
  x:Class="MorePhoneDemo.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:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  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="696"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="PortraitOrLandscape"
  Orientation="Portrait"
  shell:SystemTray.IsVisible="True">
  <StackPanel
   Background="Transparent">
  </StackPanel>
  <phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar
     IsVisible="True"
     IsMenuEnabled="True">
      <shell:ApplicationBarIconButton
       IconUri="/Images/App.Blog.png"
       Text="Button 1" />
      <shell:ApplicationBarIconButton
       IconUri="/Images/App.Twitter.png"
       Text="Button 2" />
      <shell:ApplicationBar.MenuItems>
        <shell:ApplicationBarMenuItem
         Text="MenuItem 1" />
        <shell:ApplicationBarMenuItem
         Text="MenuItem 2" />
      </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
  </phone:PhoneApplicationPage.ApplicationBar
>
</
phone:PhoneApplicationPage
>

בדוגמא זו הוספנו שני כפתורים ב Application Bar וכן שני פריטים בתפריט.

כדי להוסיף תמונות לכפתורים, יש ראשית להוסיף את התמונות לפרויקט ע"י בחירת Add, ואז Exiting Item ואז בחירת התמונות לכפתורים:

מדריך Windows Phone – הוספת Application Bar

לאחר מכן חשוב לסמן את התמונות שנוספו ולשנות להם את ה Build Action מ Resource ל Content. סעיף זה חשוב ביותר שכן התמונות לא יטענו בכל מקרה אחר!

מדריך Windows Phone – הוספת Application Bar

 

תוצאת הרצת הקוד הנ"ל הינה:

מדריך Windows Phone – הוספת Application Bar

ואם נלחץ על שלושת הנקודות בתחתית המסך בצד ימין נקבל:

מדריך Windows Phone – הוספת Application Bar

 

כיצד להגיב ללחיצות ב Application Bar?

כדי שהוספת ה Application Bar תהיה שימושית נרצה לדעת כיצד להגיב לאירוע לחיצה על כפתור או תפריט ב Application Bar.

לצורך כך יש להירשם לאירוע Click של הכפתור או התפריט באופן הבא:

<phone:PhoneApplicationPage
  x:Class="MorePhoneDemo.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:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  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="696"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="PortraitOrLandscape"
  Orientation="Portrait"
  shell:SystemTray.IsVisible="True">
  <StackPanel
   Background="Transparent">
  </StackPanel>
  <phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar
     IsVisible="True"
     IsMenuEnabled="True">
      <shell:ApplicationBarIconButton
       IconUri="/Images/App.Blog.png"
       Text="Button 1"
       Click="ApplicationBarIconButton_Click" />
      <shell:ApplicationBarIconButton
       IconUri="/Images/App.Twitter.png"
       Text="Button 2" />
      <shell:ApplicationBar.MenuItems>
        <shell:ApplicationBarMenuItem
         Text="MenuItem 1"
         Click="ApplicationBarMenuItem_Click" />
        <shell:ApplicationBarMenuItem
         Text="MenuItem 2" />
      </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
  </phone:PhoneApplicationPage.ApplicationBar
>
</
phone:PhoneApplicationPage
>

והנה הקוד שמגיב לאירועים:

using System.Windows;
using
Microsoft.Phone.Controls;

namespace
MorePhoneDemo
{
 
public partial class MainPage : PhoneApplicationPage
  {
   
// Constructor
    public
MainPage()
    {
      InitializeComponent();
    }

   
private void ApplicationBarIconButton_Click(object sender, System.EventArgs
e)
    {
     
MessageBox.Show("button clicked"
);
    }

   
private void ApplicationBarMenuItem_Click(object sender, System.EventArgs
e)
    {
     
MessageBox.Show("menu clicked"
);
    }

  }
}

 

כעת, אם נריץ את התוכנית ונלחץ על התפריט הראשון נקבל:

מדריך Windows Phone – הוספת Application Bar

arikp, מכללת סלע

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

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

תגובות למאמר



עוד במדריך

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

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