Floating FB popout byF5debug

Using Application Bar in Windows Store application - Day 5

 

Part5

In our earlier tutorial we have seen the design perspectives that should be considered while developing your first Windows Store application. Now in this tutorial we are going to see a very interesting topic of a feature that is available with Windows Store which is called Application Bar. In Windows Store app, Application Bars are hidden by default and is transient by nature, which means it shows up and disappears on request. We have option to put the Application bar at the top of the page or at the bottom of the page or even in both the places. We can get the application bar on right click of the user input, pressing Control+Z or swiping at the top or bottom respectively.          [more]

Application Bar is used to provide users with quick access to an applications most commonly used tasks and to provide a short cut to navigate to pages which are accessed regularly. We can simply say Application Bar is a row of buttons in a ellipsis style that can be places in Top or bottom of the page in a transient way to slide and disappear when the user request for the same. Let us start the steps on using this Application Bar in our project.

How to use the Application Bar?

Open Visual Studio 2012 IDE and provide a valid project name for the Windows Store Blank Template and provide a location to save the project as shown in the screen below.

image


To start adding the Application Bar capability to the application MainPage.XAML page, navigate to the XAML code of the page and we can see the default code base as below.

image

We have option to add the Application Bar in two places as we have already mentioned at the beginning. We can add the Application Bar to the top of the page or at the bottom of the page using TopAppBar or BottomAppBar property of the page. First lets add the bottom App Bar to the page as shown in the below code which basically uses the BottomAppBar property.

Code:

<Page.BottomAppBar>
        <AppBar x:Name="bottomAppBar" Padding="10,0,10,0">
            <Grid>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Left">
                    <Button Style="{StaticResource AddAppBarButtonStyle}" Click="AddButton_Click"/>
                    <Button Style="{StaticResource EditAppBarButtonStyle}" Click="EditButton_Click"/>
                </StackPanel>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
                    <Button Style="{StaticResource HelpAppBarButtonStyle}" Click="HelpButton_Click"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>


image

We can see some errors that are highlighted that the base styles for these buttons are not available. Basically we have these styles commented as a static resource and available in the StandardStyles.XAML file in Common folder as shown in the screen below.

image

Uncomment these styles that we are going to use with the buttons and we can see the error indicators are now removed as the styles that the button is looking out is available in the resources locally as shown in the screen below.

image

Now build and execute the application and we can see the application bar shows on right clicking the application page or by pressing Control + Z buttons as shown in the screen below.

image

We can see the highlighted (Red box) Application bar that is popped out on the button clicks in the above screen. Now lets us play further to programmatically tell the application that it should pop out once the application is loaded. We have a property called IsOpen in the AppBar class which makes it easy to tell the application to pop out the Application Bar as soon as the application is loaded. So make the code changes as highlighted in the screen below.

image

Now run the application and we can see the application once loaded will have the Application Bar opened and visible to the end users which makes it easier for the users to analyze the shortcuts and the most used items in place. But we need to nice on clicking the application page or the Application bar will slide in the to the bottom.

image

image


Now we have a scenario of making the app sticky even when the end user clicks on the application page or on the Application Bar, yes we have a property available for that as well which is called IsSticky. Just enable the IsSticky property to true and we can see the Application Bar will be available even when the user clicks on the Application Bar or on the application page as shown in the code below.

image

Now run the application and we can see the Application Bar will be loaded and made available at the bottom of the Application Page and is sticky even when the user clicks across the page and the bar as shown in the screen below.

image

Our immediate next task is to handle the events that are available with the buttons that are listed on the Application Bar and also we have few more events that can be handled for specifically on Application Opening and Application Closing to track on some user activities. We can handle that using Opened and Closed event props that are available with the AppBar class using the code as shown in the screen below.

image

So we handle these events in the code behind by simply right clicking on the event name and select the option Navigate to Event Handler and write the logic on how to handle the event as shown in the screen below.

image

Now let us run the application and see how exactly the events the triggered on each of the click event. To analyze this I have removed IsSticky property from the code so that the Application Bar can be made closed and opened and respective event can be triggered as shown in the screens below.

 

imageimage

image

image

While designing the application Microsoft have suggested some of the Dos and Don’t specific to Application Bar are as follows.

  • Do place commands consistently, and organize them into command sets.
  • Do set the app bar's dismissal mode to sticky when displaying contextual commands.
  • Do use menus when you have too many commands.
  • Do design your app bar for snap and portrait view.
  • Do design for horizontal scrolling.
  • Do use the default styles for commands, menus, and flyouts.
  • Do use the bottom app bar for commands and the top app bar for navigation.
  • Don't put critical commands on the app bar.
  • Don't put clipboard commands for text on the app bar.
  • Don’t put login, logout, or other account management commands in the app bar.

That’s it from todays tutorial, see you all in the next tutorial on this series on Learning Windows Store Application Development in 31 days.

Hope this tutorial will be useful to you, If interested please don’t forget to connect with me on Twitter, Facebook and GooglePlus for updates. Also subscribe to F5debug Newsletter to get all the updates delivered directly to your inbox. We won’t spam or share your email address as we respect your privacy.

About Author: Karthikeyan Anbarasan, Microsoft MVP (Most Valuable Professional) in ASP.NET/IIS Architecture. He is the Founder and Chief Editor of the www.f5debug.net website and has authored books on Windows Phone and Business Intelligence(SSIS). He is also a Passionate Speaker and a Blogger on Microsoft Technologies.

You can Join Me On: Facebook, Twitter, Google Plus, LinkedIn

Comments (7) -

abhishek padala
abhishek padala
11/3/2012 1:12:04 PM #

thanks for sharing windows 8 application development stuff..
plz keep remaining days learning stuff.

Krishna
Krishna
11/6/2012 1:36:59 AM #

waiting for next article in the series.

test
test
11/6/2012 3:58:49 AM #

dfgdfgdfg

Lokesh
Lokesh
12/19/2012 5:19:38 AM #

I'm Waiting............. for 6th day for Windows store app...

Eric
Eric
1/4/2013 3:39:06 AM #

I am new beginer of this, thanks for helpful articles. But I got some error with the end line of code "await messagebox.ShowAsync()", the error message title is "UnauthorizedAccessException was unhandled by user code" and details are: "Access is denied.(Exception from HRESULT:0x80070005(E_ACCESSDENIED)). I don't know why this hapended.  

Allan Rosenkoetter
Allan Rosenkoetter
8/31/2013 5:50:53 AM #

Good write-up, I am regular visitor of one's website, maintain up the excellent operate, and It is going to be a regular visitor for a long time. "Good nonsense is good sense in disguise." by Josh Billings.

Hermelinda Sarcinelli
Hermelinda Sarcinelli
9/20/2013 2:37:50 AM #

Hi, I check your blog like every week. Your story-telling style is witty, keep it up!|

Pingbacks and trackbacks (1)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Recent Posts

Random Posts

Most Viewed

URL Shortner

Create your own short urls!!!

Site Counter

free counters

Disclaimer

This is a personal weblog. The opinions expressed here represent my own and not those of my employer. For accuracy and official reference refer to MSDN/ TechNet. I have documented my personal experience on this blog.

Protected by Copyscape Web Plagiarism Finder

Site Meter