מדריך Windows Phone – הוספת Application Bar
לכל דף באפליקציה ב Windows Phone ניתן להגדיר פס בתחתית המסך המכיל עד 4 כפתורים, וכן אוסף פעולות תפריט, רכיב זה נקרא Application Bar. בפרק זה נלמד כיצד לעבוד אתו.
הוספת Application Bar
בשביל להוסיף Application Bar לדף כל שנדרש לעשות הוא להוסיף אלמנט מסוג ApplicationBar תחת התכונה ApplicationBar של PhoneApplicationPage, כמו בדוגמא הבאה:
<phone:PhoneApplicationPage
x:Class="MorePhoneDemo.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"
>:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
>:d="http://schemas.microsoft.com/expression/blend/2008"
>: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 ואז בחירת התמונות לכפתורים:
לאחר מכן חשוב לסמן את התמונות שנוספו ולשנות להם את ה Build Action מ Resource ל Content. סעיף זה חשוב ביותר שכן התמונות לא יטענו בכל מקרה אחר!
תוצאת הרצת הקוד הנ"ל הינה:
ואם נלחץ על שלושת הנקודות בתחתית המסך בצד ימין נקבל:
כיצד להגיב ללחיצות ב Application Bar?
כדי שהוספת ה Application Bar תהיה שימושית נרצה לדעת כיצד להגיב לאירוע לחיצה על כפתור או תפריט ב Application Bar.
לצורך כך יש להירשם לאירוע Click של הכפתור או התפריט באופן הבא:
<phone:PhoneApplicationPage
x:Class="MorePhoneDemo.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"
>:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
>:d="http://schemas.microsoft.com/expression/blend/2008"
>: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");
}
}
}
כעת, אם נריץ את התוכנית ונלחץ על התפריט הראשון נקבל:
תגובות בפייסבוק