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
Fri, 18-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

Ambily.Raj
Posted by under Windows 8 category on for Intermediate level | Points: 250 | Views : 4289 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: 5 out of 5
3 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. App bars can be invoked by mouse right click, Win+Z key or by a swipe in top or bottom edges. For an application you can add two app bars – one on top and another on bottom.

Top App Bar is used for navigation and the bottom App Bar is for Commands. For example, if you want to move to a particular page, we can use the top App Bar to define the navigation to the page. Actions like New, Edit, Save, Filter, Sort, etc. needs to be added to the bottom App Bar

Note: Windows 8 Application can be developed using various programming languages like HTML/Javascript and XAML/C#. For our samples we use the XAML C# combination.


 
Bottom App Bar


You can add App Bars to your app using XAML designer.  Following code define a bottom App Bar with two action buttons –Edit and Help.





<Page.BottomAppBar>    

        <AppBar x:Name="bottomBar" Padding="5                         5 5 5" Background="Black">

            <Grid>

            <StackPanel             HorizontalAlignment="Left" Orientation="Horizontal">

                <Button x:Name="edit" Content="Edit"                     />

            </StackPanel>

            <StackPanel             Orientation="Horizontal" HorizontalAlignment="Right">

                <Button x:Name="help" Content="Help"             />

            </StackPanel>

            </Grid>

        </AppBar>  

    </Page.BottomAppBar> 


The resultant App Bar is



IsOpen Property


But when you run the application, no App bars will be rendered. The user will not be aware of the App bar which is hidden in the bottom area. We can make the App bar open by default. When the user interacts with the application, the App bar will disappear. He can invoke the same again using mouse right click.

For Opening the App bar initially set the IsOpen property to true.

<Page.BottomAppBar>        


        <AppBar x:Name="bottomBar" Padding="5 5 5 5" Background="Black" IsOpen="True" >

            <Grid>

            <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">

                <Button x:Name="edit" Content="Edit" />

            </StackPanel>

            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">

                <Button x:Name="help" Content="Help" />

            </StackPanel>

            </Grid>

        </AppBar>       

    </Page.BottomAppBar> 

 
Top App Bar


Now let us add the top App bar to our page. Following XAML define a top App Bar with two navigations – Upload and Download.


 


<Page.TopAppBar>

        <AppBar x:Name="topBar" Padding="5 5 5 5" IsOpen="True" Background="Black">

            <Grid>

                <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">

                    < Button x:Name="upload" Content="Upload" />

                    < Button x:Name="download" Content="Download" />

                </StackPanel>

            </Grid>

        </AppBar>

    </Page.TopAppBar>


Now our application has two App bars – one on top and another on bottom.





 
IsSticky Property


When you start interacting with your application, the App bars will disappear. This will allow the user to view more content. For making the App bar to visible always in the Application life cycle, set the IsSticky to true.


 


<Page.TopAppBar>

        <AppBar x:Name="topBar" Padding="5 5 5 5" IsOpen="True" IsSticky="True"  Background="Black">

            <Grid>

                <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">

                    < Button x:Name="upload" Content="Upload" />

                    < Button x:Name="download" Content="Download" />

                </StackPanel>

            </Grid>

        </AppBar>

    </Page.TopAppBar>


Once you add the IsSticky property, corresponding App Bar will be open throughout the application life cycle.



Open & Close Events


We can handle the App bar open and close events and code appropriately.


 


<AppBar x:Name="topBar" Padding="5 5 5 5" IsOpen="True"

                IsSticky="True" Background="Black"

                Opened="topBar_Opened"

                Closed="topBar_Closed">

            <Grid>

                <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">

                    < Button x:Name="upload" Content="Upload" />

                    < Button x:Name="download" Content="Download" />

                </StackPanel>

            </Grid>

        </AppBar>

 

Global Page


App Bar added to a particular page won’t be visible to another page. For making an App Bar accessible to all pages, we need to define a global page.

Add a new page as Main or Global page and define the common App Bar icons. Define the Content as a frame where we will render the pages. Following code snippet define a global page with top app bar and a main frame.


 

<Page.TopAppBar>

        <AppBar x:Name="topBar" Padding="5 5 5 5" Background="LightBlue" IsSticky="True">

            <Grid>

                <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">

                    < Button x:Name="back" Content="Back" Click="back_Click" />

                    < Button x:Name="main" Content="mainPage" Click="main_Click" />

                    <Button x:Name="rss" Content="RSS Reader" Click="rss_Click" />

                </StackPanel>               

            </Grid>

        </AppBar>

    </Page.TopAppBar>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <Frame x:Name="mainFrame" />

    </Grid>

 


Define the navigation in the code behind file. Render each page in the main frame using the Frame.Navigate() method.

 


 Page rootPage;

        protected override void OnNavigatedTo(NavigationEventArgs e)

        {

              rootPage = e.Parameter as Page;           

mainFrame.Navigate(typeof(MainPage), this);

        }

 

        private void back_Click(object sender, RoutedEventArgs e)

        {

            if (mainFrame.CanGoBack)

            {

                mainFrame.GoBack();

            }

            else if (rootPage != null && rootPage.Frame.CanGoBack)

            {

                rootPage.Frame.GoBack();

            }

        }

 

        private void main_Click(object sender, RoutedEventArgs e)

        {

            mainFrame.Navigate(typeof(MainPage), this);

        }

 

        private void rss_Click(object sender, RoutedEventArgs e)

        {

            mainFrame.Navigate(typeof(FirstPage), this);

        }

 



Built-In App Bar Icons


Windows 8 define a set of Built-in App Bar icons, which can be used for common actions like Edit, Pause, Pin, etc. Few of the Built-In App Bar icons are shown below.



 

Few of these icons are defined in the StandardStyle sheet added as part of the project templates in VS 2012. StandardStyle sheet can be located under Common folder in the project.

<Page.TopAppBar>

        <AppBar Background="#FFF9FCFD">

            <StackPanel Orientation="Vertical">

                <StackPanel Orientation="Horizontal">

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

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

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

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

---------------------------------------------------------------------------

-----------------------------------------------------------------------------

            </StackPanel>

        </AppBar>

    </Page.TopAppBar>




Conclusion


Windows 8 introduced the new Windows 8 Style applications, which enable the user to develop quick touch enabled applications with the new style. App Bar is one of the major feature 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