jump to navigation

Windows 8 Metro Application AppBar trick March 20, 2012

Posted by Jose Luis Latorre Millas in Uncategorized.
trackback

I’ve been toying around with Metro Applications and have found that there isn’t much information, at least not for .NET XAML applications nor here http://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781232.aspx nor in the sample application which is located here http://code.msdn.microsoft.com/windowsapps/XAML-AppBar-control-sample-2aa1cbb4

There we have two methods, one we declare an application bar for a page – first thought here is that if it’s an application bar we should be able to declare it globally – and from then, override it on each page…

Well, we can’t do that so what this sample proposes is to do it on every page or to create a container Page control that its function is only to contain the “AppBar” and a Frame that is where we load the different “real” pages. Note that for overriding this we have to code and add buttons programatically to each of the AppBars. 

I hope you will comply that having this this way is a bit ugly, given the beauty of data templating and styling that we do have at this day and time. 

So I came out with a cleaner solution that still requires some coding but is nicer :)

First we do add an AppBar to a page like:

<common:LayoutAwarePage.TopAppBar>

   <AppBar HorizontalContentAlignment=”Stretch” Height=”88″ VerticalContentAlignment=”Stretch”>

         <Grid>

               <Grid.ColumnDefinitions>

                     <ColumnDefinition/>

                     <ColumnDefinition/>

               </Grid.ColumnDefinitions>

               <StackPanel Grid.Column=”1″ Orientation=”Horizontal”/>

               <StackPanel Orientation=”Horizontal” >

               <Button Click=”GoHome” HorizontalAlignment=”Left” IsEnabled=”{Binding Frame.CanGoBack, ElementName=pageRoot}” Style=”{StaticResource HomeAppBarButtonStyle}”/>

               </StackPanel>

         </Grid>

   </AppBar>

</common:LayoutAwarePage.TopAppBar>

Then, we add a Resource Dictionary and, from the AppBar we select “Edit Additional Templates –> Edit Generated Content –> Create Empty..” for creating a global ContentTemplate for our “global” AppBar.

Imagen

Then we create it on our just created ResourceDictionary..

Imagen

After this we will only need to copy the resulting AppBar code on all of our pages:

<common:LayoutAwarePage.TopAppBar>

    <AppBar ContentTemplate=”{StaticResource DataTemplate_AppBarGlobal}” />

</common:LayoutAwarePage.TopAppBar>

And, if we want to change the default/global AppBar, we do only need to edit one file.  And this without architecting our application nor complicating it more than necessary.

Hope this helps.

About these ads

Comments»

1. WindowsDevNews.com - March 21, 2012

[...] Windows 8 Metro Application AppBar trick [...]

2. Windows 8 Metro Application AppBar trick - March 21, 2012

[...] Read original post by Jose Luis Latorre Millas at SilverlightGuy [...]

3. Ricardo - April 12, 2012

There is another way also. You can always declare a base page that all views inherit from, and on the OnNavigatedTo event, create dynamically an appbar, associate it a datatemplate declared in the resources, and add the relevant buttons for that view in particular. In this way, no view needs to declare the appbar in the markup ;).

Jose Luis Latorre Millas - April 12, 2012

Sure, that is what is being done on the MSDN examples and I really didn’t like that way as is over-engineering (in my humble opinion) something and you have to inherit a control in order to do that. I find the other approach simpler but, as mentioned, my best shot is that on the final release we might be able to declare a REAL Application Bar (Application wide but that can be overriden by a local App bar)

4. Myan - August 23, 2012

The following code gives a Warning regarding a redefine of a inheritance property when I compile:

Is there a good way to declare AppBar in xaml and referecence it in C# without this warning?

5. rama - November 7, 2012

but how will you have the code for the click event handler in the resource dictionary

6. samwebtech - November 9, 2012

Hi,
Thanks for the post. It helped me creating a global appbar. I have a button(Image) and a Tapped event on it. When I use the DataTemplate like you mentioned above on a regular Page, it works fine.

But I am using a BasePage and I set the BottomBar for it in code-behind. The appbar appears fine now on all my pages(derived from BasePage). The issues is the Tapped event won’t fire now.
Any idea how to handle this scenario?

Thanks.


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

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: