Application Bar In Windows Phone

Application Bar

• Application Bar is a pop up panel at the bottom of the application page.
• Application Bar contains four buttons, which allows to perform some action.
• Application Bar can not be hidden by the keyboard or other elements. when we open application bar, it will be covered entire page with transparency is set 1, then the application bar covers the screen, using transparency effect.
• Application Bar to provide users with quick access to an application’s most common task.

Application Bar UI:

• By default application bar is a row of icon buttons and ellipsis along the bottom of the application.
• The application bar has built in animation that is displayed as the menu is shown or hidden.
• Application Bar automatically adjusts when the phone changes orientation.
• if application bar in minimize, it’s looks like

• if we click on ellipsis on application bar

Menu Items:

• We can add one or more text based menu items.
• The menu items are used for application actions that are less frequently used.
• The text of the menu items is automatically converted to all lower-case characters.

• If we add menu items in application bar.

Application Bar Syntax:

<phone:PhoneApplicationPage.ApplicationBar>

   <shell:ApplicationBar>         

    <shell:ApplicationBarIconButton Text="Play" IconUri="[Path]" />   

</shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

Menu Item syntax:

<phone:PhoneApplicationPage.ApplicationBar>

        <shell:ApplicationBar>           

            <shell:ApplicationBar.MenuItems>

                <shell:ApplicationBarMenuItem Text="About"/>

                <shell:ApplicationBarMenuItem Text="Help"/>                

            </shell:ApplicationBar.MenuItems>            

        </shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

Application bar properties:

• Mode : Specifies the size of the Application Bar when it first appears on a page, default or minimize.
• Opacity : opacity values are between 0.0 and 1.0. The opacity of the application bar can be adjusted, but we recommend that you use only values 0.0, 0.5 and 1.0.
• 0.0 means the Application Bar is completely transparent, the Application Bar laid over the page, so application page is not resized.
• 0.5 means the Application Bar is partially transparent, the Application Bar laid over the page,  so application page is not resized.
• 1.0 means the Application Bar is completely not transparent, Application Bar covers the current page, the Application page is resized to the area of the screen not occupied by Application Bar.
• BackgroundColor : We can set the background color to Application Bar.
• ForegroundColor : The foreground color of Application Bar, this color affected to icon buttons, labels, and the menu item text.
• IsMenuEnabled : it’s a boolean values , it’s indicates whether user can see the menu items when they expand the Application Bar.
• IsVisible : Indicates whether the Application Bar is visible.

Guidelines

• Use the Application Bar instead of creating your own menu system.
• Use default system theme colors for the application bar, if we use custom colors for application bar can affect the display quality of the button icons.
• Avoid using long text for menu items because that text will run off screen. The recommended maximum length is between 14 to 20 characters.
• Avoid using more than five menu items on an Application Bar, because it will force to user to scroll.

Global Application Bar

• Global Application Bar can be reused on multiple pages in our application.
• In App.xaml page, we need to create application bar as a static resource.

Syntax:

<Application.Resource>

//Application Bar

</Application.Resource>

Demo:

Create an application for Application Bar Demo

Create a new project by selecting File menu > New Project or short-cut keys Ctrl+Shift+N.

Choose Windows Phone Template, and change project name as "AppBarDemo"

MainPage.xaml:

• We can create page level Application Bar , Add bellow code in PhoneApplicationPage

<phone:PhoneApplicationPage.ApplicationBar>

        <shell:ApplicationBar>

            <shell:ApplicationBarIconButton Text="Previous" IconUri="/Assets/transport.rew.png" />

            <shell:ApplicationBarIconButton Text="Play" IconUri="/Assets/transport.play.png" />

            <shell:ApplicationBarIconButton Text="Next" IconUri="/Assets/transport.ff.png" />

            <shell:ApplicationBar.MenuItems>

                <shell:ApplicationBarMenuItem Text="About"/>

                <shell:ApplicationBarMenuItem Text="Help"/>                

            </shell:ApplicationBar.MenuItems>            

        </shell:ApplicationBar>

</phone:PhoneApplicationPage.ApplicationBar>

App.xaml:

• We can create App Bar for application level (global application bar),  we need add Application as a resource in App.xaml. Add bellow code in App.xaml page

 <Application.Resources>

         <shell:ApplicationBar x:Key="globalAppBar" IsMenuEnabled="True">

            <shell:ApplicationBarIconButton Text="Previous" IconUri="/Assets/transport.rew.png" />

            <shell:ApplicationBarIconButton Text="Play" IconUri="/Assets/transport.play.png" />

            <shell:ApplicationBarIconButton Text="Next" IconUri="/Assets/transport.ff.png" />

            <shell:ApplicationBar.MenuItems>

                <shell:ApplicationBarMenuItem Text="About"/>

                <shell:ApplicationBarMenuItem Text="Help"/>

            </shell:ApplicationBar.MenuItems>

        </shell:ApplicationBar>        

 </Application.Resources>

ReuseAppBar.xaml:

