Microsoft Student PartnersWindows 8
How to add an App Bar
How to use Live Tiles
Who am I?
British University in Egypt
Microsoft Student Partner (MSP)
Amr Abulnaga
Agenda
Introduction
Technical Concepts
XAML
App Bar
Standard Styles
Handling Button Click Events
Live Tiles
Technical Concepts
Windows 8 App
Development
Technical Concepts
Assets
Data Model (Data Layer)-> Data Source
App Pages
Technical Concepts
Languages Supported:
WPF & C#
HTML & JavaScript
WPF & C++
Technical Concepts
Charms
Life Tiles
Toast Notifications
App Contracts
Windows 8 Search Contract
XAMLXAML is a declarative markup language
that simplifies creating a UI for a .NET
Application. Using XAML markup you can
create visible elements and components
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).
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.
<StackPanel> <Button Content="Click Me"/></StackPanel>
App BarIt’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.
How to add an App Bar
<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>
Add the following XAML Code to your page (BottomAppBar Component)
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.
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
}
Live Tiles
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
useful for having instantaneous information on constantly
changing data like stock indexes, international weather,
as well as local and international news.
Live tiles
How does the tile change ?!
The tile is updated when the application sends a
TileNotification followed by updating the tile via
TileUpdateManager.
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
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
Let’s Work ! Yes !
Contact me
http://www.facebook.com/amrabulnaga.0
http://www.twitter.com/amrabulnaga
http://amrabulnaga.WordPress.com
Thank You Thank you so much
Recommended
