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

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

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

Code

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

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

       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: 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">

    <!--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>

    <!--TitlePanel contains the name of the application and page title-->

        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">

            <TextBlock x:Name="ApplicationTitle" Text="My APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>

        </StackPanel>

     <!--ContentPanel - place additional content here-->

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

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

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

            <TextBlock Name="statusText" HorizontalAlignment="Left" VerticalAlignment="Bottom" />

            <TextBlock Name="errorText" HorizontalAlignment="Right" VerticalAlignment="Bottom" TextWrapping="Wrap" />

        </Grid>

    </Grid>

    <!--Sample code showing usage of ApplicationBar-->

    <!--<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

• How to make a Twitter Application using Windows Phone 7
• Installing Application from Marketplace
• Application Bar in Windows Phone 7 Via WCF Service
• Navigation using Windows Phone 7 Silverlight
• Building your first Windows Phone 7 Application Using XNA 4.0