Add page to existing application, that you can reuse App Bar ( i.e.
ReuseAppBar.xaml )

Add bellow code in PhoneApplicationPage

                    ApplicationBar="{StaticResource globalAppBar}"

Get source code for AppBarDemo

Page Orientation In Windows Phone

Orientation:

• Windows Phone supports portrait and landscape screen orientations.
• Types of Orientations
• Portrait
• Landscape Left
• Landscape Right

Portrait :

• Portrait is a vertical orientation of the device.
• By default, silverlight applications runs portrait orientation.
• In Portrait orientation, the page oriented vertically so that the height of the page is greater than its width.

Landscape :

• Landscape is a horizontal orientation of the device.
• By default, XNA application runs landscape orientation.
• In Landscape orientation, the page oriented horizontally so that width of the page is greater than its height.

• There is no way to specify that a page supports only landscape left or only landscape right. we have the possibility to support both or no landscape mode.

• We can simply rotate device to initiate a change orientation to another.

In emulator, we can switch the screen orientation by clicking the buttons in the emulator Tool bar.

• The orientation buttons have rectangles with arrows that indicates the orientation change.

                                             

• We can specify the supported orientation on page level.

• we can support different orientation on a page level, the value can be specified in code or as an attribute of the PhoneApplicationPage in XAML.

SupportedOrientations=”Portrait”

• Possible values of SupportedOrientations property
• Portrait
• Landscape
• PortraitOrLandscape

• We can specify orientations manually in code.

SupportedOrientations =SupportedOrientations.Portrait; SupportedOrientations=SupportedOrientations.Landscape; SupportedOrientations=SupportedOrientations.PortraitOrLandscape;

• Page Orientation change event:
• In this event, we can override functionality or add more functionality the page orientation.

eg: Change the size of the page elements.

Syntax:

protected override void OnOrientationChanged(OrientationChangedEventArgs e)

{

//write code here for override or add functionality

base.OnOrientationChanged(e);

}

Scrolling Technique:

• Avoid fixed sizes of elements, set the element's width using “*” (asterisk) or “AUTO”, these are handles elements sizes in orientation (horizontal).
• Add Scroll viewers for containers like the stackpanel, or use elements that come with built-in scrolling capabilities, this is handles vertical size.
• The scrolling technique uses a StackPanel or Grid layout controls with in Scrollviewer control.
• Scrollviewer control enables the scroll, If StackPanel or Grid  control not fit in page.

• The grid layout technique positions UI elements in a Grid. When an orientation change occurs, programmatically change the elements positions.
• Grid layout technique, perform following steps
• Change the SupportedOrientations property of the page to PortraitOrLandscape.
• Use Grid for the content panel.
• Create an OrientationChanged event handler and add code to reposition elements in the Grid.

Demo:

Create an application for Orientation Demo

Create a new project by selecting File menu > New Project or short-cut keys Ctrl+Shift+N.

Choose Windows Phone Template, and change project name as "Orientation Demo"

MainPage.xaml:

• By default page supported orientation is Portrait.

SupportedOrientations="Portrait"

• I have changed SupportedOrientation Portrait to PortraitOrLandscape, Then only page supported orientations.

SupportedOrientations="PortraitOrLandscape

• I have created three rows for Content Panel Grid then I have added three Images each one for a row in MainPage.xaml.
• Right click on project and create folder with name Images.
• Add images to Images folder by right click on Images folder choose add-> add existing items.

This demo goal is displays images vertically in Portrait orientation, and displays horizontally in Landscape orientation.

• Add following code in MainPage.xaml

 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> <Grid.RowDefinitions> <RowDefinition Height="AUTO"/> <RowDefinition Height="AUTO"/> <RowDefinition Height="AUTO"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="AUTO"/> <ColumnDefinition Width="AUTO"/> <ColumnDefinition Width="AUTO"/> </Grid.ColumnDefinitions> <Image Name="image1" Source="/Images/1.png" Height="200"/> <Image Name="image2" Source="/Images/2.png" Height="200" Grid.Row="1"/> <Image Name="image3" Source="/Images/3.png" Height="200" Grid.Row="2"/> </Grid>

• After added images into MainPage.xaml , its look like following image.
• We can change controls positions programmatically in a GRID, when orientation changes occurs.
• Create OrientationChanged event handler in a PAGE. When device or emulator changes orientation OrientationChanged event handler will be fired.
• In Landscape, I have displaying images in a single row and three columns.

Add following code in OrientaionChanged event handler.

private void PhoneApplicationPage_OrientationChanged(object sender, OrientationChangedEventArgs e)
        {
            if ((e.Orientation & PageOrientation.Portrait) == PageOrientation.Portrait)
            {
                Grid.SetRow(image1, 0);
                Grid.SetRow(image2, 1);
                Grid.SetRow(image3, 2);
                Grid.SetColumn(image1, 0);
                Grid.SetColumn(image3, 0);
                Grid.SetColumn(image2, 0);
            }
            else
            {
                Grid.SetRow(image1, 0);
                Grid.SetRow(image2, 0);
                Grid.SetRow(image3, 0);

                Grid.SetColumn(image1, 0);
                Grid.SetColumn(image2, 1);
                Grid.SetColumn(image3, 2);
            }

        }

