1. Microsoft Student Partners
Windows 8
How to add an App Bar
How to use Live Tiles

2. Who am I?
Amr Abulnaga
British University in Egypt
Microsoft Student Partner (MSP)

3. Agenda
Introduction
Technical Concepts
XAML
App Bar
Standard Styles
Handling Button Click Events
Live Tiles

4. Technical Windows 8 App Development
Concepts

5. Technical Concepts
App Pages
Data Model (Data Layer)
-> Data Source
Assets

6. Technical Concepts
Languages Supported:
WPF & C#
HTML & JavaScript
WPF & C++

7. Technical Concepts
Charms
Life Tiles
Toast Notifications
App Contracts
Windows 8 Search Contract

8. XAML is a declarative markup language
that simplifies creating a UI for a .NET
XAML Application. Using XAML markup you
can create visible elements and
components

9. XAML
• When represented as text, XAML files are XML files that generally have the .xaml extension. The files can be
encoded by any XML encoding, but encoding as UTF-8 is typical.
• The following example shows how you might create a button as part of a UI. This example is just intended to
give you a flavor of how XAML represents common UI programming metaphors (it is not a complete sample).
<StackPanel>
<Button Content="Click Me"/>
</StackPanel>
Adding any XAML Component to the XAML file is similar to the above example and to provide more support to the
developer Windows 8 comes with a lot of pre-loaded XAML controls.

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

11. 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.

12. How to add an App Bar
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>

13. Standard Styles
• The app bar button styles used in these examples are located in the
StandardStyles.xaml file 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 in the file.

14. 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
}

15. Windows 8 live tiles is a feature for Modern UI apps that use
the internet to bring live updates to users of Windows 8.
Live tiles exist on the Windows 8 start screen, and are
Live Tiles useful for having instantaneous information on constantly
changing data like stock indexes, international weather, as
well as local and international news.

16. Live tiles
How does the tile change ?!
The tile is updated when the application sends a TileNotification
followed by updating the tile via TileUpdateManager.

17. Live tiles
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.
• 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

18. Live tiles
• 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.
We’ll 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:
http://code.msdn.microsoft.com/windowsapps/App-tiles-and-badges-sample-
5fc49148

19. Let’s Work ! Yes !

20. Contact me
amr.salah@studentpartner.com
http://www.facebook.com/amrabulnaga.0
http://www.twitter.com/amrabulnaga
http://amrabulnaga.WordPress.com

21. Thank You  Thank you so much 