Live Tiles

What are live tiles ?
Windows 8 live tiles is a feature for Modern UI apps that uses the internet to bring live updates to users of Windows 8.

Why live tiles ?

Live tiles exist on the Windows 8 start screen, and are useful for having instantaneous information on constantly changing data like stock indexes, international weather, as well as local and international news as they request the notifications without opening the application.

How does the tile change ?!

The tile is updated when the application sends a TileNotification followed by updating the tile via TileUpdateManager.


How can we use the Live Tiles ?!



  By adding the text and the image you want to be on the tile to the solution.


Through Internet

  By adding images through the internet and your text on the tile.


Through a Web Service

  Via NotificationChannelManager by getting the data from the service URI


To use the Live Tiles Notifications without a Web Service is easier as you put your content directly by referencing them and passing them to the update function but using a Web service is much more time saving as to be used in other applications and scales down the size of the app.

Where to begin ?

Use the NotificationsExtensions Library which is a premade library with Tile objects pre-defined to help developers you can find it in the Windows SDK Sample which illustrates the whole theory of the live tiles.

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):


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


<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 Orientation=”Horizontal” HorizontalAlignment=”Right”>

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

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






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

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”


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



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



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

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


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;


Now , Add the following field to the App class.

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


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); }


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



Change your windows 8 Application Tile Logos and the Splash Screen

For any windows 8 application there are 3 Standard Tile Logos which are :


its the main tile logo for the application and its dimensions is  150 x 150 pixels


its a wide tile logo for the application and its dimensions are 310 x 150 pixels.


its a small logo for the application and its dimensions are 30 x 30 pixels.

besides these there is the StoreLogo.png

which is the logo for the application when its uploaded on the Windows Store and its dimensions are 50 x 50 pixels.

and the SplashScreen.png

its the Splash Screen which appears in the start (beginning) of the application launch and its dimensions are 620 x 300 pixels.

You’ll find the Logo.png, SmallLogo.png and StoreLogo.png are created with any Windows Store project created with a template icon which can be found in the Assets folder




you can edit them with your own application logo and splash screen or you can edit them by your own files and reference them through the Package.appxmanifest file which you’ll find below the files in the solution explorer 



Just double click it and it will open the file which has all of the deployment package properties the first tab which is selected is the UI which has all of our UI Properties

you’ll find the Tile properties which has all of the logos and the tile background color you can easily change any logo by pressing the browse button next to the URI button of every logo and through here you can also add the Wide Logo 



and when you scroll down you’ll find the Splash Screen part which has the properties of the splash screen and its path you can press on the browse button and choose your splash screen and you can change its background color from here also



to change the background color of the logos or the splash screen you just write its Hexadecimal Value for example

black is #000000 

you can choose the color you want in hexadecimal through this site


When you add a wide logo it becomes the default start tile and you can make it smaller by choosing smaller from the Start AppBar.

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

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:


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.




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



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.


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 



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.



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



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



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



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



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



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.


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



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 .



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



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



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



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



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.



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.