How to add an App Bar to your Windows store App

What is an App Bar ?

It’s a sliding bar from the bottom or from the top that contains controls or settings for your application that can be hidden away when they aren’t needed.

How to add an App Bar ?

To add an app bar to your app, assign an AppBar control to the TopAppBar or BottomAppBar property of a Page. Top app bar can be used to show navigation in your app, Bottom app bar can be used to show commands and tools.

Add the following XAML Code to your page (BottomAppBar Component):

<Page.BottomAppBar>

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

<Grid>

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

<Button Style=”{StaticResource EditAppBarButtonStyle}” Click=”Button_Click”/>

<Button Style=”{StaticResource RemoveAppBarButtonStyle}” Click=”Button_Click”/>

<Button Style=”{StaticResource AddAppBarButtonStyle}” Click=”Button_Click”/>

</StackPanel>

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

<Button Style=”{StaticResource RefreshAppBarButtonStyle}” Click=”Button_Click”/>

<Button Style=”{StaticResource HelpAppBarButtonStyle}” Click=”Button_Click”/>

</StackPanel>

</Grid>

</AppBar>

</Page.BottomAppBar>

Image

Standard Styles

The app bar button styles used in these examples are located in the StandardStyles.xaml file which is included with every Microsoft Visual Studio project template. By default, the app bar button styles are commented out in StandardStyles.xaml.  To use a style, you must un-comment the Extensible Application Markup Language (XAML) for the Style resource you want in the file.

Handling Button Click events

Now after adding the AppBar component in the XAML code one thing is left which is to handle the Button_Click event and for different buttons we’ll use different events

Just add

private void Button_Click(object sender, RoutedEventArgs e)

{

//Button Function

}

Adding a Privacy Policy to your Application + About Page using the Settings Charm

After developing your windows 8 application here is one of the most important things to add to your application which is the Privacy Policy.

What is a Privacy Policy ?

Privacy policy is a statement or a legal document (privacy law) that discloses some or all of the ways a party gathers, uses, discloses and manages a customer or client’s data.

Why Privacy Policy ?

Privacy policy is a way to protect the application users data so that it wont be stolen or misused by the application developer.

One of the Windows 8 Application Certification Requirements is to add a privacy policy to your application.

How to add a privacy policy ?

Now I’ll show you how to add a privacy policy to your application and an about page using the settings charm.

Firstly write your privacy policy and upload it online so that you an add it (recommended) or you can use a generic privacy policy 
http://www.freeprivacypolicy.org/generic.php

Second after finishing your project right click your project in the solution explorer and choose Add > New item

then choose user control and rename it to “About.xaml”

Image

then in the XAML page created copy and paste the following code in the grid tag

<Grid>

<StackPanel>

<TextBlock Text=”App Name” FontFamily=”Segoe UI” FontWeight=”SemiLight” FontSize=”26.667″ /> <TextBlock Text=”Version-1.0.0.0″ FontFamily=”Segoe UI” FontWeight=”SemiLight” FontSize=”18″ />

</StackPanel>

</Grid>

replace the “App Name” with the name of your application later on

now we’ll need to add the function that will display the user control we created when we press the settings charm so we’ll just edit the App.xaml.cs file

as a prerequisite you need to install Callisto which is a library that has a set of controls that will help you in your development you’ll find it here 

http://visualstudiogallery.msdn.microsoft.com/0526563b-7a48-4b17-a087-a35cea701052

after installing it just right click the References in the Solution explorer and choose add a reference then in the search type Callisto then add it

Image

now go to App.xaml.cs and add the following namespaces in the beginning of the file

 using Windows.UI.ApplicationSettings;

using Callisto.Controls;

using Windows.UI;

using Windows.UI.Popups;

 using Windows.System;

Image

Now , Add the following field to the App class.

private Color _background = Color.FromArgb(255, 0, 77, 96);

Image

Now, Add the following statements to the OnLaunched method

SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;

Now, Add the following event handler to App.xaml.cs

