Month: March 2012

Geek-a-Palooza!! Geek Speaking!! Windows 8 Development!!

Well, starting strong, I am collaborating on the definition and also speaking of a really cool event called “Geek-a-Palooza”, picture below self descripting:

Imagen

There I will be speaking about Windows 8 Metro style development explaining the attending geeks on how to code the “One Tile” that gathers it all, Portable applications included as a surprise 😉

The session will happen at the beautiful country of Andorra, between Spain and France and is focused for IT & Developers.

For more information, there’s the website of the event, http://www.geek-a-paloozaaa.com/

The only point is that the sessions will be in spanish and catalan…  well you can’t have it all!!

Be Geek my friend!

Windows 8 Metro Application AppBar trick

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.