Windows 8 app bar and live tiles
Download as PPTX, PDF0 likes899 views
This document discusses how to add app bars and use live tiles in a Windows 8 application. It introduces app bars and live tiles, then provides instructions on how to add an app bar using XAML code. It also discusses how to handle button click events and use live tiles to update an app's tile through tile notifications retrieved from a web service or included locally.
Windows 8 app bar and live tiles
- 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