Support us on YouTube by Subscribing our YouTube Channel. Click here to Subscribe our YouTube Channel

Sunday 14 June 2015

Application Bar in Windows Phone 8 Application

This Article shows how to create Application Bar or AppBar in Windows Phone 8 Application. In the previous articls, we saw:


Application bar is a row of Icon buttons, menuitems and ellipsis (Three dots at the edge of application bar) placed at the bottom of the page. It is recommended to use Application bar instead of creating your own Menu. We can add up to 4 Icon Buttons with optional MenuItems.

Let's Begin:

1. Create Application Bar using XAML Code:
Create a New Windows Phone Application and select Windows Phone 8.0 as a target Windows Phone OS for this application and click on OK. Go to
C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons\Dark and copy the icons you want to use. You can also use your own icons with 48*48 size with a transparent background. Paste the icons in Assets folder of your project.
Open MainPage.xaml and go to the end PhoneApplicationPage

And add following lines of code:
<!--Create Application Bar-->
<phone:PhoneApplicationPage.ApplicationBar>
       <shell:ApplicationBar IsMenuEnabled="True" Mode="Default">
       <!--Add icon buttons to Application Bar-->
       <shell:ApplicationBarIconButton IconUri="/Assets/phone.png" Text="Call" Click="ApplicationBarIconButton_Click_1"></shell:ApplicationBarIconButton>
       <shell:ApplicationBarIconButton IconUri="/Assets/email.png" Text="Email" Click="ApplicationBarIconButton_Click_2"></shell:ApplicationBarIconButton>
       <shell:ApplicationBarIconButton IconUri="/Assets/search.png" Text="Search" Click="ApplicationBarIconButton_Click_3"></shell:ApplicationBarIconButton>
       <!--Add menu items to Application Bar-->
       <shell:ApplicationBar.MenuItems>
              <shell:ApplicationBarMenuItem Text="About this App" Click="ApplicationBarMenuItem_Click_1">
              </shell:ApplicationBarMenuItem>
       </shell:ApplicationBar.MenuItems>
       </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
In the preceding Code, we create an Application Bar and then add an icon button and MenuItem to it. IconUri property is used to set the URI of the icon to use for the ApplicationBarIconButton. We have also created click events for ApplicationBarIconButton as well as for ApplicationBarMenuItem.
MainPage.xaml.cs code:
private void ApplicationBarIconButton_Click_1(object sender, EventArgs e)
{
        MessageBox.Show("Call Button Clicked!");
}

private void ApplicationBarIconButton_Click_2(object sender, EventArgs e)
{
        MessageBox.Show("Email Button Clicked!");
}

private void ApplicationBarIconButton_Click_3(object sender, EventArgs e)
{
        MessageBox.Show("Search Button Clicked!");
}
private void ApplicationBarMenuItem_Click_1(object sender, EventArgs e)
{
        //Navigate to About Page
        NavigationService.Navigate(new Uri("/About.xaml",UriKind.Relative));
}
Preview:
We can also create an Application bar from the Property window of PhoneApplicationPage. Click on a new button for creating ApplicationBar in PhoneApplicationPage's Property.
Click on Button property for creating a collection of Icon Button or Click on MenuItems for creating ApplicationBarMenuItem.
Now add ApplicationBarIcon Button and set IconUri as well as Text properties and then click on OK.
Now Build and Run the application.
Preview:

2. Creating an Application Bar in C# Code:
Go to .cs code of Windows Phone Page and add using Microsoft.Phone.Shell namespace. Now add following lines of code (I have added comments to the code so that you can easily understand the code.)
public partial class MainPage : PhoneApplicationPage
{
       // Constructor
       public MainPage()
       {
            InitializeComponent();
            //Creating instance of Application bar and Set variour property like opacity , Mode etc
            ApplicationBar = new ApplicationBar();
            ApplicationBar.Mode = ApplicationBarMode.Default;
            ApplicationBar.Opacity = 1.0;
            ApplicationBar.IsVisible = true;
            ApplicationBar.IsMenuEnabled = true;
            //Creating instance of ApplicationBarIconButton
            ApplicationBarIconButton applicationbariconbutton = new ApplicationBarIconButton();
            //Set the icon for applicationbariconbutton
            applicationbariconbutton.IconUri = new Uri("/Assets/Email.png",UriKind.Relative);
            //Set the label for applicationbariconbutton
            applicationbariconbutton.Text = "Email";
            //Add button on Application Bar
            ApplicationBar.Buttons.Add(applicationbariconbutton);
            //applicationbariconbutton Click Event
            applicationbariconbutton.Click += applicationbariconbutton_Click;
       }
       //Event generated for .cs generated application bar
       void applicationbariconbutton_Click(object sender, EventArgs e)
       {
            MessageBox.Show("Email Button Clicked!");
       }
}
Preview:

