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.

Image

How can we use the Live Tiles ?!

 

Local

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

Image

Through Internet

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

Image

Through a Web Service

  Via NotificationChannelManager by getting the data from the service URI

Image

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.

http://code.msdn.microsoft.com/windowsapps/App-tiles-and-badges-sample-5fc49148

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

Change your windows 8 Application Tile Logos and the Splash Screen

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

Logo.png

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

WideLogo.png

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

SmallLogo.png

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

Image

Image

 

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 

Image

 

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 

Image

 

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

Image

 

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

http://www.mathsisfun.com/hexadecimal-decimal-colors.html

N.B

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.