void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args) { // Add an About command   var about = new SettingsCommand(“about”, “About”, (handler) =>   {      var settings = new SettingsFlyout();      settings.Content = new About();    settings.HeaderBrush = new SolidColorBrush(_background);      settings.Background = new SolidColorBrush(_background);      settings.HeaderText = “About”;      settings.IsOpen = true; });  args.Request.ApplicationCommands.Add(about); // Adding a Privacy Policy var privacy = new SettingsCommand(“privacypolicy”, “Privacy Policy”, OpenPrivacyPolicy); args.Request.ApplicationCommands.Add(privacy); }

Now add the OpenPrivacyPolicy method:

private async void OpenPrivacyPolicy(IUICommand command) {    Uri uri = new Uri(“http://Add A Link for your Privacy policy”);    await Launcher.LaunchUriAsync(uri); }

Image

now when you open the application press the settings charm and you’ll find the 2 options added Privacy Policy and About

Image

Image

Create your first Windows 8 Grid App

After my last post about how to create your first windows 8 application and the different types of windows 8 applications its now the time to create your first app.

In this this post I’ll show the steps to create your first grid app

Open Visual Studio 2012 then create a new project and choose Visual C# and Windows Store then choose Grid App
Image

Then choose the name of your Project (Application) and press OK

now your project files were created and as mentioned in the last post the application is divided into 3 parts:

Assets

This folder contains all of the images that we will use in the application and it comes with the template images and you can add the images you want later.

Image

 

DataModel

This folder contains all of the data that will be used in the application and a template file is created in it named SampleDataSource.cs that we will modify later to add the application data

Image

 

App Pages

Which is the design of the application itself and in the Grid App consists of 3 XAML Pages which will be illustrated with more details.

Image

So now we have 3 XAML Pages that we need to change its Data, Images and Design first all of the information (Data) is found at the SampleDataSource.cs where the Data is divided into group objects and each group has items objects inside it.

Each Group object takes uniqueId , title, subtitle, imagePath and description in its parameter where the

uniqueId is a string that is Unique for every group

title is the title of the group which has a default value of “Group: Title 1” for group1 as an example and can be changed later

subtitle is the group subtitle which has a default value of “Group: Subtitle 1” for group 1 as an example and can be changed later

imagePath is the path for the image of the group that can be changed later

description is the group description that can be changed later 

Image

 

this is an example of the group code that is generated in the sampleDataScource.cs file so what to do with it is simple as we have 5 strings let’s leave the uniqueID as it is and we have 4 strings that we can change the title, subtitle, imagePath which will be changed when we add images to the Assets folder and the description of the group.

the Item object is the same parameters as the group but it has 2 extra parameters

content which has the information that the item talks about and is a string also.

group which takes a group object its to know which group this item will be added.

Image

 

the sample code shows Group-1-Item-1 as an example

In each item we have 7 parameters 6 strings that we will change 5 of them as the first one is the uniqueId, we’ll change the title, the subtitle, the imagePath for the image that we will add later in the assets folder, the description and the content of the item.

however by default the SampleDataSource.cs has 6 groups generated each of them has many items so according to the application you are developing change the items/groups you want and delete the items/groups you don’t need.

Now add the images that will be used in the application by right clicking the Assets folder and choose add then Existing Item and the following window will appear

Image

 

then navigate to the folder you have the images in and select them all then press Add

now they’ll appear in the solution under the Assets folder and you can easily add them to the item/group by changing the imagePath by the image URI.

Now we have the design which is 3 XAML Pages

GroupedItemsPage.xaml which has all of the items grouped together in grid viewImage

GroupDetailPage.xaml which has the description of the group and its image the items in each group with their description and images

Image

 

ItemDetailPage.xaml which has the item title, item subtitle, image and content.

Image

 

each of these pages are written in XAML code however if you are nor familiar with XAML you can  just use the designer view which is easier just select the object you want to change its properties and in the properties window which is below the solution explorer the properties of the object appears so that you can modify them easily Image

For example I selected the Group title in order to change its color so I’ll just select the brush and change the color to red

Image

 

and now we can change any object in the XAML pages using the same method including the Background of the page

after editing the application files press F5 to build and run it

Image

 

This is the output of the sample run

How to create your first Windows 8 Application ?

After understanding the windows 8 technical concepts in my previous blog its time to start developing our application.

First you must ensure to have Visual Studio 2012 and for sure Windows 8.

Second there are different technologies that you can you use in the app development which is a good thing that will make people want to develop more apps.

Technologies supported are

WPF + C#

its the (silverlight) XAML used for the design combined with the C# programming language.

WPF + C++

Using the XAML for the design combined with the C++ programming language.

HTML + JavaScript

Using the HTML for the design combined with the JavaScript for programming.

now choose one of these technologies and get started.

Third our windows 8 application consists of 3 main parts

App Pages (HTML or XAML)

which has all of the design of our application pages and we can add components to it easily.

Data Model (Data Layer)

it has all of the information stored in a data source.

Assets

it has all of the images that we will add to the application to use it later.

Now its developing time

Open Visual Studio 2012 and choose create a new project

Image

 

choose the type of project based on the technology you selected and then choose windows store to create a windows store application I selected C# .

In the C# you’ll find it more easy as Microsoft created a ready made templates for developing windows store apps to make it easier for the developer so you’ll have to choose between 3 options

Blank App

it creates an empty XAML Page so that the developer could add his components later using the toolbox .

Image

 

Grid App

Its a pre-made template containing the Grid Tiles view and each tile contains certain information about it and has description and an image however it has 3 XAML Pages

GroupedItemsPage.xaml which has all of the items grouped together in grid view

Image

 

GroupDetailPage.xaml which has the description of the group and its image the items in each group with their description and images

Image

 

ItemDetailPage.xaml which has the item title, image and content

Image

 

Split App

Its the same as the Grid App but with 2 XAML pages only

ItemsPage.xaml which has the groups view where each group has items inside it

Image

 

SplitPage.xaml which appears after selecting a group and is splitted into 2 views a select menu on the left having all of the group items and when you select any item it opens on the right the item content and image.

Image

 

These were all of the types of windows 8 applications all of the other options are to create either a library to add later to a windows 8 application or a windows runtime component.