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

}