Windows 8 App bar and Live Tiles

This presentation shows you how to add an app bar to your application and to use the live tiles feature

Transcript

1. Microsoft Student Partners Windows 8 How to add an App Bar How to use Live Tiles
2. Who am I? British University in Egypt Microsoft Student Partner (MSP) Amr Abulnaga
3. Agenda Introduction Technical Concepts XAML App Bar Standard Styles Handling Button Click Events Live Tiles
4. Technical Concepts Windows 8 App Development
5. Technical Concepts Assets Data Model (Data Layer) -> Data Source App Pages
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 XAML is a declarative markup language that simplifies creating a UI for a .NET 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). 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>
10. 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.
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 <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)
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. 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.
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 