Properties of ApplicationBar:

1. Mode: Mode property defines the size of Application Bar when it first appears on a page.
2. Opacity: Opacity can range from 0.0(Complete transparent) to 1.0(Opaque).
I hope you like this. Thanks.
[Download Source Code via Google Drive]

Thursday 4 June 2015

Page Navigation in Windows Phone 8 Application

In this article, we will learn how to navigate from one page to another as well as how to pass parameter or value from one page to another. In the previous tutorials, we saw:


Page navigation is used to navigate from one page to another in Windows Phone 8. Navigation is managed by NavigationService Class. NavigationService provides Navigate method which navigates to the content specified by uniform resource identifier i.e. URI. Navigate method takes Uri, which is the name of the page on which you want to navigate.

Let's Begin:
1. Navigation from one page to another.
Create a New Windows Phone Application and select Windows Phone 8.0 as a target Windows Phone OS for this application and click on OK. Drop a button control on MainPage.xaml as shown in below image and named it as btn_navigationPage.
MainPage.xaml Code: 
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <Button Name="btn_navigationPage"
                    Content="Navigate between page"
                    VerticalAlignment="Top">
            </Button>
</Grid>
Now, Right Click on Project -> Add -> Click on New Item.
Add a Page (named it as AboutPage.xaml).
Add a HyperlinkButton control(named it as hlb_GoBack). Design the UI of page as shown in below image.
AboutPage.xaml Code: 
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <StackPanel>
            <TextBlock Text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lectus nisl, tempor sit amet sollicitudin ut, finibus ullamcorper nisl. Nulla facilisi." TextWrapping="Wrap"></TextBlock>
            <HyperlinkButton Name="hlb_GoBack" Content="Go Back"/>
            </StackPanel>
</Grid>
Now, go to MainPage.xaml and double click btn_navigationPage Button to create a click event and add the following code:
private void btn_navigationPage_Click(object sender, RoutedEventArgs e)
{
        NavigationService.Navigate(new Uri("/AboutPage.xaml",UriKind.Relative));
}
In preceding code, we have called Navigate method which navigates to the content specified by uniform resource identifier. We set UriKind.Relative because AboutPage.xaml is part of the same project or XAP file. We have already added HyperlinkButton on AboutPage.xaml. We will use this for navigating back to the previous page (We don't have to code for hardware back key button in Windows phone for navigating back to previous page). Double click on it to generate its click event and add the following lines of code.
private void hlb_GoBack_Click(object sender, RoutedEventArgs e)
{
        //Navigate to most recent entry in the back navigation history
        NavigationService.GoBack();
}
NavigationService.GoBack() method redirects the user to the previous page.
Preview:

2. Pass parameter/value from one page to another:
Let's create a New Project and add a Page(named it as FillDetails.xaml). Drop TextBox (named as txt_Name) and Button(named as btn_Submit) control on it.
FillDetails.xaml Code: 
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <StackPanel>
            <TextBlock Text="Enter your Name:"></TextBlock>
            <TextBox Name="txt_Name"></TextBox>
            <Button Name="btn_Submit" Content="Submit"></Button>
      </StackPanel>
</Grid>
Add another page(named as DisplayDetails.xaml) on which we will display the data passed from FillDetails.xaml page.
Now, go to FillDetails.xaml page and create click event of btn_Submit by double clicking on it.
private void btn_Submit_Click(object sender, RoutedEventArgs e)
{
        // Checking txt_Name is not empty
        if (txt_Name.Text != "")
        {
           NavigationService.Navigate(new Uri("/DisplayDetails.xaml?name=" + txt_Name.Text, UriKind.Relative));
        }
        else
        {
           MessageBox.Show("Please Provide Name!");
        }
}
In preceding code, we passed name as query string parameter in Uri. Open DisplayDetails.xaml.cs code and override OnNavigatedTo method. OnNavigatedTo method is called when page becomes the active page in a frame. Get the value from the query string and display it on lbl_display using the Text property.
protected override void OnNavigatedTo(NavigationEventArgs e)
{
     base.OnNavigatedTo(e);
     string name = "";
     if(NavigationContext.QueryString.TryGetValue("name", out name))
     {
          lbl_display.Text = "Hello! " + name+"\n Welcome to Windows Phone 8 Apps Development Tutorial Series.";
     }
}
Preview: 
I hope you like it. Thanks.
[Download Source Code via Google Drive]

Subscribe us on YouTube

Subscribe Now

Popular Posts

Contact us

Name

Email *

Message *

Like us on Facebook