Portrait

Landscape

Get source code for Orientation

How to create application in windows phone ?

This article helps you to create basic application in windows phone 7/8.

Before creating application we need (pre requirements) development tools like Windows Phone SDK 7/8. I have already shared pre-requirements in previous article. 

Create First Application:

Create first windows phone project using following steps.

1. Launch Visual Studio Express 2010/2012.
2. Create a new project by selecting File menu > New Project or short-cut keys Ctrl+Shift+N.
3. Expand template Visual C# or Visual Basic  from the list of Templates on the New Project window left and select Windows Phone template.
4. Once you select Windows Phone template, it will shows list of available built in project templates on right side of New Project window.You can choose your template depends on your requirement. I am choosing Windows Phone App template for first application.
5. Final step for creating project is specify Project Name and Location at the bottom of New Project window. I have created project with name "MyFirstApp" and location is optional by default project directory created in installed location or you can change project directory location.

   

   MyFirstApp
6. Click OK on New Project window, it will open New Windows Phone Application dialog box. You can specify target windows phone version in New Windows Phone Application dialog box.
1. If you select Windows Phone OS 8, your app will run both windows phone 8 /8.1 device/emulator but does not run on windows phone 7. Because higher version application will not work on lower version.
2.  If you select Windows Phone OS 7.1, your app will run on windows phone 7 and above all versions, Because lower version will run on higher version.
7. Once you click OK on New Windows Phone Application window it will added few build-in files and creates blank project for you. I have already shared default files in previous article .
1. You can find project solution on View | Solution Explorer or open Solution Explorer using shortcut Alt+Ctrl+L.
8. Open MainPage.xaml page from Solution Explorer.



Toolbox Window

1. Create UI using controls from View | Toolbox or open Toolbox using shortcut Crtl+Alt+X.                                                                                                                                           

                                                                  

Demo:

In this demo am going to explaining basic welcome message in Windows Phone.

• Design UI in MainPage.xaml, Mostly we will focus on "ContentPanel". ContentPanel behaves like a page BODY. 
• Change page name and application name in MainPage.xaml. 

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

                       <TextBlock Text="MyFirstApp" Style="{StaticResource PhoneTextNormalStyle}"                                  Margin="12,0"/>

                       <TextBlock Text="Home" Margin="9,-7,0,0" Style="{StaticResource                                                        PhoneTextTitle1Style}"/>                       

                </StackPanel>

• Add Button control to ContentPanel  in MainPage.xaml for displaying welcome message. You can add Button control from Toolbox using drag and drop or by write code. Button control occupies Content Panel entire space.

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

                       <Button Content="Show Message"/>

                  </Grid>

MyFirstApp

•  OR you can add Button control in code-behind MainPage() constructor (MainPage.xaml.cs).  
• First create a new instance of Button, then set the Button text as "Show Message" using Content property and add Button to ContentPanel as a children. This Button control added to page at runtime.

                     public MainPage()

                       {

                                 InitializeComponent();

                                 Button btn = new Button();

                                 btn.Content = "Show Message";

                                 this.ContentPanel.Children.Add(btn);

                       }

• Our goal is display message while clicking on Button. For displaying message we are using MessageBox Class

 What is MessageBox ?

         Displays a message to user using Show overloaded method,  

• Show(messaebody) method displays message box that contains message text.

                       Syntax: 

                                 MessageBox.Show(string messageText);

• Show(messagebody,messageTitle,messageboxButtons) method displays message box that contains message text , message title and response buttons.

                       Syntax: 

                                MessageBox.Show(string messageText,string messageTitle,MessageBoxButton                                   button);                                

   

• Create Button Click event handler either XAML page or code behind 

         In XAML:

                      <Button Content="Show Message" Click="btn_Click"/>

         In Code-behind:

                        public MainPage()

                       {

                                 InitializeComponent();

                                 Button btn = new Button();

                                 btn.Content = "Show Message";

                                 btn.Click+=btn_Click; 

                                 this.ContentPanel.Children.Add(btn);

                       }

         Event Handler:

                       void btn_Click(object sender, RoutedEventArgs e)

                       { }

• Add message box Show(MessageText) method in button event, This code will execute once user tap on Show Message button.

                       void btn_Click(object sender, RoutedEventArgs e)

                       {

                          MessageBox.Show("Welcome to learnwindowsphonebasics.blogsopt.in");

                        }

• Launch Your First App:

              Run your application either Emulator or Device using play button on menu bar or press F5 function keyboard button. 

Launch Your App

                     

• Output:

MyFirstApp Result

                                                

• Stop your application:

                 You want to stop your running application click RED SQUARE button on Visual Studio menu bar.

Stop your running app

                     

Great friends we are successfully create first windows phone application.

Get the source code for MyFirstApp