1 / 78

Advance Windows Store Apps Development

I have shared Advance Windows Store Apps Development, after learning this book. You will design and develop Application with the help of C#. The Applications run on Windows 8.1 and Windows 10 as well. You can download this book free.

Onlineittuts
Download Presentation

Advance Windows Store Apps Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Advanced Windows Apps Development - I

  2. Advanced Windows Store Apps Development - I Learner’s Guide © 2014 OnlineITtuts Limited All rights reserved. No part of this book may be reproduced or copied in any form or by any means – graphic, electronic or mechanical, including photocopying, recording, taping, or storing in information retrieval system or sent or transferred without the prior written permission of copyright owner OnlineITtuts Limited. All trademarks acknowledged. ONLINEITTUTS LIMITED Contact E-mail: admin@OnlineITtuts.com First Edition - 2014

  3. Dear Learner, We congratulate you on your decision to pursue an OnlineITtuts course. OnlineITtuts Ltd. designs its courses using a sound instructional design model – from conceptualization to execution, incorporating the following key aspects:  Scanning the user system and needs assessment Needs assessment is carried out the to find the educational and training needs of learner Technology trends are regularly scanned and tracked by core teams at OnlineITtuts Ltd. TAG* analyzes these on a monthly basis to understand the emerging technology training needs for the Industry. An annual Industry October to understand the technologies that Industries would be adapting in the next 2 to 3 years. An analysis of these trends & recruitment needs is then carried out to understand the skill requirements for different roles & career opportunities. Recruitment Profile Survey# is conducted during August - The skill requirements are system) then mapped Learning objectives for the different roles. with the learner profile (user to derive the  Needs analysis and design of curriculum The Learning objectives are then analyzed and translated into learning tasks. Each learning task or activity is analyzed in terms of knowledge, skills and attitudes that are required to perform that task. Teachers and domain experts do this jointly. These are then grouped in clusters to form the subjects to be covered by the curriculum. In addition, the society, the teachers, and the industry expect certain knowledge and skills that are related to abilities such as learning-to-learn, thinking, adaptability, problem solving, positive attitude etc. These competencies would cover both cognitive and affective domains. A precedence diagram for the subjects is drawn where the prerequisites for each subject are graphically illustrated. The number of levels in this diagram is determined by the duration of the course in terms of number of semesters etc. Using the precedence diagram and the time duration for each subject, the curriculum is organized.  Design & development of instructional materials

  4. The content outlines are developed by including additional topics that are required for the completion of the domain and the competencies identified. Evaluation strategy and scheme is developed for the subject. The topics are arranged/organized in a meaningful sequence. for the logical development of The detailed instructional material – Training aids, Learner material, reference material, project guidelines, etc.- are then developed. Rigorous quality checks are conducted at every stage.  Strategies for delivery of instruction Careful consideration is given for the integral development of abilities like thinking, problem solving, learning-to-learn etc. by selecting strategies (training methodology), instructional instructional materials. appropriate activities instructional and The considerable flexibility specially including creative activities with group interaction between the students and the trainer. The positive aspects of web based learning –acquiring information, organizing information and acting on the basis of some of the aspects, which are incorporated, in the instructional process. area of IT is is fast provided changing and the nebulous. instructional process by Hence in insufficient information are  Assessment of learning The learning is assessed through different modes – tests, assignments & projects. The assessment system is designed to knowledge & skills as defined evaluate by the learning objectives. level of the  Evaluation of instructional process and instructional materials The instructional process is backed by an elaborate monitoring system to evaluate - on-time delivery, understanding of a subject module, ability of the instructor to impart learning. As an integral part of this process, we request you to kindly send us your feedback in the reply prepaid form appended at the end of each module. *TAG – Technology & Academics Group comprises members from OnlineITtuts Ltd., professors from reputed Academic Institutions, Senior Managers from Industry, Technical gurus from Software Majors & representatives from regulatory organizations/forums. Technology heads of OnlineITtuts Ltd. meet on a monthly basis to share and evaluate the technology trends. The group interfaces with the representatives of the TAG thrice a year to review and validate the technology and academic directions and endeavors of OnlineITtuts Ltd.

  5. Industry representing the Software, Manufacturing, Process Industry, Insurance, Finance & Service Sectors. Recruitment Profile Survey - Survey was conducted The Industry Recruitment Profile August/September across 1581 companies in 2000, OnlineITtuts New Products Design Model Key Aspects 1 Scanning the user system and needs assessment Evaluation of Instructional Processes and Material 2 6 Need Analysis and design of curriculum Assessment of learning 3 5 Design and development of instructional material Strategies for delivery of instructions 4

  6. Preface The book aims to provide students with the skills to develop basic and advanced Windows Store apps. This book begins with introducing Windows Store app development and describes animations and transitions. The book also describes, transforms and the advantage of using Windows Runtime animation library. The concept and implementation of localization is also covered in the book. The book also explains about extending splash screens. The book further discusses creating and using custom controls and WinRT controls. The book then moves on to the concepts of contracts, printing settings, and PDF conversion classes. It also teaches speech synthesis and acquaints the users with speech synthesis classes. With Windows 8 and later versions, Microsoft had added some of the cloud computing features such as Notification Service and Microsoft Windows Channel. Using these features, the ,and save such notifications on the is at the base of all. Pictures, audio, and video are very much in demand. Windows Store apps allows the users to embed these multimedia features in their applications. This book provides the knowledge about all these multimedia extensions to the existing programming world. Notification Service users can cloud. In create, send, request today’s world, multimedia This book is the result of a concentrated effort of the Design Team, which is continuously striving to bring you the best and the latest in Information Technology. The process of design has been a part of the ISO 9001 certification for OnlineITtuts-IT Division, Services. As part of OnlineITtuts’s quality drive, this team does intensive research and curriculum enrichment to keep it in line with industry trends. Education Support We will be glad to receive your suggestions. Design Team

  7. Table of Contents Sessions 1. Windows Store Apps Essentials 2. Windows Store UI Localization 3. Adding Splash Screens and Branding to Apps 4. Storage Mechanisms 5. Working with Controls 6. Using Contracts, Print Settings, and Speech 7. Push Notification Services 8. Media Capturing

  8. Session -1 Windows Store Apps Essentials Welcome to the Session, Windows Store Apps Essentials. This session introduces you to Windows Store Apps essentials, creating User Interfaces (UIs) with eXtensible Application Markup Language (XAML), and also describes animations and transitions. In this Session, you will learn to: Describe Windows Store Apps essentials Explain the process of creating UIs with XAML Define animations and transitions Describe the process to use animation functions

  9. Session1 Windows Store Apps Essentials 1.1 Windows Store Apps Essentials Windows Store is an Application Store, which was established under Windows 8. It provides various apps, similar to Google, Apple, or BlackBerry apps and allows the distribution and purchase of apps designed for Windows 8. These apps can be developed for Windows 8 PCs and Tablets. Minimum requirements for developing Windows Store apps are as follows:  Windows 8 or higher  Microsoft Visual Studio Express 2012 or higher  Microsoft .NET Framework 4.5 or higher  A developer license registration 1.1.1 Windows 8 Platform, Architecture, and Features Figure 1.1 shows the architecture for Windows 8. V 1.0 © OnlineITtuts Limited

  10. Session1 Windows Store Apps Essentials The features of Windows 8 are as follows:  Fast Boot Time  Metro UI Design  Secure Boot (Using Unified Extensible Firmware Interface (UEFI))  New Installation, Repair, and Reboot  Start Screen and Dynamically Updated Tiles  Built-in Antivirus Capability  Windows Store  Family Safety  Improved File Explorer (formerly Windows Explorer)  Improved Task Manager  Microsoft Account Information  Picture Password  PC Reset and PC Refresh 1.1.2 Windows 8 Design and Features  Live Tiles Live tiles are used to show the live updates from the Internet. These are a key part of Start screen. This tile dynamically synchronizes stock updates, live news, and calendar from Hotmail accounts and displays the status on the home screen. They are used for making the design fast and fluid. A Live tile can either be static or live.  Splash Screen Whenever any app is started, a splash screen is displayed. This can also be configured to show when a dynamic update of any app is going on. It normally consists of screen image and background color. V 1.0 © OnlineITtuts Limited

  11. Session1 Windows Store Apps Essentials Awell-designed splash screen will make application more lively, attractive, and inviting.  Hub Control Ahub control helps you to create multiple sections. It is displayed in the app’s main content. It is also called ‘Hub View’ or ‘Hub Page’. It gives flexibility to design and customize the app to suit our brand needs. It uses a hierarchical navigation pattern.  App Bar App bars are applied to perform actions on UI elements, such as filtering results or navigating within the app, or deleting photos. They are invoked by swiping from the top or bottom of the screen or by right- clicking on the current app. They provide easy access to various commands. They can also be hidden or made context sensitive.  Detail Page The detail page is the content page for all the apps developed for Windows 8. It shows the actual information related to the current app. When the user selects a particular option or command, this screen is displayed to show the details related to the selected option or command. 1.1.3 Windows Charms and Contracts When you move the mouse on the right side of the screen, you can see the Search, Share, Start, Device, and Settings options, these are called charms. These charms can also be displayed by tapping Win+C keys. It is a universal toolbar for Windows 8. It can be used to work productively and add beauty to Windows Store apps. Figure 1.2 shows the charms used in Windows 8. Figure 1.2: Windows Charms  Search V 1.0 © OnlineITtuts Limited

  12. Session1 Windows Store Apps Essentials Search command is used to search any files from Windows Explorer, SkyDrive, or from the Bing Search Engine. Press the Win+S keys and enter the file name or text to be searched. This search charm will show the matching result with links. You can open the file just by clicking on the given links. By default, it shows the contents from the PC and SkyDrive at the beginning and then, it lists the contents from the Web. If you wish to go back to the Search charm again, you can point the mouse cursor to the upper-left corner and click the given thumbnail. This will take you to the Search charm again. Figure 1.3 shows an example of using Search charm to search for Lock Screen. Figure 1.3: Search for Lock Screen In Windows 8, you can share files, photos, or thoughts with known people, any social media network, and share the SkyDrive files with any contact. You can share an app or a link by selecting Share button on the charm and then, selecting the person with whom you wish to share the app or link, as shown in figure 1.4. V 1.0 © OnlineITtuts Limited

  13. Session1 Windows Store Apps Essentials Figure 1.4: Share a File We can modify the settings of the share content by choosing the Settings charm button and navigating to Change PC Settings.  Start When you click the Windows Logo, home screen is displayed. You can go back to previous screen by clicking on the same button once again.  Devices Swipe to the right edge of the screen to select the active and connected devices in your system. By using this option, you can:  View and/or play streaming music, videos, or a photo.  Print a document and photo or send an email.  Start Projector connected to the PC (presentation, slide show).  Settings Swipe to the right side of the screen to view the Settings charm. Using this, you can view or modify settings for an app, network, devices, user accounts, PC’s information, and so on, as shown in figure 1.5. Figure 1.5: Settings 1.1.4 Layout Controls in XAML Layouts are used for sizing and positioning objects in the current UI. If you wish to position your objects properly, you must put them in containers such as Panel, Canvas, StackPanel, and Grid controls provided by XAML for this purpose. These containers allow us to position and arrange our objects inside the UI. There are mainly two types of layouts in XAML: Absolute layout Dynamic layout Absolute layout controls are used to position your objects inside the panel or Canvas. Here, we specify the exact position of the element or an object by specifying Canvas.Leftand Canvas.Top properties of the child element. In Dynamic layout, the user can fix their own size in the user interface based on the screen resolution. Absolute layout is independent of the screen resolution. Dynamic layout on the other hand, does not specify the exact positioning of the child elements. The size as well as the location of the child elements is automatically adjusted as per the changes in the resolution of V 1.0 © OnlineITtuts Limited

  14. Session1 Windows Store Apps Essentials the screen. Controls such as Grid, StackPanel, and VariableSizedWrapGrid are used to define and create Dynamic layout.  Canvas In XAML, the default container is Canvas. It is a type of absolute layout. We can set its Canvas.Left and Canvas.Top properties to its exact position in the parent container. Note - Canvas has a property called Canvas.ZIndex, which can be set on each of the child elements. The following example shows how to design a layout in the Canvas using a step-by-step procedure: 1. Launch Visual Studio 2013. 2. Create a new project using File  New Project  Blank App (XAML). 3. Enter the Project name as CanvasDemo and click OK. 4. Add the code shown in Code Snippet 1 to MainPage.xaml. Code Snippet 1: V 1.0 © OnlineITtuts Limited

  15. Session1 Windows Store Apps Essentials <Page x:Class=”CanvasDemo.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using: CanvasDemo” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/ markup-compatibility/2006” mc:Ignorable=”d”> <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> <Canvas Background=”Black”> <Rectangle Canvas.Left=”100” Canvas.Top=”50” Fill=”Red” Width=”50” Height=”150” /> </Canvas> </Grid> </Page The code creates a Canvas which has a Rectangle UI element defined inside it. The output of Code Snippet 1 is shown in figure 1.6. V 1.0 © OnlineITtuts Limited

  16. Session1 Windows Store Apps Essentials Figure 1.6: Canvas Layout with a Rectangle  StackPanel The StackPanel container is applied to align the child elements either horizontally or vertically. The user can specify the Orientation property of the child element in the StackPanel. You can specify the Height and Width properties of the control. If you specify orientation as Horizontal, then all the elements will be arranged in horizontal order. There are two options – Horizontal or Vertical. The following step-by-step procedure shows how to create a vertical StackPanel of items. 1. Create a blank application by selecting FileNew ProjectBlank App (XAML). 2. Enter name of the project as StackPanelDemo and click OK. 3. Add the code shown in Code Snippet 2 to MainPage.xaml. Code Snippet 2: <Page x:Class=”StackPanelDemo.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:StackPanelDemo” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/markup- ompatibility/2006” mc:Ignorable=”d”> <StackPanel Margin=”20”> <Rectangle Fill=”Blue” Width=”25” Height=”25” Margin=”10” /> <Rectangle Fill=”Green” Width=”25” Height=”25” Margin=”10” /> V 1.0 © OnlineITtuts Limited

  17. Session1 Windows Store Apps Essentials <Rectangle Fill=”Red” Width=”25” Height=”25” Margin=”10” /> <Rectangle Fill=”Yellow” Width=”25” Height=”25” Margin=”10” /> </StackPanel> </Page> When the Orientation property of StackPanel is set to vertical, then the output of Code Snippet 2 will be displayed as shown in figure 1.7. Figure 1.7: StackPanel with Four Rectangles in Vertical Orientation  Grid The Grid panel is utilized to set the controls in array dimensions similar to multi-row and multi- column layouts. The user can specify a Grid’s row and column definitions by using the RowDefinitions and ColumnDefinitions properties within the Grid element. The user can specify the Grid.Column and Grid.Row properties, and set the number of rows and columns that should be there in the current Grid. The step-by-step procedure to use a Grid control is as follows: V 1.0 © OnlineITtuts Limited

  18. Session1 Windows Store Apps Essentials 1. Create a blank application by selecting File  New Project  Blank App (XAML). 2. Enter name of the project as GridDemo and click OK. 3. Add the code shown in Code Snippet 3 to MainPage.xaml. Code Snippet 3: V 1.0 © OnlineITtuts Limited

  19. Session1 Windows Store Apps Essentials <Page x:Class=” GridDemo.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:App25” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/markupcomp atibility/2006” mc:Ignorable=”d”> <Grid Grid.Column=”4” Grid.Row=”2” Background=”Beige” Opacity=”10” Visibility=”Visible”> <Button Content=”Click Me 1” HorizontalAlignment=”Left” Margin=”59,27,0,0” VerticalAlignment=”Top” Height=”126” Width=”256” Background=”Blue” Foreground=”White”/> <Button Content=”Click Me 2” HorizontalAlignment=”Left” Margin=”331,189,0,0” VerticalAlignment=”Top” Height=”126” Width=”256” Background=”Blue” Foreground=”White”/> <Button Content=”Click Me 3” HorizontalAlignment=”Left” Margin=”916,27,0,0” VerticalAlignment=”Top” Height=”126” Width=”256” Background=”Blue” Foreground=”White”/> <Button Content=”Click Me 4” HorizontalAlignment=”Left” Margin=”331,27,0,0” VerticalAlignment=”Top” Height=”126” Width=”256” Background=”Blue” Foreground=”White”/> <Button Content=”Click Me 5” HorizontalAlignment=”Left” Margin=”620,27,0,0” VerticalAlignment=”Top” Height=”126” Width=”256” Background=”Blue” Foreground=”White”/> <Button Content=”Click Me 6” HorizontalAlignment=”Left” Margin=”620,189,0,0” VerticalAlignment=”Top” Height=”126” Width=”256” Background=”Blue” Foreground=”White”/> <Button Content=”Click Me 7” HorizontalAlignment=”Left” Margin=”916,189,0,0” VerticalAlignment=”Top” Height=”126” Width=”256” Background=”Blue” Foreground=”White”/> <Button Content=”Click Me 8” HorizontalAlignment=”Left” Margin=”59,188,0,0” VerticalAlignment=”Top” Height=”126” Width=”256” Background=”Blue” Foreground=”White”/> </Grid> V 1.0 © OnlineITtuts Limited

  20. Session1 Windows Store Apps Essentials </Page> The output of the code is shown in figure 1.8. Figure 1.8: Grid with Four Columns and Two Rows  VariableSizedWrapGrid VariableSizedWrapGrid is used to style the grid layout panel for each tile or cell, which change their sizes based on contents in it. The elements are arranged in rows or columns and are automatically wrapped until the MaximumRowsOrColumns value is reached. Each cells size is specified using ItemHeight and ItemWidth (in pixels). Child elements can use VariableSizedWrapGrid.ColumnSpan and VariableSizedWrapGrid.RowSpan (values as cell counts) to adjust inside the screen. WrapGrid and VirtualizingStackPanel are panels that can only be used to display items in an ItemsControl. The step-by-step procedure to use a VariableSizedGrid control is as follows: 1. Create a blank application by selecting FileNew Project Blank App (XAML). 2. Enter name of the project as VariableSizedGridDemo and click OK. 3. Add the code shown in Code Snippet 4 to MainPage.xaml. Code Snippet 4: V 1.0 © OnlineITtuts Limited

  21. Session1 Windows Store Apps Essentials <Page x:Class=” VariableSizedWrapGridDemo.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:App26” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/ markup- compatibility/2006” mc:Ignorable=”d”> <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> <VariableSizedWrapGrid Orientation=”Horizontal”> <Rectangle Width=”150” Height=”400” Margin=”50” Fill=”Blue” /> <Rectangle Width=”150” Height=”50” Margin=”5” Fill=”Red” /> <Rectangle Width=”150” Height=”150” Margin=”15” Fill=”Green” /> <Rectangle Width=”150” Height=”300” Margin=”5” Fill=”Red” /> <Rectangle Width=”150” Height=”180” Margin=”5” Fill=”Yellow” /> </VariableSizedWrapGrid> </Grid> </Page> The output of the code is shown in figure 1.9. V 1.0 © OnlineITtuts Limited

  22. Session1 Windows Store Apps Essentials Figure 1.9: VariableSizedWrapGrid 1.1.5 Snapping and Resizing When the user needs to access more than one task at a time, he/she can snap the screen. The default width of a snap screen is 320px wide. To create a snap screen, the user has to navigate the mouse pointer to the upper-left part of the screen and drag the thumbnail to the right. This will have a large screen width of 1024px, whereas if the user drags the thumbnail to the left, the screen will be small with the size of 320px width. The user must design the apps, which look good when viewed in any size, so that the app can support different resolutions and orientations. Note - Windows 8 allows snapping feature when the screen resolution is more than 1366 x 768; In Windows 8.1, the minimum resolution is not required. It works with all resolution types. The user either can change the size of some apps or can display many apps on single screen. The minimum height of an app always fits the height of the screen. Support for Window Resizing: The user can change the size of the window to any width they require. Meanwhile, the user can rotate or flip tablets or monitors. Windows 8 handles both orientations automatically. The user only needs to consider how the app’s size affects its layout. Windows apps can run on different resolutions from a small tablet to a laptop or desktop. The result is that on these large resolutions, there is more space and on the smaller screen, there is less space. However, Windows automatically adjusts the screen as per the screen size of the device on which this application is viewed. Figure 1.10 shows an example of the snapping of apps in Windows 8. The Calendar app and the browser window are snapped. 1.2 Creating User Interfaces with XAML The user interface is reusable. The main problems within the presentation layer of the application lies under business logic, business services, and data. To create and use these components, the user must understand fundamental UI concepts. The UI also provides tools for designing user interfaces in app. UIs can make use of resources defined in XAML. V 1.0 © OnlineITtuts Limited

  23. Session1 Windows Store Apps Essentials 1.2.1 Accessing Resources in XAML A resource can be accessed and used anywhere in the application. Brushes and styles are the best instances of resources. Virtually, anything can be changed to a resource. Solid, Gradient, or Tile brush can be created as a resource and used in the application. The user can assign resources at object-level, document-level, dictionary-level, and application-level. The resource editors help the user to produce a resource file with .resw extension. The following steps show how to use the TextBlock, TextBox, and Button controls and how to write the code to handle the Button_Click event. 1. Create a blank application by selecting File New Project Blank App (XAML). 2. Enter name of the project as EventHandlingDemo and click OK. 3. Add the code shown in Code Snippet 5 to MainPage.xaml. Code Snippet 5: V 1.0 © OnlineITtuts Limited

  24. Session1 Windows Store Apps Essentials <Page x:Class=”EventHAndlingDemo.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using: EventHAndlingDemo “ xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/ markup-compatibility/2006” mc:Ignorable=”d”> <Grid Background=”Beige”> <TextBlock Text=”Message” Height=”40” Width=”200” Margin=”20” VerticalAlignment=”Top” HorizontalAlignment=”Left” Foreground=”Blue” FontSize=”30”/> <TextBox Name=”MyName” Height=”40” Width=”300” VerticalAlignment=”Top” HorizontalAlignment=”Left” Margin=”160,20”/> <Button Content=”Click Me” Margin=”470,20” VerticalAlignment=”Top” Height=”40” Width=”100” Background=”Green” Click=”Button_Click”/> </Grid> </Page> 4. Double-click the Button control or open MainPage.xaml.cs file and add the code shown in Code Snippet 6 in it. Code Snippet 6: public sealed partial class MainPage : Page { public MainPage() { this.InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { MyName.Text = “Welcome To OnlineITtuts Ltd.”; V 1.0 © OnlineITtuts Limited

  25. Session1 Windows Store Apps Essentials } } Figure 1.11 shows the output of the EventHandlingDemo program. Figure 1.11: Using TextBlock, TextBox, and Button 1.2.2 Resource Dictionary Resource dictionary has a collection of objects (resources) inside the dictionary, which can be developed by the user using the programming code in C#. The ResourceDictionary has two properties, namely FrameworkElement.Resources and Application.Resources. Generally, the user prescribes FrameworkElement.Resources value inside the root element of the app page. Resource dictionary can be divided into Styles, Templates, Colors, Brushes, and Transmutes. The MergedDictionary can be used to merge many dictionaries and refers to the external file, as shown in figure 1.12. Figure 1.12: Dictionaries The following example shows how to create a resource dictionary. The resource files can be accessed through the Windows.ApplicationModel.Resources.ResourceLoader namespace. 1. Create a new project named DictionaryDemo. 2. Right-click ProjectAdd New Item as shown in figure 1.13. V 1.0 © OnlineITtuts Limited

  26. Session1 Windows Store Apps Essentials Figure 1.13: Adding New Item in a Project 3. Select Resource Dictionary option. Enter name of the dictionary as MyDictionary.xaml as shown in figure 1.14. Figure 1.14: Adding a Resource Dictionary Item 4. Double-click MyDictionary.xaml, as shown in figure 1.15. Figure 1.15: Selecting MyDictionary.xaml to Add Resource Code 5. Enter the code shown in Code Snippet 7 into the dictionary file, MyDictionary.xaml. Code Snippet 7: <ResourceDictionary xmlns=”http://schemas.microsoft.com/winfx/2006/ xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”> <SolidColorBrush x:Key=”scbColor” Color=”#800800”/> </ResourceDictionary> 6. Add the code shown in Code Snippet 8 to MainPage.xaml file. This is where the Resource Dictionary will be applied. Code Snippet 8: V 1.0 © OnlineITtuts Limited

  27. Session1 Windows Store Apps Essentials <Page x:Class=”DictionaryDemo.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:DictionaryDemo” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/markupcompatibility/2006” xmlns:local=”using:DictionaryDemo.DictionaryDemo_XamlTypeInfo” mc:Ignorable=”d”> <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> <TextBlock Text=”Hello World” Foreground=”{StaticResource scbColor}” FontSize=”30” Margin=”573,78,593,0” Height=”50” Width=”200” VerticalAlignment=”Top”/> </Grid> </Page> 1.2.3 Changing Appearance of XAML Controls Using the visual properties from the resource dictionary, the user can define styles for any controls. Code Snippet 9 shows how to style the controls. Each control contains many properties such as background color, foreground color, font, alignment, and so on. For customizing the controls, the template can be created using ControlTemplate class, as shown in figure 1.16. First, create a page CheckBoxDemo.xaml and add the code shown in Code Snippet 9. Code Snippet 9: <Page x:Class=”CheckBoxDemo.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:App3” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006” mc:Ignorable=”d”> <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> <CheckBox Content=”CheckBox” IsThreeState=”True” Margin=”100”/> V 1.0 © OnlineITtuts Limited

  28. Session1 Windows Store Apps Essentials <CheckBox Content=”CheckBox” IsThreeState=”True” Margin=”200”/> <CheckBox Content=”CheckBox” IsThreeState=”True” Margin=”300”/> </Grid> </Page> The output of Code Snippet 9 is shown in figure 1.16. Figure 1.16: CheckBox with Three States 1.2.4 Presenting Data in XAML The user can bind the data using simple methods in C# to interact with the controls. For example, the ForeColor of a TextBox can be called through SolidColorBrush to change the style of the value, which can be change of its data. Code Snippet 10 shows how to assign the color for TextBox. The binding source is a property of the Style class. Code Snippet 10 shows how to add the style. Code Snippet 10: <TextBox x:Name=”MyTextBox” Text=”Text” Foreground=”{Binding Brush1}”/> // Create an instance of the Style class // that implements INotifyPropertyChanged. MyColors textcolor = new Style (); // Brush1 is set to be a SolidColorBrush with the value Red. textcolor.Brush1 = new SolidColorBrush(Colors.Red); // Set the DataContext of the TextBox MyTextBox. txtSample.DataContext = textcolor; V 1.0 © OnlineITtuts Limited

  29. Session1 Windows Store Apps Essentials 1.2.5 Navigating Between Pages in a Windows Store App When an app is created, the user must ensure that there is support for page navigation between pages. There are some predefined templates, which are preinstalled in Visual Studio 2013 for navigation. The following steps show how to navigate within the pages in the application. 1. Create a blank application named PageNavigation. 2. Add two pages named Navigate1.xaml and Navigate2.xaml, using the option as shown in figure 1.17. Figure 1.17: Add New Item in the Application Design the page by creating two buttons inside MainPage.xaml as shown in figure 1.18. 3. Figure 1.18: Adding Buttons to Main Page 4. Add the code shown in Code Snippet 11 to MainPage.xaml file. Code Snippet 11: <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> <Button Content=”First Page” HorizontalAlignment=”Left” Margin=”536,160,0,0” VerticalAlignment=”Top” Height=”130” Width=”261” Click=”Button1_Click”/> <Button Content=”Second Page” HorizontalAlignment=”Left” Margin=”536,398,0,0” VerticalAlignment=”Top” Height=”130” Width=”261” Click=”Button2_Click”/> </Grid> V 1.0 © OnlineITtuts Limited

  30. Session1 Windows Store Apps Essentials 5. Add the code shown in Code Snippet 12 in MainPage.xaml.cs file. Code Snippet 12: private void Button1_Click (object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(Navigate1), null); } private void Button2_Click(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(Navigate2), null); } The output of the application is displayed as shown in figure 1.19. Figure 1.19: Output of First Page 6. Add the code shown in Code Snippet 13 to Navigate1.xaml file. Code Snippet 13: <Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> <Button Content=”Go Back to Home” HorizontalAlignment=”Left” VerticalAlignment=”Top” Margin=”644,394,0,0” Height=”95” Width=”190” Click=”Button_Click”/> <TextBlock HorizontalAlignment=”Left” Margin=”540,201,0,0” TextWrapping=”Wrap” Text=”Welcome to Page 1” VerticalAlignment=”Top” Height=”89” Width=”526” FontSize=”48”/> </Grid> 7. Add the code shown in Code Snippet 14 to Navigate1.xaml.cs file. Code Snippet 14: private void Button_Click (object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(MainPage), null); } The Navigate2.xaml page is created as shown in figure 1.20. V 1.0 © OnlineITtuts Limited

  31. Session1 Windows Store Apps Essentials Figure 1.20: Output of Second Page 8. Add the code shown in Code Snippet 15 into page Navigate2.xaml. Code Snippet 15: Grid Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}”> <Button Content=”Go Back to Home” HorizontalAlignment=”Left” VerticalAlignment=”Top” Margin=”644,394,0,0” Height=”95” Width=”190” Click=”Button_Click”/> <TextBlock HorizontalAlignment=”Left” Margin=”540,201,0,0” TextWrapping=”Wrap” Text=”Welcome to Page 2” VerticalAlignment=”Top” Height=”89” Width=”526” FontSize=”48”/> </Grid> 9. Add the code shown in Code Snippet 16 in Navigate1.xaml.cs file. Code Snippet 16: private void Button_Click(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(MainPage), null); } 1.3 Animations and Transitions Animations and transitions are the most essential thing for better user experience in Windows 8 apps. Animations should be shown when there is a need for it. If there is any update or a task running in the background, then animations are shown. The developer should develop applications to impress the app user by providing proper animations and transitions. 1.3.1 Creating Animations and Transitions in a Windows Store App Here, you will see how to create a simple animation. Create a blank application. In MainPage.xaml file, write the code shown in Code Snippet 17. Code Snippet 17: <StackPanel> <StackPanel.Resources> Storyboard x:Name=”EnterStoryboard”> <FadeOutThemeAnimation Storyboard.TargetName=”ftaRect” /> </Storyboard> V 1.0 © OnlineITtuts Limited

  32. Session1 Windows Store Apps Essentials <Storyboard x:Name=”ExitStoryboard”> <FadeInThemeAnimation Storyboard.TargetName=” ftaRect” /> </Storyboard> </StackPanel.Resources> <Rectangle x:Name=”ftaRect” PointerEntered=”Rectangle_Click” PointerExited=”Rectangle_Click2” Fill=”Gray” Width=”100” Height=”300” /> </StackPanel> private void Rectangle_Click(object sender, PointerRoutedEventArgs e) { EnterStoryboard.Begin(); } private void Rectangle_Click1(object sender, PointerRoutedEventArgs e) { ExitStoryboard.Begin(); } When the page is loaded, the rectangle appears by default, as shown in figure 1.21. Figure 1.21: Output of Storyboard On Loading If the user loads the same page again, the rectangle disappears. 1.3.2 Appropriate and Inappropriate Content Transitions While creating empty container, the user can use content transitions to create new items. For example, when the app is loaded, some part inside the app cannot be seen initially, but once the app is ready, then the animation to load the content will be shown. The user can move the content from one part of the container to another part using content transitions. This transition is already in-built in the container. For example, in an email inbox, it may show the content by sliding to general page. When an animation is displaying the content from the left side, then the new content must come from the right. Arrange each content logically. When there is more than one container, then update them by triggering all together with transition animation. Whenever the whole page changes, the user must not use content transition animations, instead the user can call the Page transition animations. Use Fade animations to refresh the content instead of refreshing the container. V 1.0 © OnlineITtuts Limited

  33. Session1 Windows Store Apps Essentials 1.3.3 Creating Key Frame Animations Key frame animations are specified with the animation timeline and it is declared by using different sub classes for each animation. If the user targets Double data type values for animation, then he/she must have animation types such as Linear, Easing, Discrete, or Spline. The user can set the Timeline property based on the key frame for setting the Duration such as:  AutoReverse: When the key frame reaches the end of the animation. Then, it repeats the frames in the reverse order.  BeginTime: The user can set the start time of the timeline for the animation inside the app.  FillBehavior: This does not have any effect. It controls what should be done when it reaches the last key frame.  RepeatBehavior:  If the user sets the property as Forever, the timeline animation will be played continuously.  If the user sets the property to a certain count, the timeline animation will be played up to the count.  If the user sets the Duration, inside the timeline, then it will repeat up to the duration specified.  SpeedRatio: It is a property, which is not used in most often. It sets the speed ratio of the animation.  Linear Key Frame In linear key frame animation, the animation progresses at a constant rate of the segment duration. For example, if a key-frame segment transitions from 0 to 100 over a duration of 10 seconds, the animation shows each key frame in the linear order with equal duration between display of the next frame. Code Snippet 18 shows how to create a linear key frame. Code Snippet 18: <StackPanel> <StackPanel.Resources> <Storyboard x:Name=”SampleBoard”> <DoubleAnimationUsingKeyFrames Storyboard.TargetName=”myRect” Storyboard.TargetProperty=”(UIElement.RenderTransform). (ScaleTransform.ScaleY)”> V 1.0 © OnlineITtuts Limited

  34. Session1 Windows Store Apps Essentials <LinearDoubleKeyFrame Value=”1” KeyTime=”0:0:0” /> <LinearDoubleKeyFrame Value=”1.2” KeyTime=”0:0:4” /> <LinearDoubleKeyFrame Value=”2” KeyTime=”0:0:5” /> </DoubleAnimationUsingKeyFrames> </Storyboard> </StackPanel.Resources> </StackPanel>  Discrete Key Frame In discrete key frame animation, the animation function jumps from one value to the next without interpolation. It sets a new value depending on the animation in the UI. Code Snippet 19 shows how to create a Discrete Key Frame. Code Snippet 19: <Storyboard x:Name=” SampleBoard”> <DoubleAnimationUsingKeyFrames Storyboard.TargetName=”TestTransform” Storyboard.TargetProperty=”X” Duration=”0:0:10” EnableDependentAnimation=”True”> <LinearDoubleKeyFrame Value=”500” KeyTime=”0:0:3” /> <DiscreteDoubleKeyFrame Value=”400” KeyTime=”0:0:4” /> SplineDoubleKeyFrame KeySpline=”0.6,0.0 0.9,0.00” Value=”0” KeyTime=”0:0:6” /> </DoubleAnimationUsingKeyFrames> </Storyboard> V 1.0 © OnlineITtuts Limited

  35. Session1 Windows Store Apps Essentials  Easing Key Frame This works based on the calculation provided by the user. Easing has a set of functions, some of which are listed as follows:  BackEase: In this type of easing function, the animation goes slightly backward before it begins to animate in the indicated path.  CircleEase: In this type of easing function, the animation moves using a circular path.  BounceEase: In this type of easing function, the animation adds a bouncing effect.  ElasticEase: In this type of easing function, an animation is created that is similar to a spring oscillator back and forth until it stops.  SineEase: In this type of easing function, an animation is created that moves using a sine formula. Code Snippet 20 shows how to create an easing key frame. Code Snippet 20: <StackPanel x:Name=”LayoutRoot” Background=”White”> <StackPanel.Resources> <Storyboard x:Name=”SampleBoard”> <DoubleAnimation From=”30” To=”200” Duration=”00:00:3” Storyboard.TargetName=”myRect” Storyboard.TargetProperty=”(UIElement. RenderTransform).(ScaleTransform.ScaleY)”> <DoubleAnimation.EasingFunction> <BounceEase Bounces=”2” EasingMode=”EaseIn” Bounciness=”2” /> </DoubleAnimation.EasingFunction> </DoubleAnimation> </Storyboard> </StackPanel.Resources> <Rectangle x:Name=”myRect” Fill=”Blue” Width=”200” Height=”30” /> </StackPanel> 1.3.4 Functions in Animations The various functions related to animations are as follows: V 1.0 © OnlineITtuts Limited

  36. Session1 Windows Store Apps Essentials  Page Transitions The page will be animated within the view, which means it will be shown at the time of each transition. Page Transitions have their own Application Programming Interfaces (APIs) namely, enterPage and exitPage.  Content Transitions The contents in the page will be animated independently. Content Transitions have their own APIs namely, enterContent and exitContent.  Fade In/Out The controls or UI will be animated using Fade In/Out. The Fade In/Out have their own APIs namely, fadeIn and fadeOut.  Crossfade When there is a change inside content, this crossfade functionality will be called smoothly. It uses crossfade API.  Pointer Up/Down When the mouse is hovered over a tile, the animation is invoked. This Pointer Up/Down uses pointerUp and pointerDown API.  Expand/Collapse When the user hovers over the content, it will expand the sub content. Collapse animation is called when the mouse is hovering out the createExpandAnimation and createCollapseAnimation API. content. This Expand/Collapse uses  Reposition To show the content to a new position, the Reposition animation function is used. The Reposition function uses the createRepositionAnimation API.  Show/Hide Popup To show or hide the contextual UI, the Show/Hide Popup animation is called. This uses showPopup and hidePopup API. This is shown when the mouse is moved to the bottom of the page, inside any app.  Show/Hide EdgeUI To show or hide the Edge based UI, the Show/Hide EdgeUI animation is called. This uses showEdgeUI and hideEdgeUI API. V 1.0 © OnlineITtuts Limited

  37. Session1 Windows Store Apps Essentials  Show/Hide Panel To show or hide the panel, the Show/Hide Panel animation is called. This uses showPanel and hidePanel API. This is shown when the mouse is moved to the left side of the page, inside any app. 1.3.5 Working with Transitions and Transformations When the user navigates from one page to another within the app, a splash screen/some animation is shown. This kind of animations is called Transitions. To give a fluid UI to the user, there is a built-in Transition class in Windows 8. To show a single Transition animation inside the page, the user has to write the code shown in Code Snippet 21. Code Snippet 21: <Grid Background=”{StaticResource ApplicationPageBackgroundBrush}”> <Grid.Resources> <Style x:Key=”btnStyle” TargetType=”Button”> <Setter Property=”Transitions”> <Setter.Value> <TransitionCollection> . . . . . . <EntranceThemeTransition/> </TransitionCollection> </Setter.Value> </Setter> </Style> </Grid.Resources> <Button Style=”{StaticResource btnStyle}” Content=”Transition Animation is applied” /> </Grid> The transitions types are as follows:  AddDeleteThemeTransition  ContentThemeTransition  V 1.0 © OnlineITtuts Limited

  38. Session1 Windows Store Apps Essentials EdgeUIThemeTransition  EntranceThemeTransition  PopupThemeTransition  ReorderThemeTransition  RepositionThemeTransition  TransitionCollection Class This class is called when there is more than one object. The code shows how to call the TransitionCollection class and get the objects in a list. public sealed class trsnCol: IList<Transition>, IEnumerable<Transition> The TransitionCollection class types are as follows:  Border.ChildTransitions  ContentControl.ContentTransitions (on content controls such as Button or AppBar)  ContentPresenter.ContentTransition s  ItemsControl.ItemContainerTransitions (on such as GridView, ListBox, ListView, and Selector) items controls  ItemsPresenter.FooterTransitions  ItemsPresenter.HeaderTransitions  ListViewBase.FooterTransitions  ListViewBase.HeaderTransitions V 1.0 © OnlineITtuts Limited

  39. Session1 Windows Store Apps Essentials  Panel.ChildrenTransitions (on Grid, StackPanel, and other panels)  Popup.ChildTransitions  SettingsFlyoutTemplateSettings.ContentTransitions  UIElement.Transitions (on hundreds of classes)  Transformation Consider an example that shows how to transfer data from one page to another. 1. Create a blank application. 2. Create two pages named First.xaml and Second.xaml. In FirstPage.xaml page, write the code shown in Code Snippet 22. Code Snippet 22: <Page x:Class=”navigation.page1” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:navigation” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/markupcompatibility/2006” mc:Ignorable=”d”> <Grid ApplicationPageBackgroundThemeBrush}”> Background=”{StaticResource <StackPanel> <TextBlock Name=”txtSample” Text=”User Name” FontSize=”22” Margin=”50” Height=”50”Width=”150”/> </StackPanel> <StackPanel Orientation=”Vertical” Margin=”100”> <StackPanel Orientation=”Horizontal” > <TextBlock Name=”txtb_f_name” Text=”Please enter your Name” FontSize=”22”/> <TextBox Name=”txtF_name” Height=”50” Width=”150”></TextBox> </StackPanel> </StackPanel> V 1.0 © OnlineITtuts Limited

  40. Session1 Windows Store Apps Essentials <StackPanel Grid.Row=”1” Margin=”550”> <HyperlinkButton x:Name=” btnProceed” Content=”Next Page” FontSize=”22”Margin=”110” Width=”500” Click=”btnProceed_Click”/> </StackPanel> </Grid> </Page> 3. In the FirstPage.xaml.cs file, write the code shown in Code Snippet 23. Code Snippet 23: private void btn1_Click(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(page2),txtF_name.Text); //for navigating the second page and transfer the value of textbox from 1st page to 2nd page. } 4. In Second.xaml page, write the code shown in Code Snippet 24. Code Snippet 24: <Page x:Class=”navigation.page2” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:local=”using:navigation” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/markupcompatibility/2006” mc:Ignorable=”d”> V 1.0 © OnlineITtuts Limited

  41. Session1 Windows Store Apps Essentials <Grid Background=”{StaticResource ApplicationPageBackgroundThemeBrush}”> <StackPanel Margin=”463,20,-463,-20”> <TextBlock Name=”lbl” Text=”Secondpage” FontSize=”22”/> </StackPanel> <StackPanel Orientation=”Vertical” Margin=”200,300,0,0”> <StackPanel Orientation=”Horizontal”> <TextBlock Name=”txtbname” Text=”User Name” FontSize=”22”></TextBlock> <TextBox Name=”txtgetname” Width=”300” Height=”50” TextChanged= “txtgetname_TextChanged”></TextBox> </StackPanel> </StackPanel> <StackPanel Grid.Row=”1” Margin=” 550,200,0,0”> <HyperlinkButton Name=”btnget” Content=”Back to first Page” FontSize=”22” Click=”btnget_Click”></HyperlinkButton> </StackPanel> </Grid> </Page> In Second.xaml.cs file, write the code shown in Code Snippet 25. 5. Code Snippet 25: V 1.0 © OnlineITtuts Limited

  42. Session1 Windows Store Apps Essentials protected override void OnNavigatedTo(NavigationEventArgs e) { string s = e.Parameter as string; if (!string.IsNullOrWhiteSpace(s)) { txtgetname.Text = s; } else { txtgetname.Text = “Text can’t be blank on first page “; } } private void btnget_Click(object sender, RoutedEventArgs e) { this.Frame.Navigate(typeof(First)); } 1.4 Check Your Progress 1. ___________ is used to get the live updates from the Internet. (A) Live tile (C) Snap (B) Hub (D) Notification 2. The ___________ is the content page for all the apps developed in a Windows 8 application. (A) Splash Page (C) Hub Page (B) Detail Page (D) App Page 3. Which of the following is not required to begin developing Windows 8 apps? A developer license registered with Hotmail ID (A) Windows 8 or higher (C) V 1.0 © OnlineITtuts Limited

  43. Session1 Windows Store Apps Essentials Microsoft Visual Studio Express 2012 or higher An application can produce output based on the size of the devices using the ______________. (B) (D) Web Host 4. (A) XAML (C) Panel System (B) Grid System (D) Canvas Layout 5. Solid, Gradient, or Tile brush can be created as a resource and used in the application as a ____________. (A) Live Tile (C) Predefined templates (B) Resource Dictionary (D) SkyDrive 1.4.1 Answers 1. A 2. B 3. D 4. B 5. A V 1.0 © OnlineITtuts Limited

  44. Session1 Windows Store Apps Essentials Summary  Windows Store is a Windows 8 based platform that allows for the distribution and purchase of apps designed for Windows 8.  App bars are applied to perform actions on substances, such as filtering results or navigating within the app or deleting photos.  In Windows Store apps, you can use XAML to create various types of containers and controls.  User can create a snap screen by navigating the mouse pointer to the top left of the screen and dragging the thumbnail to the right.  Windows apps can run on different resolutions from a small tablet to a laptop or desktop.  By using resource dictionaries, the code in Windows Store apps can be made reusable.  A ResourceDictionary has two properties, namely FrameworkElement.Resources and Application. Resources to take the values. V 1.0 © OnlineITtuts Limited

  45. Session - 2 Windows Store UI Localization Welcome to the Session, Windows Store UI Localization. This session explains the process of localizing Windows Store Apps. In this Session, you will learn to: Define and describe Localization Describe the process to implement localization in Store apps Explain the process of integrating resource files in Store apps

  46. Session2 Windows Store UI Localization 2.1 Understanding Localization Localization is the concept of translating the content to a specific language by means of multi-lingual support. Visual Studio Integrated Development Environment (IDE) is built-in such a way that it can be used to develop applications for various countries with their local language support. In Windows Store apps, Visual Studio has introduced a new localization technique called Hub and Spoke. The hub and spoke model is designed to provide a home screen for the app to which all other screens will navigate in a linear manner. Hub: A Hub control helps you create multiple sections or multiple types of data all under one core. XAML and C# include support for the Hub control. Unlike the ListView control which enables you to render and display homogeneous data, the Hub control is useful for data that are of various kinds. Spoke: A Spoke is a set of connections arranged similar to a wheel through which traffic moves along spokes connected to the hub at the center. Whenever a user wishes to check for information, he/she can click the spoke. When the user wants to come back to main page again, he/she needs to select the hub. Thus, a spoke is a central or pivotal node of information or contents. 2.1.1 .NET Localization CultureInfo.CurrentCulture is the property that is used to set the culture of an app to current culture. Before checking an app for localization, the developer must develop an app and change the language through the Control Panel to test for localization. To set the language: 1. Open Control Panel, click Language and Region, and navigate to Language. Figure 2.1 shows the different languages in the Control Panel. V 1.0 © OnlineITtuts Limited

  47. Session2 Windows Store UI Localization Figure 2.1: Language Preference Window For packing and deployment, the .NET Framework uses the Hub and Spoke model. The main assembly for the app is the Hub, which holds the code to be executed. The satellite assembly is connected through spokes and hence, coding is not required. Note - For each app, implementing localization creates a new assembly namely, Hub, which has the local language specifications. Figure 2.2 shows how each Spoke is connecting to the Hub. Figure 2.2: Hub and Spoke Model 2.1.2 Localizing Your App Generally, to globalize an application, there is no need for any code for its cultural settings, but in case of Localization, cultural settings must have their own code and images to translate the app. Figure 2.3 shows an example of how localization occurs. Figure 2.3: Localizing the Text for en-Us Culture String Data When a user develops a store app, it may contain more text than images. If the app is required to localize the text in the app, the text must be placed inside the associated resource files. These resource files should be created in the directory named as strings and identified through an extension .resw. Each language must be created under its own language folder, under the respective strings folder. Images Localizing images is easier than localizing the text. A folder named images is created and then, all the images are stored in this folder and the same name is given to the image files kept in the different language folders. Figure 2.4 shows how to create the folders and the image files. Figure 2.4: Localizing Images for Each Currency Code If users develop Store apps without any text or culture info, then there is no need for localizing the app. To localize the images of the apps, the images must be placed inside the resources folder as shown in figure 2.4. Figure 2.4 shows the currency code for each country placed under its own resource folder namely, en, fr, and ja. Note - When the user develops a localization app, the size of the app will increase if there are more images. V 1.0 © OnlineITtuts Limited

  48. Session2 Windows Store UI Localization Date and Time As shown in figure 2.5, Date and Time data are available in different formats. The user should not change the date and time manually while developing the apps. Windows.Globalization.DateTimeFormatting.DateTimeFormatter is a date and time format class that allows the user to customize the date and time when the user develops an app. Figure 2.5: Date Formats in Regional Settings Instead, make use of the Windows.Globalization.DateTimeFormatting.DateTimeFormatter class. Whenever the user develops an app using DateTimeFormatter class, he/she has to convert it as a string value to get the output, as shown in the following statement: DateTimeFormatter df = new DateTimeFormatter(“shortdate”); Now, use this formatter to format a date: var sdate = shortDateformatter.Format(DateTime.Now); The user can send these values in string format to any constructors. The user must make sure to avoid the formats that are not available in all languages. The users can use following formats while developing their app:  Shortdate  Shorttime  Hour  Minute  Second  Day  Month  Year  Dayofweek  Day Month Year Numbers and Currencies The users can convert string to number or number to string using numbers and currency formatter classes. The following formats can be called while developing their apps:  CurrencyFormatter  PermilleFormatter  DecimalFormatter  PercentFormatter Code Snippet 1 explains the usage of the CurrencyFormatter class. Code Snippet 1: var c = Windows.System.UserProfile.GlobalizationPreferences.Currencies[0]; var cf = new Windows.Globalization.NumberFormatting.CurrencyFormatter(c); var cn = 1; var cfd = cf.Format(currencyNumber); var cp = cf.ParseDouble(cfd); V 1.0 © OnlineITtuts Limited

  49. Session2 Windows Store UI Localization When working with the formatters, set the IsGrouped and FractionDigits properties. These properties will decide whether to display the group separator and minimum number of fractional digits to be displayed. 2.1.3 Localizing Your Manifest Before sharing the app to Windows market, the user must localize the manifest which is used to view the translated content of the app in the Windows Store. Localization can be applied in different values of the manifest:  Name and description  Descriptions inside Declaration page  Content Uniform Resource Identifier (URI) Inside the Package.appxmanifest, languages can be set by default in Visual Studio Editor. Inside UI default language, this language is known as fallback language for the app. Inside the manifest file, the user must declare the ms-resource:<identifier> and refer the resource strings. Figure 2.6 shows an example. Figure 2.6: App Manifest Settings 2.2 Language Definition in Windows Store Apps The user must check the languages to be declared in the app inside the Manifest file. Windows Store lists all the languages that can be localized. By default, the app takes the language provided in the Control Panel. The default language can be changed by changing the languages in the manifest file. 2.2.1 Applying Language-Specific Formatting for Multilingual App To develop a Multilingual Store app, the user must download Multilingual Toolkit which is required for translating the app in Visual Studio that is used to localize app translations. After installing the Toolkit, the following steps must be performed for enabling Multilingual Toolkit. 1. Launch Visual Studio 2013. 2. Enable Multilingual option by navigating to ToolsEnable Multilingual App Toolkit option as shown in figure 2.7. This creates the resource files languages required and also for a pseudo language. The pseudo language is needed for testing Store apps to ensure that text is used from inside the resource files. V 1.0 © OnlineITtuts Limited

  50. Session2 Windows Store UI Localization Figure 2.7: Enabling Multilingual App Toolkit 3. Now, select Add translation languages from the Project menu to add multiple languages. This is shown in figure 2.8. Figure 2.8: Adding Multiple Languages 4. Then, select the required languages from the Translation Languages dialog box and click OK. Figure 2.9 shows how to select a language. Figure 2.9: Selecting the Required Languages 2.2.2 Implementing .resw Files to Translate Text The user can create a multi-lingual app by creating a resource file which has an extension .resw and integrate that into the app. These files can be called through a simple reference in the code. The resource file design is shown in figure 2.10. Figure 2.10: Creating Resource File (.resw) After creating the resource file, write the code as shown in Code Snippet 2. Code Snippet 2 demonstrates the use of multi-language support for Store apps. In the code, a ComboBox control is created with three different languages. On appropriate language selection, a message from respective resource files will be shown as output on the button Click event. Code Snippet 2: MainPage.xaml V 1.0 © OnlineITtuts Limited

More Related