Ibraheem Osama Mohamed (ابراهيم اسامه محمد)

Welcome to my blog :)

Windows 8 Application AppBar(Menu)

with 3 comments

Windows 8 Application Menu
Tutorial
Contents :-
1)Hello World.
2)Layouts and Styles.
3)Application AppBar.(Bottom and Top)( Here )
4) Secondary Tiles and Live Tiles
5)Toast Notification.
6)Searching and Sharing.
7)File Picker.
8)Bing Maps.

Windows 8 Appbar is a very important component in building Windows 8 Metro Style apps, Consider that you’r making a game and you want to pause the game,you must use the menu.In the applications the Menu makes it more easier to the user to have a full control over the application.
if you open IE10 you’ll notice some thing that IE have 2 appbar(Bottom and Top)

Lets agree on some thing the user want all the application options to be like each other.If you have many application in your computer you want all them to have the same experience. So the Top Menu in Windows 8 used for Navigation and the bottom for Options.
of course you are free to make anything in the 2 menus but this is the common use for the 2 menus

Lets get in the interesting part 🙂

1)Make a New C# Metro Style Application.
2)Open your page that you want to app the menu in
3)In the Xaml in the page tag write the flowing code
<Page.BottomAppBar>

        <AppBar x:Name=”AppBar” Padding=”10,0,10,0″>

            <Grid>

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

                    <Button x:Name=”Exit” HorizontalAlignment=”Right” Style=”{StaticResource AppBarButtonStyle}” Click=”OnExitButtonClicked” Content=”Exit” />

                    <Button x:Name=”Pause” HorizontalAlignment=”Right” Style=”{StaticResource AppBarButtonStyle}” Click=”OnStopButtonClicked” Content=”P” />

                    <Button x:Name=”Continue” HorizontalAlignment=”Right” Style=”{StaticResource AppBarButtonStyle}” Click=”OnContButtonClicked” Content=”C” />

                </StackPanel>

            </Grid>

        </AppBar>

    </Page.BottomAppBar>

    <Page.TopAppBar>

        <AppBar x:Name=”TopAppBar” Padding=”10,0,10,0″>

            <Grid>

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

                    <Button x:Name=”ExitTop” HorizontalAlignment=”Right” Style=”{StaticResource AppBarButtonStyle}” Click=”OnExitButtonClicked” Content=”Exit” />

                    <Button x:Name=”PauseTop” HorizontalAlignment=”Right” Style=”{StaticResource AppBarButtonStyle}” Click=”OnStopButtonClicked” Content=”P” />

                    <Button x:Name=”ContinueTop” HorizontalAlignment=”Right” Style=”{StaticResource AppBarButtonStyle}” Click=”OnContButtonClicked” Content=”C” />

                </StackPanel>

            </Grid>

        </AppBar>

    </Page.TopAppBar>

Don’t forget to make the events for the button click in the 2 menus

Let’s get in deep in the code after you define the  location of the AppBar in the bottom then we define the layout grid then stackpanel
but look at the stack panel you’r find that Orientation=”Horizontal”  that’s means if you add a control it will be added in a Horizontal way not from up to down.
This is the Most Important part the buttons, After we define the button and it’s content you’ll find this shape

Oh, There is a little different between the two menus the button of the first menu were Circle and the second was a box.
In the first menu button’s we defined the  Style=”{StaticResource AppBarButtonStyle}” which make it Circle
But in the Second menu we didn’t define any thing so the button takes it’s default shape.
Read the last post about Layouts and styles and you’ll get the message
There are many static resources you can use like

HomeAppBarButtonStyle
VideoAppBarButtonStyle
PhotoAppBarButtonStyle

I hope that you get the Idea 🙂

Ibraheem Osama Mohamed
Twitter : @IbraheemOsamaMo 

Advertisements

Written by Ibraheem Osama Mohamed

April 25, 2012 at 4:04 pm

3 Responses

Subscribe to comments with RSS.

  1. […] in HTML5. I’ll post a post every 2 days. Contents :- 1)Hello World. 2)Layouts and Styles. 3)Application Menu.(Bottom and Top) 4) Secondary Tiles and Live Tiles 5)Toast Notification. 6)Searching and Sharing. 7)File Picker. […]

  2. […] World Metro Style App Tutorial Contents :- 1)Hello World.( Here ) 2)Layouts and Styles. 3)Application Menu.(Bottom and Top) 4) Secondary Tiles and Live Tiles 5)Toast Notification. 6)Searching and Sharing. 7)File Picker. […]

  3. […] World. 2)Layouts and Styles.( Here ) 3)GridView Tutorial 34Application Menu.(Bottom and Top) 5) Secondary Tiles and Live Tiles 6)Toast Notification. 7)Searching and Sharing. 8)File Pickers , […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: