Application Bar Inside Video Application in Windows Phone 7

Introduction

In this article we will create an Application Bar in Windows Phone 7 using a movie application which will have Play, Fast Forward, Pause and Rewind. The Application Bar is the equivalent of a toolbar in a Windows program. The Application Bar always appears at the bottom of the page. In this article we are showing four buttons in the ApplicationBar. The images used in the buttons of the Application Bar should be 48X48 pixels. The Application Bar and its related class (ApplicationBarIconButton and ApplicationBarMenuItem) are defined in the Microsoft.Phone.Shell namespace. The Application Bar can contain a maximum of four buttons. Change the Build Action property of each image to Content from Resource. The image won't appear if the Build Action property is Resource.

Step 1: In this step first of all we have to open a Windows Phone application.

Go to Visual Studio 2010

File->New->Project

Select the template named as Silverlight for Windows Phone

Select the Windows Phone application

Give it a name as you want.

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

Code

Step 3: Add a MediaElement and two TextBoxes in Grid. One TextBox to status and other for display to error message.

Code

<MediaElement Name="mediaElement" Source="Wildlife.wmv" AutoPlay="true"

MediaOpened="OnMediaElementMediaOpened" MediaFailed="OnMediaElementMediaFailed" CurrentStateChanged="OnMediaElementCurrentStateChanged" />

</Grid>

Step 4: Now customize the MainPage.xaml code according to our need; the code is given below.

Code

<phone:PhoneApplicationPage

x:Class="Windows_Phone_7___App_Bar.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">

<Grid.RowDefinitions>

</Grid.RowDefinitions>

</StackPanel>

<MediaElement Name="mediaElement" Source="Wildlife.wmv" AutoPlay="true"

MediaOpened="OnMediaElementMediaOpened" MediaFailed="OnMediaElementMediaFailed" CurrentStateChanged="OnMediaElementCurrentStateChanged" />

</Grid>

<!--<phone:PhoneApplicationPage.ApplicationBar>

<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">

<shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>

<shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.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.ApplicationBar>

<shell:ApplicationBar>

<shell:ApplicationBarIconButton x:Name="appbarRewindButton" IconUri="Icons/rew.png" Text="rewind" IsEnabled="False" Click="OnAppbarRewindClick" />

<shell:ApplicationBarIconButton x:Name="appbarPlayButton" IconUri="Icons/play.png" Text="play" IsEnabled="False" Click="OnAppbarPlayClick" />

<shell:ApplicationBarIconButton x:Name="appbarPauseButton" IconUri="Icons/pause.png" Text="pause" IsEnabled="False" Click="OnAppbarPauseClick" />

<shell:ApplicationBarIconButton x:Name="appbarEndButton" IconUri="Icons/ff.png" Text="to end" IsEnabled="False" Click="OnAppbarEndClick" />

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

</phone:PhoneApplicationPage>

Step 5: The final source code of the MainPage.xaml.cs file is:

Code

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Animation;

using System.Windows.Shapes;

using Microsoft.Phone.Controls;

using Microsoft.Phone.Shell;

namespace Windows_Phone_7___App_Bar

{

public partial class MainPage : PhoneApplicationPage

{

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;

}

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;

}

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 6: Press F5 to run the application.

Resources