Test your technical skills online, appear in Virtual Interview and be ready for job!
Twitter Twitter LinkedIn YouTube Google
Be Interview ready ! | Search
Make friends on DotNetFunda.com and expand your network!
Winners

Win Prizes

Announcements
Like us on Facebook
Sponsor
Top Articles Author
Wed, 23-Apr-2014 Authors
All Time Authors
Sourav.Kayal
39750
Sheonarayan
34800
Niladri.Biswas
33350

Latest members | More ...


(Statistics delayed by 5 minutes)
Ads

Windows 8 App Features - App Bar Advanced

Ambily.Raj
Posted by under Windows 8 category on for Advance level | Points: 250 | Views : 2448 red flag
If you found plagiarised (copied) or inappropriate content,
please let us know the original source along with your correct email id (to communicate) for further action.
Rating: 4 out of 5
1 vote(s)


Windows 8 introduced a whole new style of application development. Windows 8 Style applications display Content over Chrome. This new style of application development help the end user to develop touch enabled applications with the same style as Windows 8. Windows 8 Style applications are based on Tiles, App Bars, Contracts, etc. We will be discussing about various Windows 8 features in a series of articles. In this article we will discuss about the App Bar feature.

 
App Bar


App bars are the navigation or command bars hidden in top or bottom edges of the screen. We have already discussed about the App Bar in the article Windows 8 App Features – App Bar.


In this document we will discuss about the App Bar declaration using a custom icon and take a closer look into the Global App Bar implementation.


App Bar with Custom Icon

Windows 8 provides a list of frequently used App Bar icons; but in some cases we may need to define our icon and content for the App Bar. Following sample shows how we can use a built-in App Bar icon and how we can define a custom App Bar icon


Play App Bar icon, which is defined by the Windows 8

<Button Style="{StaticResource PlayAppBarButtonStyle}"/>


Custom image and content


        

 <Button x:Name="customer" Click="customer_Click">

                        <Button.Content>
                                <StackPanel Orientation="Vertical">
                                        <Image Source="Assets/Customer.png" Width="40"/>
                                        <TextBlock Text="Customer"/>
                            </StackPanel>
                        </Button.Content>
                </Button>


 
 
Page Specific App Bar


As specified in the previous article, we are using a global App Bar for defining the main App Bar, which will be available for all the pages. Apart from this global App Bar, some pages may have specific App Bar requirements like the Customer page may require two more actions like New Customer, Edit Customer, etc.


For defining a page specific App Bar icon along with the Global App Bar, access the global App Bar in OnNavigateTo method and add the new icons to it.


Global App Bar declaration


 

<Page.BottomAppBar>
            <AppBar >
                    <StackPanel Orientation="Horizontal" x:Name="bottomAppBar">
                            <Button x:Name="utility" Click="utility_Click">
                                    <Button.Content>
                                            <StackPanel Orientation="Vertical">
                                                   <Image Source="Assets/utility.png" Width="40"/>
                                                   <TextBlock Text="Utility"/>
                                        </StackPanel>
                                    </Button.Content>
                            </Button>
        ----------------------------------------
        </StackPanel>
            </AppBar>
   < /Page.BottomAppBar> 


 
Accessing the Global App Bar in Customer Page and adding a new icon for “New Customer” action.


 

protected async override void OnNavigatedTo(NavigationEventArgs e)

        {
            rootPage         = e.Parameter as MainPage;
                    bottomAppBarPnl = rootPage.FindName("bottomAppBar") as StackPanel;
            if(bottomAppBarPnl != null)
            {                        // Create the button to add                       newCust = new Button();
                        newCust.Content = "New Customer";
                        newCust.Click += new RoutedEventHandler(newCust_Click);
 
                        // Add the button to the AppBar
                        bottomAppBarPnl.Children.Add(newCust);
            }
        }

 
When navigating to another page, we need to remove the New Customer action icon from App Bar. Define the removal in the OnNavigateFrom method.


 

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)

        {
                   if(bottomAppBarPnl != null)
            {
                        // Unhook the Click event handler for the button
                        newCust.Click -= new RoutedEventHandler(newCust_Click);
 
                   // Remove the button from the AppBar
                        bottomAppBarPnl.Children.Remove(newCust);
            }
}

 
Conclusion


Windows 8 introduced the new Windows 8 Style application development, which enable the user to develop quick touch enabled applications with a new style. App Bar is one of the major features in Windows 8 Application development.

 

Page copy protected against web site content infringement by Copyscape
Found interesting? Add this to:




About the Author

Ambily.Raj

Full Name: Ambily KK
Member Level: Silver
Member Status: Member,Microsoft_MVP,MVP
Member Since: 5/18/2010 1:05:25 AM
Country: India
Thanks Ambily K K http://ambilykk.com/
http://ambilykk.com/

I have over 9 years of experience working on Microsoft Technologies. I am carrying the passion on Microsoft technologies specifically on web technologies such as ASP .Net and Ajax. My interests also include Office Open XML, Azure, Visual Studio 2010. Technology adoption and learning is my key strength and technology sharing is my passion.
Login to vote for this post.

Comments or Responses


Login to post response.

Comments / Responses
Select text & click toolbar to format. Formatting appears in viewmode only. HTML Tags are not allowed.
Bold Italic Underline Paragraph Title Code  Link 
 Wait ... Processing ..... please wait.

Comment using Facebook