App Bars, a useful tool for your UI or a place to drown your Metro Sorrows? - Secret Microsoft Communications - Site Home

Don’t drink booze when you are sad. Never a good idea, and especially don’t drink when sad and then drive. That’s bad. Dangerous. Get a taxi in that case.

However, App Bars are fairly easy to use, if not to find the way to use them in the literature. It would seem if you are looking at the literature intially you might not make any sense of it. Do App Bars only work in HTML 5 with Javascript/Ecmascript, or do they work with all of the languages? All of the languages.

Are App Bars sometimes referred to as Charms? No, App Bars are on the top and bottom edges. Charms are on the left or right edge and have a different purpose and function different.

To use App Bars, here is an example, not a well written example, but an example someone who is learning how to do metro might write, you need to change the x:Class to match the name you gave your app, there is more code below this XAML Code snippet:

XAML Code for Swipe2Navigate
 <Page
    x:Class="Swipe2Navigate.BlankPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Swipe2Navigate"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Page.TopAppBar>
        <AppBar Padding="10,0,10,0">
            <Grid>
                <Button x:Name="btnLaughter" 
                        Content="Laugh"
                        Height="200" 
                        HorizontalAlignment="Left" Tapped="btnLaugh"  />
            </Grid>
        </AppBar>
    </Page.TopAppBar>
 
    <Page.BottomAppBar>
        <AppBar Padding="10,0,10,0">
            <Grid>
                <Button x:Name="btnBonus" 
                          Content="Touch for Sharp Blast"
                        Tapped="btnSharpBlast"
                        Height="200" 
                        HorizontalAlignment="Left" Background="#00DE4B4B" />
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
    <Grid>
        <StackPanel Margin="20,240,0,340">
            <TextBlock x:Name="ShowInstructions"
                       Text="Swipe down from top or up from the bottom then press either button" 
                       FontSize="36" Height="96" Margin="0,0,44,0" />
            <TextBlock x:Name="ShowButtonPushed"
                       Text="Watch this area to see which button was pressed on the App Bar" 
                       FontSize="36" Height="96" Margin="0,0,64,0" />
            <MediaPlayer x:Name="mediaPlayer" 
                           Width="400" />
        </StackPanel>
    </Grid>
</Page>
 

Partial Class module:

Only the default usings are utilized in this class module. Note that the media component was commented out so that the code works if you cut and paste.

Code Behind for Swipe2Navigate
 using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
 
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
 
namespace Swipe2Navigate
{
    /// <summary>
    /// An empty page that can be used on its own or navigated to within a Frame.
    /// </summary>
    public sealed partial class BlankPage : Page
    {
        public BlankPage()
        {
            this.InitializeComponent();
        }
 
        /// <summary>
        /// Invoked when this page is about to be displayed in a Frame.
        /// </summary>
        /// <param name="e">Event data that describes how this page was reached.  The Parameter
        /// property is typically used to configure the page.</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
        }
 
        private void btnLaugh(object sender, TappedRoutedEventArgs e)
        {
            /***********************************************************************
             * Uncomment the mediaplayer if you have the wav files in place
             * To uncomment use the keystroke 
             * (the plus (+) symbol means combination of the keys
             * first the control key with the 'e' key, then release the ctrl+e and 
             * then press the 'u' key:
             * To comment use the keystroke: ctrl+e+c
             * ********************************************************************/
            //mediaPlayer.Source = new Uri(mediaPlayer.BaseUri, "Assets/high giggle.wav");
            ShowButtonPushed.Text = "Last button pushed was laugh";
 
 
        }
 
        private void btnSharpBlast(object sender, TappedRoutedEventArgs e)
        {
            /***********************************************************************
             * Uncomment the mediaplayer if you have the wav files in place
             * To uncomment use the keystroke: ctrl+e+u
             * To comment use the keystroke: ctrl+e+c
             * ********************************************************************/
            //mediaPlayer.Source = new Uri(mediaPlayer.BaseUri, "Assets/sharp blast.wav");
            ShowButtonPushed.Text = "Last button pushed was Sharp Blast";
        }
    }
}
 

Link to file on Skydrive (file validated on 3/29/2012, things change so the file might not be there in 2013 for instances):

https://skydrive.live.com/redir.aspx?cid=3d74c99171907e42&resid=3D74C99171907E42!2272&parid=root