App Bars, a useful tool for your UI or a place to drown your Metro Sorrows?

  • Article

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

  1. <Page
  2.     x:Class="Swipe2Navigate.BlankPage"
  3.     xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:Swipe2Navigate"
  6.     xmlns:d="https://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="https://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     mc:Ignorable="d">
  9.     <Page.TopAppBar>
  10.         <AppBar Padding="10,0,10,0">
  11.             <Grid>
  12.                 <Button x:Name="btnLaughter"
  13.                         Content="Laugh"
  14.                         Height="200"
  15.                         HorizontalAlignment="Left" Tapped="btnLaugh" />
  16.             </Grid>
  17.         </AppBar>
  18.     </Page.TopAppBar>
  19.  
  20.     <Page.BottomAppBar>
  21.         <AppBar Padding="10,0,10,0">
  22.             <Grid>
  23.                 <Button x:Name="btnBonus"
  24.                           Content="Touch for Sharp Blast"
  25.                         Tapped="btnSharpBlast"
  26.                         Height="200"
  27.                         HorizontalAlignment="Left" Background="#00DE4B4B" />
  28.             </Grid>
  29.         </AppBar>
  30.     </Page.BottomAppBar>
  31.     <Grid>
  32.         <StackPanel Margin="20,240,0,340">
  33.             <TextBlock x:Name="ShowInstructions"
  34.                        Text="Swipe down from top or up from the bottom then press either button"
  35.                        FontSize="36" Height="96" Margin="0,0,44,0" />
  36.             <TextBlock x:Name="ShowButtonPushed"
  37.                        Text="Watch this area to see which button was pressed on the App Bar"
  38.                        FontSize="36" Height="96" Margin="0,0,64,0" />
  39.             <MediaPlayer x:Name="mediaPlayer"
  40.                            Width="400" />
  41.         </StackPanel>
  42.     </Grid>
  43. </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

  1. using System;
  2. using System.Collections.Generic;
  3. using System.IO;
  4. using System.Linq;
  5. using Windows.Foundation;
  6. using Windows.Foundation.Collections;
  7. using Windows.UI.Xaml;
  8. using Windows.UI.Xaml.Controls;
  9. using Windows.UI.Xaml.Controls.Primitives;
  10. using Windows.UI.Xaml.Data;
  11. using Windows.UI.Xaml.Input;
  12. using Windows.UI.Xaml.Media;
  13. using Windows.UI.Xaml.Navigation;
  14.  
  15. // The Blank Page item template is documented at https://go.microsoft.com/fwlink/?LinkId=234238
  16.  
  17. namespace Swipe2Navigate
  18. {
  19.     /// <summary>
  20.     /// An empty page that can be used on its own or navigated to within a Frame.
  21.     /// </summary>
  22.     public sealed partial class BlankPage : Page
  23.     {
  24.         public BlankPage()
  25.         {
  26.             this.InitializeComponent();
  27.         }
  28.  
  29.         /// <summary>
  30.         /// Invoked when this page is about to be displayed in a Frame.
  31.         /// </summary>
  32.         /// <param name="e">Event data that describes how this page was reached.  The Parameter
  33.         /// property is typically used to configure the page.</param>
  34.         protected override void OnNavigatedTo(NavigationEventArgs e)
  35.         {
  36.         }
  37.  
  38.         private void btnLaugh(object sender, TappedRoutedEventArgs e)
  39.         {
  40.             /***********************************************************************
  41.              * Uncomment the mediaplayer if you have the wav files in place
  42.              * To uncomment use the keystroke
  43.              * (the plus (+) symbol means combination of the keys
  44.              * first the control key with the 'e' key, then release the ctrl+e and
  45.              * then press the 'u' key:
  46.              * To comment use the keystroke: ctrl+e+c
  47.              * ********************************************************************/
  48.             //mediaPlayer.Source = new Uri(mediaPlayer.BaseUri, "Assets/high giggle.wav");
  49.             ShowButtonPushed.Text = "Last button pushed was laugh";
  50.  
  51.  
  52.         }
  53.  
  54.         private void btnSharpBlast(object sender, TappedRoutedEventArgs e)
  55.         {
  56.             /***********************************************************************
  57.              * Uncomment the mediaplayer if you have the wav files in place
  58.              * To uncomment use the keystroke: ctrl+e+u
  59.              * To comment use the keystroke: ctrl+e+c
  60.              * ********************************************************************/
  61.             //mediaPlayer.Source = new Uri(mediaPlayer.BaseUri, "Assets/sharp blast.wav");
  62.             ShowButtonPushed.Text = "Last button pushed was Sharp Blast";
  63.         }
  64.     }
  65. }

 

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