In this article we will discuss about how to create ApplicationBar in Windows Phone 7. I will create a simple movie application which will have Fast Forward, Play, Pause and Rewind in the application bar.

The ApplicationBar is equivalent of menu or toolbar of Windows Program. The Application Bar and its related class (ApplicationBarIconButton and ApplicationBarMenuItem) are defined in the Microsoft.Phone.Shell namespace.

The ApplicationBar always appears at the bottom of the page when the phone is held upright and stays in the location even though phone is turned upside down and sideways.

The Application Bar can contain maximum four buttons. The images used in the buttons of Application Bar should be 48X48 pixels. The actual image should be white and occupy a 26 pixel square area  in the middle of the 48x48 image.

Let's write some code.

Step 1: Create a Windows Phone Application project with Silverlight for Windows Phone as installed templates.

Step 2: Creata title of the application in MainPage.xaml.

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
   <TextBlock x:Name="ApplicationTitle" Text="Movie APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
</StackPanel>

Step 3: Add a MediaElement and two textboxes in the Grid. One textbox for status and other one is to display error message.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <MediaElement Name="mediaElement" Source="http://www.charlespetzold.com/Media/Walrus.wmv" AutoPlay="False"MediaOpened="OnMediaElementMediaOpened" MediaFailed="OnMediaElementMediaFailed" CurrentStateChanged="OnMediaElementCurrentStateChanged" />
   <TextBlock Name="statusText" HorizontalAlignment="Left" VerticalAlignment="Bottom" />
   <TextBlock Name="errorText" HorizontalAlignment="Right" VerticalAlignment="Bottom" TextWrapping="Wrap" />
</Grid>

Step 4: By default ApplicationBar is commented in the MainPage.xaml. Let's place below code in the MainPage.xaml.

Step 5: Change the supported orientation from Portrait to PortraitOrLandscape.

SupportedOrientations="PortraitOrLandscape"

Step 6: Assign x:Name attributes to corresponding ApplicationBarIconButton

public MainPage()
{
   InitializeComponent();

   // Re-assign names already in the XAML file
   appbarRewindButton = this.ApplicationBar.Buttons[0] as ApplicationBarIconButton;
   appbarPlayButton = this.ApplicationBar.Buttons[1] as ApplicationBarIconButton;
   appbarPauseButton = this.ApplicationBar.Buttons[2] as ApplicationBarIconButton;
   appbarEndButton = this.ApplicationBar.Buttons[3] as ApplicationBarIconButton;
}

 

Step 7: ApplicationBar buttons will have below one line code for each button.

void OnAppbarRewindClick(object sender, EventArgs args)
{
   mediaElement.Position = TimeSpan.Zero;
}

void OnAppbarPlayClick(object sender, EventArgs args)
{
   mediaElement.Play();
}

void OnAppbarPauseClick(object sender, EventArgs args)
{
   mediaElement.Pause();
}

void OnAppbarEndClick(object sender, EventArgs args)
{
   mediaElement.Position = mediaElement.NaturalDuration.TimeSpan;
}

Step 8: The below code will enable or disable the button based on the state of the media element.

void OnMediaElementMediaFailed(object sender, ExceptionRoutedEventArgs args){
   errorText.Text = args.ErrorException.Message;
}

void OnMediaElementMediaOpened(object sender, RoutedEventArgs args)
{
   appbarRewindButton.IsEnabled = true;
   appbarEndButton.IsEnabled = true;
}

void OnMediaElementCurrentStateChanged(object sender, RoutedEventArgs args)
{
   statusText.Text = mediaElement.CurrentState.ToString();
   if (mediaElement.CurrentState == MediaElementState.Stopped || mediaElement.CurrentState == MediaElementState.Paused)
   {
      appbarPlayButton.IsEnabled = true;
      appbarPauseButton.IsEnabled = false;
   }
   else if (mediaElement.CurrentState == MediaElementState.Playing)
   {
      appbarPlayButton.IsEnabled = false;
      appbarPauseButton.IsEnabled = true;
   }
}

Step 9: To play the video we need to add capability in the WMAppManifest.xaml.

<Capability Name="ID_CAP_MEDIALIB"/>

Now run the program below screen will appear.

 

This ends the article of ApplicationBar in Windows Phone 7