DevStudent

Windows Phone 8 Application Bar

Application bar is simply called as app bar which contains row of icons at the bottom of the phone screen. It is used to display most commonly used tasks.
We can create it directly using GUI properties
It should be used insead of creating new menus.
It can have upto 4 buttons and optional menu which comes out when user swipes up the menu.
It will be displayed on the side of screen in landscape mode using builtin animations when user switch the orientation.
We can generate events for icons and menu items inside app bar to write C# code to perform actions.
IconUrl is the property used to display icon images.
Opacity property is used to make the app bar transparent if its value is less than 1. If opacity is 1 displayed page is occupies the rest of the screen which is not covered by appbar.
In the below example there are two app bar icons and two menu items. Items are displayed out When the user click on three dots present on appbar.
When user click on any icon or menu item a message box will be displayed using C# code.



Example of an app bar with icons, menu items with events in MainPage.xaml page

Create an windows phone app which comes with MainPage.xaml. In the xaml code page add app bar code as shown in the below

<phone:PhoneApplicationPage
x:Class="PhoneApp1.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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="Main Page" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

</Grid>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar Mode="Default" Opacity="1.0" IsMenuEnabled="True" IsVisible="True">

<shell:ApplicationBarIconButton Click="Save_Click" IconUri="/Images/save.png" Text="save" />
<shell:ApplicationBarIconButton Click="Settings_Click" IconUri="/Images/settings.png" Text="settings" />

<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Click="MenuItem1_Click" Text="menu item 1" />
<shell:ApplicationBarMenuItem Click="MenuItem2_Click" Text="menu item 2" />
</shell:ApplicationBar.MenuItems>

</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>

C# code to handle events of element present in app bar

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;
using PhoneApp1.Resources;

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

private void Save_Click(object sender, EventArgs e)
{
MessageBox.Show("Save button works!");
}

private void Settings_Click(object sender, EventArgs e)
{
MessageBox.Show("Settings button works!");
}

private void MenuItem1_Click(object sender, EventArgs e)
{
MessageBox.Show("Menu item 1 works!");
}

private void MenuItem2_Click(object sender, EventArgs e)
{
MessageBox.Show("Menu item 2 works!");
}
}
}