Developing Mobile Applications Using Windows Phone_INTL

Developing Mobile Applications

Using Windows Phone

Learner’s Guide

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 Aptech Limited.

All trademarks acknowledged. APTECH LIMITED

Contact E-mail: [email protected] Edition 1 - 2014

Dear Learner,

We congratulate you on your decision to pursue an Aptech course.

Aptech 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 to find the educational and training needs of the learner Technology trends are regularly scanned and tracked by core teams at Aptech Ltd. TAG* analyzes these on a monthly basis to understand the emerging technology training needs for the Industry.

An annual Industry Recruitment Profile Survey is conducted during August - 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.

The skill requirements are then mapped with the learner profile (user system) to derive the Learning objectives for the different roles.

¾ 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

The content outlines are developed by including additional topics that are required for the completion of the domain and for the logical development of the competencies identified. Evaluation strategy and scheme is developed for the subject. The topics are arranged/organized in a meaningful sequence.

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 appropriate instructional strategies (training methodology), instructional activities and instructional materials.

The area of IT is fast changing and nebulous. Hence, considerable flexibility is provided in the instructional process by 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 insufficient information are some of the aspects, which are incorporated, in the instructional process.

¾ Assessment of learning

The learning is assessed through different modes – tests, assignments & projects. The assessment system is designed to evaluate the level of knowledge & skills as defined by the learning objectives.

¾ 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 pre-paid form appended at the end of each module.

*TAG – Technology & Academics Group comprises members from Aptech Ltd., professors from reputed Academic Institutions, Senior Managers from Industry, Technical gurus from Software Majors & representatives from regulatory organizations/forums.

Technology heads of Aptech 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 Aptech Ltd.

Scanning the user system and needs assessment Evaluation of Instructional Processes and Material Need Analysis and design of curriculum Assessment of learning Design and development of instructional material Strategies for delivery of instructions Key Aspects

Aptech New Products Design Model

1

2

3

4

5

The book, Developing Mobile Applications Using Windows Phone, introduces you to the basic and important aspects of creating mobile apps in Windows Phone 8.

Mobile app development is the order of the day in this modern era. Thus, creating mobile apps offer tremendous scope for all those who have a passion for User Interface (UI) design or application programming or both. With Windows Phone 8, learning to design mobile apps becomes much more convenient and faster because of various developer-friendly programming tools and front-end tools. The IT software giant, Microsoft, began its journey of mobile operating systems in the year 2000, with its introduction of Windows Mobile. In tune with the constant changing times, Microsoft introduced a much more sophisticated mobile operating system called Windows Phone in the year 2010. Windows Phone 7 was the first of its series, which was packed with a whole lot of exciting features in a UI design called Metro. Windows Phone 8 was later introduced in 2012 as the successor of Windows Phone 7 and is currently one of the most popular mobile Operating Systems (OS) in the consumer world.

This book begins by introducing to you an overview of Windows Phone 8 and its unique features. As you progress, you will learn all the important aspects of effective UI design through eXtensible Application Markup Language (XAML) and implementation of key functionality in C#. Later on, you will explore the various ways to enhance app development through integration with various .NET languages and Application Programming Interfaces (APIs). Finally, you will learn about the range of operations pertaining to data handling, management, and storage in Windows Phone 8.

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 Aptech-IT Division, Education Support Services. As part of Aptech’s quality drive, this team does intensive research and curriculum enrichment to keep it in line with industry trends. We will be glad to receive your suggestions.

Design Team

Sessions

2. Overview of Windows Phone 8 User Interface 3. Working with Windows Phone 8

4. Implementing Notifications and Live Tiles

5. Working with Platform APIs, Tasks, and Choosers 6. Data Management in Windows Phone 8

Introduction to

Windows Phone 8

Session - 1

Welcome to the Session, Introduction to Windows Phone 8.

This session describes about the basics of Windows Phone 8, Windows Phone Software

Development Kit (SDK) 8, and some of the important terminologies used in Windows

Phone 8. You will also learn about some basic operations in Windows Phone 8 and

development as well as deployment of mobile applications in Windows Phone 8.

At the end of this session, you will be able to:

Î

_{Describe the important features of Windows Phone 8}

Î

List the hardware and software requirements of Windows Phone 8

Î

_{Explain the important terminologies in Windows Phone 8}

Î

_{Identify the purpose of Windows Phone SDK 8}

Î

List the system requirements for Windows Phone SDK 8

Î

_{Describe launching and closing applications in Windows Phone 8}

Î

_{Explain the process to deactivate and reactivate applications}

Î

_{Explain the steps involved in developing, executing, and deploying a}

Windows Phone application

Concepts

Session

1

1.1 Introduction

A few years earlier, spending on a Personal Computer (PC) was considered a big investment. With the introduction of Tablet PCs and Smartphones at affordable prices, packaged with mobility, convenience, and attractive utilities, personal computing has become more of a way of life rather than a luxury. Nowadays, people are able to perform a range of operations both online and offline through mobile applications on Smartphones, while being on the move. Thus, mobile application development offers tremendous scope and holds the key to our current and future growth in Information Technology. Today, there are a number of mobile operating systems available, one among which is Windows Phone 8.

1.2 Overview of Windows Phone 8

Windows Phone 8 is one of the most popular and innovative mobile operating systems offered by Microsoft. It is, in fact, the successor to Windows Phone 7, with enhanced features and utilities. Nokia, Samsung, HTC, and Huawei are some of the important manufacturers of Windows Phone 8-based mobile phones.

Figure 1.1 shows the opening screen of Windows Phone 8 in a Smartphone.

Concepts

Session

1

Note – A mobile operating system is an operating system that is specific to a range of mobile devices, such as Smartphones and Tablet PCs. Apart from Windows Phone 8, the other popular mobile operating systems available in the market are Google Android and Apple iOS.

1.2.1 Features of Windows Phone 8

Microsoft is always known for providing a powerful and an easy-to-use, or rather an addictive interface in its products to its users; Windows Phone 8 is no exception.

Some of the important features that make Windows Phone 8 a popular mobile operating system both for developers as well as for consumers in the mobile world are as follows:

Î Powerful Operating System

Windows Phone 8 is based on Windows NT kernel architecture, similar to Windows 8 operating system. This provides for enhanced security, file storage, memory, and graphics.

It also provides for multi-tasking capability, which enables developers to run an application in parallel as a background process, without affecting regular mobile operations.

Note – Windows 7 was developed by using Windows CE-based architecture. Hence, the upgrade option is not available from Windows Phone 7 to Windows Phone 8. Mobile applications created specifically for Windows 7 cannot be used in Windows Phone 8 as the compilation processes of both the mobile operating systems are different. However, mobile applications created in Windows Phone 7.1 can be upgraded to Windows Phone 8.

Î Attractive User Interface

The User Interface (UI) of Windows Phone 8 is called the Modern UI. It is simple, intuitive, and carefully planned to suit the limited display of Smartphones.

Commonly used options and features are organized in the form of tabs and rounded graphic icons, which make navigation simpler and faster for the users.

Î Social Networking

Windows Phone 8 provides ample support for social networking through E-Mail, Chat, and Skype conversations. Windows Phone 8 also creates and maintains contact pages in People Hub by integrating all the contact groups in various social networking sites, such as Facebook and Twitter. Internet Explorer 10 is the default browser for Windows Phone 8.

Note – Integration of data stored locally in Windows Phone 8 and online data available in social

Concepts

Session

1

Î Support for Media Files

Windows Phone 8 provides applications to create and store photos, videos, and music files. You could also share the media files on social networking sites and store them both locally as well as in the Microsoft cloud, SkyDrive.

Exclusive Hubs, such as Music + Videos Hub and Photos Hub, are available for managing media files effectively.

Î Office Hub

You can use the Microsoft Office applications in the Windows Phone 8 to create documents, spreadsheets, and presentations on the move. You could also store and manage the files locally as well as in the cloud.

Î Data Sense

This feature is available only with selected Windows Phones. This feature lets you keep a tab on your data download by notifying you in advance whenever your download limit is about to get exhausted.

Apart from the features discussed, there are loads of other features, such as Kid’s Corner, Games, and data transfer between two Windows devices, which provide the Windows Phone 8 users a truly rewarding experience.

1.2.2 Windows Phone 8 Specifications

Hardware specifications for Windows Phone 8 include: Î Memory – 180 MB for running applications

Î WVGA (800 x 480) 15:9, WXGA (1280×768) 15:9, 720p (1280×720) 16:9 format display Î 4-point multi-touch screen

Î Sensors for A-GPS and accelerometer Î Start, Search, and Back buttons

Î Support for data connectivity using cellular networks and Wi-Fi Î 256 MB of RAM and 8 GB of flash storage

Concepts

Session

1

Î NFC-enabled (Near Field Communication) chip Î Compass

Î Gyroscope

With these hardware specifications as the base, you will be able to develop mobile applications in Windows Phone 8.

To develop mobile applications in Windows Phone 8, the following software specifications are also required:

Î Development Environment PC with Windows 8 or Windows 8 Pro OS Î Windows Phone SDK 8

1.2.3 Important UI Elements and Terminologies in Windows Phone 8

In order to develop Windows Phone apps in Windows Phone 8, you need at first to be familiarized with its UI elements and some of its important terminologies. Figure 1.2 shows a Windows Phone 8 screen with some of the important terminologies highlighted.

Concepts

Session

1

Table 1.1 lists some of the important Windows Phone 8 terms along with their purpose.

Terminology

Purpose

Start Screen The opening screen, Start screen, of the Modern UI provides flexible customization capabilities through which you can organize your favorite applications and options.

Live Tiles Live Tiles are shortcuts to various mobile applications. They provide you _{with updates and notifications from all your favorite Web sites.} Live Apps Live Apps are a range of mobile applications, such as E-Mail and Calendar, _{developed specially for Windows Phone 8.} Status Bar Status Bar is available on the top of the screen and provides the status _{of various mobile operations.} Application Title Application Title displays the title of the currently running application. Page Title Page Title displays the title of the page inside an application, which may _{or may not be available for each application.} On-screen keyboard On-screen keyboard is a context-sensitive feature that appears whenever _{the user performs any typing operation.} Application Bar Application Bar is specific to each app with additional menu and navigation options. Depending on the operations, it may or may not

appear for each app.

Back, Start, Search These hardware buttons are mandatorily available in all Windows _{Phones to perform the required navigation or search operations.}

Table 1.1: Important Terminologies in Windows Phone 8

1.2.4 Windows Phone SDK 8

Mobile applications that are specifically developed for Windows are called Windows Phone apps. To develop apps for Windows Phone 8, the first step is to download a development suite called the Windows Phone SDK 8. Windows Phone SDK is available as a free download for all those users who own a licensed copy of Windows 8 Operating System.

Windows Phone SDK 8 provides a collection of tools and features which aid the developers to build robust applications. Some of the noteworthy tools and features available in SDK 8 are as follows:

Î Support for C++, HTML 5, Direct 3D applications, Third-party gaming frameworks, and native C++ game development

Concepts

Session

1

Î Enhanced multi-lingual support

Î Templates for Windows Phone 8 UI options Î Coding and Designing Tools

Windows Phone SDK 8 provides the following tools for creating Windows Phone apps: Î Microsoft Visual Studio Express 2012 for Windows Phone Visual Studio Express 2012

This Integrated Development Environment (IDE) provides all the necessary development tools as well as integration testing tools to aid in comprehensive development of mobile applications. An app developer could use C# and VB .NET languages to develop Windows Phone apps in Visual Studio Express.

Î Blend for Visual Studio

Yet another development tool is Blend for Visual Studio. It is a stand-alone application. This tool was formerly known as Expression Blend. This tool provides a powerful visual design environment for designing the UI of your application.

Note – In general, app developers can choose Visual Studio Express for developing complex applications that involve extensive coding and functionality. If the app requires a powerful and visually appealing UI design with limited coding, it is best to go in for Blend for Visual Studio. Î Design library for Windows Phone

The Design library provides a set of guidelines to develop applications based on design principles. Î Debugging Tools

After the app is developed, it needs to be tested and debugged. Windows Phone SDK 8 provides a tool called Windows Phone (WP) Emulator to run, debug, and test Windows Phone apps. WP Emulator is a desktop application, which simulates a Windows Phone device, to facilitate testing and debugging of Windows Phone apps.

Î Testing and Validation Tools

Windows Phone SDK 8 provides a collection of testing and validation tools to test and evaluate the quality and performance of a Windows Phone app, such as Simulation Dashboard for Windows Phone and Windows Phone Application Analysis.

Î Deployment Tools

Windows Phone SDK 8 provides two tools to aid in deployment of Windows Phone apps to Windows Phone device, namely, Windows Phone Developer Registration Tool and Application Deployment Tool. You can also use command prompt and Visual Studio to deploy the Windows Phone app.

Concepts

Session

1

1.2.5 Windows Phone SDK 8 System Requirements

In order to use Windows Phone SDK 8 for developing Windows Phone apps, you need to have the following system requirements in place:

Î Windows 8 or Windows 8 Pro or Windows 8 64-bit client version Î 64-bit CPU

Î 4 GB Free hard disk space Î 4 GB RAM

1.3 Operating Windows Phone Apps

Most of the operations in Windows Phone 8 revolve around Windows Phone apps. When a Windows Phone app is launched, it goes through different stages of Application lifecycle in Windows Phone 8. The Application lifecycle comprises operations, such as launching, running, activating, deactivating, and closing of Windows Phone apps.

Note – Remember that at any point in time, you can keep only one app active and running in Windows Phone 8.

1.3.1 Launching and Closing Applications

Î Launching an Application

To launch an application, you can use either the Live Tiles or the Live Apps list. You could also launch an application by tapping its associated notification icon in the Start screen.

Concepts

Session

1

Figure 1.3: Launching an Application Through Live Tiles

Concepts

Session

1

The launching action calls the Launching event, which in turn opens the UI screen of the selected application.

Î Closing an Application

To completely close an application and remove it from memory, you need to keep pressing the

BACK navigation button until it goes beyond the first page of the application.

The closing action calls the closing event, which saves some basic changes and exits the application.

Note – Remember that only those changes, which would be required throughout the application lifetime, such as data related to History, will be stored every time the Closing event is called.

1.3.2 Deactivating and Reactivating Applications

Once an application is launched, it will be activated and available in the Running state. To move to a different application or operation, you need to deactivate the current application and reactivate it at some other time.

Î Deactivating an Application

To deactivate an application, you can either click the Start button or launch another application from Live Tiles or Live Apps. This navigation action calls the deactivated event, which usually saves the recent changes made in the current session either in the application itself or in a dictionary called the State.

Î Reactivating an Application

To reactivate an application, you need to navigate to it by clicking its respective icon in Live Tiles or in Live Apps. You could also launch it by using the list of recent applications in the Start screen or by long pressing the BACK button until it reaches the required application. This will bring the application back to its activated state.

1.4 Developing and Deploying Windows Phone Apps

To develop Windows Phone apps, you need to make use of the tools available under Windows Phone SDK 8. Once you install Windows Phone SDK 8 in your system, you can create apps by using the available tools, such as Visual Studio or Blend for Visual Studio, test the apps in WP Emulator, perform validation by using the testing and validating tools (if required), and finally deploy the app on the Windows Phone device.

Concepts

Session

1

1.4.1 Writing the First Windows Phone 8 ’Hello World’ Application

This section describes how to create a simple Windows Phone app by using C# in Visual Studio and Blend for Visual Studio, run it on the WP Emulator, and deploy it on the Windows Phone 8 device.

The steps to perform this are as follows:

1. Creating a ‘Hello World’ Program

You can create a Windows Phone app either in Visual Studio or in Blend for Visual Studio.

A. Using Visual Studio Express 2012

To create a ‘Hello World’ application using C# in Visual Studio:

i. Click Start and then go to the All Apps screen by clicking the arrow at the bottom of the Start screen. Then, select Windows Phone SDK 8.0 → Microsoft Visual Studio Express

2012 for Windows Phone.

ii. Click File → New Project as shown in figure 1.5.

Concepts

Session

1

The New Project window appears as shown in figure 1.6.

Figure 1.6: New Project Window

iii. Click Templates and select Windows Phone under Visual C#. iv. Type a suitable name for the project in the Name box. v. Click OK.

The New Windows Phone Application dialog box appears as shown in figure 1.7.

Figure 1.7: New Windows Phone Application Dialog Box

Concepts

Session

1

A new project is created as shown in figure 1.8.

Figure 1.8: Design View of the New Project

The design page is displayed with default text on the left side and the code page with its associated Extensible Application Markup Language (XAML) code is displayed right next to the design page. You can also add or modify controls in the Design page, through drag-and-drop action from the Toolbox in Visual Studio.

Note – XAML is used to design and define user interfaces for Windows Phone apps. The XAML code is automatically generated whenever there is any change in the UI.

vii. Click the code page to maximize the code window. viii. Press ALT + ENTER to invoke the Properties window.

Concepts

Session

1

Figure 1.9 shows the details of the changes made in the Visual Studio.

Figure 1.9: TextBlock with Modified Value

x. Click Save Project.

The app file created in Visual Studio is saved with the .cs extension.

B. Using Blend for Visual Studio

To create a ‘Hello World’ application by using Blend for Visual Studio: i. Open Blend for Visual Studio.

Concepts

Session

1

The New Project window appears as shown in figure 1.10.

Figure 1.10: New Project Window in Blend for Visual Studio

iii. Enter a suitable name of the project, for example, ‘Hello World’ in the Name box. iv. Select 8.0 in the Version box.

Concepts

Session

1

The Design page appears as shown in figure 1.11.

Figure 1.11: Design Page in Blend for Visual Studio

vi. Click Mainpage.xaml in the left panel to invoke the code window. vii. Press ALT + ENTER to invoke the Properties window.

Concepts

Session

1

Figure 1.12 shows the Code View with the changes made.

Figure 1.12: Code View of the Application in Blend for Visual Studio

ix. Click Save Project. The file created in Blend for Visual Studio is saved with the .xaml extension.

2. Running a Windows Phone App in Windows Phone Emulator

The UI for the ‘Hello World’ application is complete. Next, you need to run the app in the WP Emulator. Running the app implies deploying it on the WP Emulator and viewing its output.

To run the ‘Hello World’ application:

I. Open the ‘Hello World’ application from either Visual Studio or Blend for Visual Studio. II. Select the required Emulator, for example, ‘Emulator WVGA 512 MB’ from the drop-down box

Concepts

Session

1

Figure 1.13: Emulator Option in Visual Studio

Concepts

Session

1

Concepts

Session

1

III. Press F5.

The output is displayed in the Emulator as seen in figure 1.15.

Figure 1.15: Output of the ‘Hello World’ App

You can also deploy or run an application from Blend by using the following steps: 1. Open the required app file.

2. Click Window → Device → Deploy Target → Emulator WVGA (512 MB). 3. Press F5.

Concepts

Session

1

Note – It is highly recommended that you first test and deploy the app in the Emulator before deploying it on the Windows Phone 8. This will ensure protecting the core mobile operations and other applications installed in Windows Phone from crashing, in case there are any issues with your app.

3. Deploying the Windows Phone App on the Windows Phone 8 Device

Once the app is completely tested and validated, the final step is to deploy the app in the Windows Phone 8 device. Deployment of the app in Windows Phone 8 includes two steps:

I. Registration

Before deploying the app, you need to register the phone for development. Once the phone is registered, you can perform all app operations, such as installing, debugging, and running the app on the actual Windows Phone 8 device.

To register the device, you need to use the Windows Phone Developer Registration Tool available under Windows Phone SDK 8 in your Windows Phone 8 device. For this, you would require Windows Phone SDK 8, a device with Windows Phone 8 Operating System, a Microsoft account, and a unique name for the device. You can invoke this tool in Windows Phone 8 device by performing the following step and completing the registration process:

y Click Start → All apps → Windows Phone SDK 8.0 → Windows Phone Developer

registration.

II. Deployment

Once the phone is registered, you can deploy the app on the device. To deploy the ‘Hello World’ app, you can use the Application Deployment tool.

To deploy the Windows Phone app by using the Application Deployment tool:

y Connect the Phone device with the host computer, which contains the app through the USB cable.

y Unlock the Phone screen.

Concepts

Session

1

y The Application Deployment dialog box appears as shown in figure 1.16.

Figure 1.16: Application Deployment Dialog Box

y Select the required device in the Target drop-down box.

y Click Browse and select the app file in the host computer that you want deploy. y Click Deploy.

Concepts

Session

1

The app is deployed and the Status field will display ‘XAP Deployment Complete’, if there are no errors in the deployment process as shown in figure 1.17.

Figure 1.17: Completion of Deployment Process

The output of the ‘Hello World’ app on the Windows Phone device would be similar to the output in WP Emulator that was shown earlier in figure 1.15.

Concepts

Session

1

1.5 Check Your Progress

1. The name of the User Interface used in Windows Phone 8 is called the _____________ UI. (A) Metro (C) C Modern

(B) Vista (D) D Mobile 2. Which of these statements is true and which is false?

Statement A: Windows Phone 8 uses Windows NT kernel.

Statement B: Windows Phone apps developed for Windows 7 can run on Windows 8.

(A) Statement A is TRUE and _{Statement B is FALSE.} (C) Both the statements are TRUE. (B) Statement A is FALSE and _{Statement B is TRUE.} (D) Both the statements are FALSE. 3. Which feature lets you store music and video in Windows Phone 8?

(A) Media Hub (C) Music Hub (B) Music+Videos Hub (D) Videos Hub

4. What happens if you have accidentally deleted an important document created in Office Hub from the local Windows Phone 8 device?

(A) You cannot retrieve the document at _all. (C) You can retrieve the document from _{the Microsoft Cloud SkyDrive.} (B) You can retrieve the document from the ‘Recent Documents’ option in

MS Word. (D)

You may be able to retrieve the document by using the ‘Recovery’ utility in Office Hub.

5. Which of the following hardware specifications satisfy the requirements for Windows Phone 8? a. 180 MB of RAM and 8 GB of flash storage

b. Start, Search, and Back buttons

c. Support for Wi-Fi and cellular networks d. 600 x 480 format display

Concepts

Session

1

(A) All the options are suitable for _{Windows Phone 8.} (C) Except option a, all the other options _{are suitable for Windows Phone 8.} (B) Only options b, c, and e are _applicable. (D) Except option d, all the other options _{are suitable for Windows Phone 8.} 6. To develop Windows Phone apps for Windows Phone 8, you need to have __________ CPU and

________ OS.

(A) 32-bit, Windows 7 (C) 32-bit, Windows 8 Pro (B) 64-bit, Windows Vista (D) 64-bit, Windows 8

7. Live Tiles and Live Apps of Windows Phone 8 are part of _________________. (A) Windows Phone SDK 8 (C) Start screen

(B) People Hub (D) Data Sense 8. Which of these statements is true and which is false?

Statement A: You can launch an application by using Live Tiles or Live Apps in Windows Phone 8. Statement B: You can close an application by pressing the BACK button just once in case you are in

the opening page of the application.

(A) Statement A is TRUE and Statement _{B is FALSE.} (C) Both the statements are TRUE. (B) Statement A is FALSE and Statement _{B is TRUE.} (D) Both the statements are FALSE.

Concepts

Session

1

9. Match the SDK tool with its associated step under development of Windows Phone apps.

Tool

Windows Phone app Development

(a) Blend for Visual Studio 1. Prerequisite tool needed for deployment

(b) Windows Phone Emulator 2. Prerequisite tool for developing Windows Phone _apps (c) Windows Phone Application _Analysis 3. Designing UI for Windows Phone apps

(d) Windows Phone SDK 8 4. Validating Windows Phone apps

(e) Windows Phone Developer _{Registration Tool} 5. Testing and debugging Windows Phone apps (A) a-3, b-5, c-4, d-2, e-1 (C) a-5, b-3, c-4, d-1, e-2

(B) a-3, b-5, c-2, d-4, e-1 (D) a-5, b-3, c-4, d-2, e-1

10. Which of the following key combinations is used to invoke the Properties window in Visual Studio? (A) CTRL+ENTER (C) ALT+ENTER

Concepts

Session

1

1.5.1 Answers

Concepts

Session

1

Summary

Î Windows Phone 8 is one of the most popular and innovative mobile operating systems offered by Microsoft.

Î You can launch an application in Windows Phone 8 through Live Tiles, Live Apps, or even by tapping the respective notification icon on the Start screen.

Î To develop Windows Phone apps, Windows Phone 8 provides a development suite called the Software Development Kit (SDK).

Î You can create Windows Phone apps in Visual Studio or Blend for Visual Studio. Î You can test, debug, and run Windows Phone apps in Windows Phone Emulator.

Î You need to register the device for development before deploying the Windows Phone 8 app through the Windows Phone Developer Registration Tool available under Windows Phone SDK. Î Once your device is registered, you can use any of the following ways to deploy your Windows

Overview of Windows

Phone 8 User Interface

Session - 2

Welcome to the Session, Overview of Windows Phone 8 User Interface.

In this session, you will learn about the basics of Extensible Application Markup

Language (XAML), the various User Interface (UI) elements of Windows Phone 8

and their associated event handlers. You will also learn about resources, styles, and

templates in Windows Phone 8.

At the end of this session, you will be able to:

Î

Describe the use of XAML in Microsoft Platform and Windows Phone 8

Î

Explain layouts in Windows Phone 8

Î

_{List the various controls in Windows Phone 8}

Î

_{Describe the procedure to create controls in XAML for Windows Phone 8}

Î

Describe event handling in Windows Phone 8

Î

_{Explain a routed event and a user-initiated event in Windows Phone 8}

Î

_{Explain the use of back stack in Windows Phone 8}

Î

Describe the purpose of resources, styles, and templates in Windows

Phone 8

Concepts

Session

2

2.1 Designing User Interfaces in Windows Phone 8

The growth of mobile apps, ever since they first came in vogue in the year 2008 as features of Apple’s iPhone -has been spectacular. Today, apps are no longer restricted to the iPhone, but are also available on various other platforms as well. There are a huge number of mobile apps that are being downloaded and used by people all over the world.

Despite the large repository of mobile apps available to the consumers, only some of them are globally popular and most extensively used in the consumer world, namely social networking apps, such as Facebook and Twitter, Skype, MSN Messenger, and Google Maps. These apps have been successful because of their novelty, convenience, powerful UI, and excellent functionality.

To aid in developing such apps that truly stand out from the rest of the crowd, Windows Phone 8 provides a range of tools and features. To enable developers to design powerful UI for Windows Phone apps, Windows Phone 8 provides various Graphical User Interface (GUI) elements, such as layouts, controls, utilities, and many other resources. Microsoft also offers a markup language called XAML to aid in the creation of visual interfaces for Windows Phone apps.

2.1.1 Brief Overview of XAML

XAML is a markup language available as part of Microsoft Windows Presentation Foundation (WPF) in Microsoft .NET framework. The functionality of XAML in .NET framework is akin to the functionality of HTML and XML in Web applications.

Note – WPF is a rich GUI-based programming model, which is used to create powerful standalone applications as well as browser-based applications on the Microsoft platform.

XAML is the default language used in Windows Phone 8 for UI creation. It is also the primary language for applications created in Microsoft Blend for Visual Studio, which is a rich IDE.

With XAML, you can define the UI for your apps and include basic coding on the functionality of the various UI controls through the use of namespaces, objects, and properties. A brief explanation of each of these terminologies is included here.

Î Namespace: A namespace is a type definition for the elements in XAML. You can either use the

pre-defined collection of namespaces or create your own namespaces for your project. For example, there is a pre-defined namespace called Systems.Windows.Controls, which you can use to create UI control objects in Windows Phone 8.

Note – To use a pre-defined namespace for your app project, you need to declare that namespace using the xmlns tag in XAML. There are a huge number of pre-defined namespaces available as part of Windows Phone libraries as well as XAML.

In case you want to use XAML namespaces, you need to use a prefix, such as x: along with the xmlns tag, as follows:

Concepts

Session

2

In case you want to use namespaces from Windows.Phone assembly, you can directly call them using the xmlns tag, as follows:

xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

Î Object: An object is a programmatic representation of a UI control in Windows Phone 8. For

example, there are objects, such as Button and TextBox, which you can use to create UI controls in Windows Phone 8.

Î Property: A property is an attribute or an element associated with an object. For example, the

properties for a Button object include height and width.

Note – You can also import .NET libraries (reusable components) and their associated (Application Programming Interfaces (APIs) in XAML and use them for providing functionality in Windows Phone 8. Code Snippet 1 shows the default XAML program generated for a new Windows Phone project named

PhoneDemoApp. Code Snippet 1: <phone:PhoneDemoApp x:Class=”PhoneDemoAppClass.MainPage” xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation” xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml” xmlns:phone=”clr-namespace:Microsoft.Phone. Controls;assembly=Microsoft.Phone” xmlns:shell=”clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft. Phone” xmlns:d=”http://schemas.microsoft.com/expression/blend/2008” xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006” mc:Ignorable=”d” FontFamily=”{StaticResource PhoneFontFamilyNormal}” FontSize=”{StaticResource PhoneFontSizeNormal}” Foreground=”{StaticResource PhoneForegroundBrush}” SupportedOrientations=”Portrait” Orientation=”Portrait” shell:SystemTray.IsVisible=”True”>

<Grid x:Name=”LayoutRoot” Background=”Transparent”> <Grid.RowDefinitions>

Concepts

Session

2

<RowDefinition Height=”Auto”/> <RowDefinition Height=”*”/> </Grid.RowDefinitions>

<StackPanel x:Name=”TitlePanel” Grid.Row=”0” Margin=”12,17,0,28”> <TextBlock Text=”MY APPLICATION” Style=”{StaticResource

PhoneTextNormalStyle}” Margin=”12,0”/>

<TextBlock Text=”page name” Margin=”9,-7,0,0” Style=”{StaticResource PhoneTextTitle1Style}”/>

</StackPanel>

<Grid x:Name=”ContentPanel” Grid.Row=”1” Margin=”12,0,12,0”> </Grid>

</phone:PhoneDemoApp>

Code Snippet 1 shows the creation of a default namespace, which contains the same name as that of a new project. It also contains the creation of a class definition called PhoneDemoAppClass.MainPage. Inside the class definition, the list of pre-defined namespaces to be used for this project is declared using the xmlns tag. The default font, orientation, and foreground specifications to be used for the project are declared after the namespace declaration. Finally, the UI screen with the container objects, Grid and StackPanel, and a default title TextBlock object for the page, along with their properties, are created for the project.

Note – You can also integrate XAML with various tools and languages in .NET framework. For example, you could create a UI in XAML and code its functionality in Visual C-#.NET, VB.NET, VC++.NET, and so on. XAML is thus a first of its kind markup language of Microsoft, which provides an independent UI layer that can be adapted in all .NET applications.

2.1.2 Basics of UI Design

Before starting with the development of Windows Phone apps by using XAML, you need to get familiarized with how to organize the content in Windows Phone 8.

For example, look at the images shown in figures 2.1 and 2.2 respectively. Both the images show the opening screen of an application. All the functionalities related to the application are similar in both the images. However, as you can see, the UI available in the second image is much more appealing than the UI in the first image. This is because of a better organization and presentation of UI elements with more relevant details and functionality, to enable easier user interaction.

Concepts

Session

2

Figure 2.1: Sample UI Screen – I

Concepts

Session

2

To create an effective design for your Windows Phone Apps, you need to follow a few basic design guidelines:

Î Simplistic Design

The UI should be simple in terms of usage of language and organization of content with adequate spacing in between the UI elements.

Î Consistency

The UI should be based on the same set of standards as that of the other Windows Phone Apps in terms of background, font, color, image, and icon, installed in Windows Phone 8 for consistency of appearance.

Î Minimum Typing Effort

The design of the UI should be such that it minimizes the typing effort of the users. Î Attention to Detail

The UI should accommodate even the minute detail, which a user might require while using the app.

Î Signature Presentation

With the UI’s presentation of title, format, and style of language, the users should be able to understand the purpose of the app and thus, relate with its context.

Î Support for Global Audience

The UI should provide a common platform for use by a global audience, through careful presentation of language that does not have any regional references.

Note – Before creating your own apps for Windows Phone 8, you could glance through the existing collection of apps in the Windows Phone store. These apps will give you a fair idea about the various aspects involved in creating apps.

Basics of UI Organization - Layout

Designing an app in Windows Phone 8 involves creating various controls and elements on the app screen to facilitate user interaction.

Before creating controls in your app, you need to first determine the process of organizing the UI elements on the Windows Phone 8 screen. All the UI elements in an app should be positioned based on the screen size and the screen resolution of the Windows Phone 8 screen.

Concepts

Session

2

To enable such appropriate positioning and sizing of UI elements, Windows Phone 8 provides layouts. In a layout, you can organize the UI elements in a hierarchical manner by including container controls, such as Panel controls, and the main controls that interact with the user, such as Button and Textbox, under the container controls.

Windows Phone 8 offers two types of layouts, namely Absolute layout and Dynamic layout. Î Absolute Layout

In an Absolute Layout, you need to provide the exact positioning of various UI controls through X and Y coordinates. In this mode, the controls will be held in a fixed position on a Windows Phone 8 screen.

Î Dynamic Layout

In a dynamic layout, you need to provide the relative positioning of various UI controls on a Windows Phone 8 screen. In this mode, the controls in the UI will be automatically adjusted according to the varied screen resolutions available in Windows Phone 8.

2.2 Different Controls in Windows Phone 8

Controls are the main UI elements of an app, which enable app developers to display information to the users and also accept inputs from them. Windows Phone 8 provides a wide collection of controls to enable the developers to design a powerful GUI.

2.2.1 Basic Controls in Windows Phone 8

Some of the important controls provided by Windows Phone 8 for app design are as follows: Î Navigation Controls

Any app that contains multiple pages should provide for page navigation as one of its core functionalities. To provide for navigation between pages, the app to be designed should follow a hierarchical organization as follows – frame, page, and content.

A frame is the main container of the app, which in turn will contain a set of pages. Each page will in turn have a layout with parent containers and other UI controls.

Concepts

Session

2

Figure 2.3 shows a Windows Phone 8 screen with all these three Navigation controls.

Figure 2.3: Example of a Windows Phone 8 App with Navigation Controls

By default, whenever you create a UI control in XAML, a frame and a page are created automatically. The frame is the first object to be loaded in any XAML-based project. It occupies the entire Windows Phone 8 screen. For example, Code Snippet 1 that was discussed earlier contains the default creation of frame and page for a project.

As the frame object is the top-most parent container, there is no explicit declaration of the same in a XAML program. The page object is created under the frame, which occupies the entire frame area. For example, PhoneDemoAppClass.MainPage is the default page created in the default XAML program, as shown in Code Snippet 1.

However, if you still want to customize the creation of frame and page controls, you need to make use of the classes called PhoneApplicationFrame and PhoneApplicationPage, which are part of Microsoft.Phone assembly.

Î Layout and Grouping Controls

Controls that serve as containers for other controls are called Layout and grouping controls. These controls are the first to be included while designing the page of an app.

Some of the important controls under layout and grouping controls include the following: y _Grid

A Grid provides a layout in rows and columns. You can specify the accurate positioning of each child element in the Grid through its row and column coordinates. It is one of the most flexible controls in Windows Phone 8, which enables the developers to arrange child objects in varied formats across multiple rows and columns.

Concepts

Session

2

Code Snippet 2 shows a partial program that contains the creation of a Grid control in XAML.

Code Snippet 2:

<Grid x:Name=”ContentPanel” Grid.Row=”1” Margin=”12,0,10,10” Background=”#FFAA9B9B”> <Grid.ColumnDefinitions> <ColumnDefinition Width=”15*”/> <ColumnDefinition Width=”17*”/> <ColumnDefinition Width=”16*”/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height=”Auto”/> <RowDefinition Height=”139*”/> <RowDefinition Height=”115*”/> <RowDefinition Height=”100*”/> <RowDefinition Height=”253*”/> </Grid.RowDefinitions> </Grid>

Figure 2.4 shows a Windows Phone 8 screen, which contains the Grid control in Grey background.

Concepts

Session

2

y _Canvas

A Canvas is used to specify the accurate positioning of a child element with X and Y coordinates.

This container is especially useful for those child elements, which should remain fixed in the same position in the UI irrespective of the screen resolution and format.

Code Snippet 3 shows a partial program that contains the creation of a Canvas control in XAML.

Code Snippet 3:

<Canvas HorizontalAlignment=”Left” Height=”198”

Margin=”112,39,0,0” Grid.Row=”1” VerticalAlignment=”Top” Width=”271” Background=”#FF9B9FA4”/>

Figure 2.5 shows a Windows Phone 8 screen, which contains the Canvas control in a Grid.

Figure 2.5: Example of a Windows Phone 8 App with Canvas Control

y _StackPanel

A StackPanel is typically used in situations where the child elements are to be organized horizontally or vertically in a single line.

By default, in a StackPanel, the child elements are organized vertically. You can use the Orientation property in XAML code to change the arrangement of elements to horizontal. Code Snippet 4 shows a partial program that contains the creation of a StackPanel control in XAML. The StackPanel contains a TextBlock control to display text with a particular style. A style is a property used to customize the appearance of a control in a

Concepts

Session

2

XAML. You can use standard styles as well as customized styles for a UI control.

Code Snippet 4:

<StackPanel Grid.Row=”0” Margin=”12,17,0,28” Grid. ColumnSpan=”3”>

<TextBlock Text=”MY APPLICATION” Style=”{StaticResource PhoneTextNormalStyle}”/>

<TextBlock Text=”Stack Control” Margin=”9,-7,0,0” Style=”{StaticResource PhoneTextTitle1Style}”/> </StackPanel>

Figure 2.6 shows a Windows Phone 8 screen, which contains the StackPanel control.

Figure 2.6: Example of a Windows Phone 8 App with StackPanel Control

y _Panorama

A Panorama control is used whenever the width of the screen spans across multiple pages and cannot be viewed in a single physical screen. This control provides a lengthy horizontal area in which you can create other container controls and child controls. As and when the user swipes the screen horizontally, the Panorama control displays the specific portion of the screen according to the visible screen area of the mobile device.

Generally, a hint on the continuity of the details on the next part of the screen is displayed through one or two alphabets or words of the next section, in the current display screen

Concepts

Session

2

itself, to the user.

Code Snippet 5 shows a partial program that contains the creation of a Panorama control in XAML.

Code Snippet 5:

<phone:Panorama Margin=”0,-17,0,0” Grid.Row=”2”> <phone:Panorama.Title>

<StackPanel Margin=”14,50,0,0”>

<TextBlock Text=”Panorama Control” FontSize=”110” Margin=”0,0,0,0” >

</TextBlock> </StackPanel>

</phone:Panorama.Title> <!--Panorama item one--> <phone:PanoramaItem>

<TextBlock Text=”Screen 1 Content”/> </phone:PanoramaItem>

<phone:PanoramaItem>

<TextBlock Text=”Screen 2 Content”/> </phone:PanoramaItem>

<!--Panorama item two--> </phone:Panorama>

Concepts

Session

2

Figure 2.7 shows a Windows Phone 8 screen, which contains the Panorama control.

Figure 2.7: Example of a Windows Phone 8 App with Panorama Control

y Pivot

A Pivot control serves as a replacement of tabs in Windows Phone 8. It is used in scenarios where an application needs to provide sub screens or sub sections, as multiple views or multiple pages in an app. This control presents information in parts to the user, thus enabling smoother navigation of content view as well as page view.

By default, in a Pivot control, the navigation to the next page or content occurs whenever the user performs the following actions – tapping, dragging, swiping, or scrolling on the large data.

Code Snippet 6 shows a partial program that contains the creation of a Pivot control in XAML.

Code Snippet 6:

<!--Pivot Control-->

<phone:Pivot Title=”Pivot Control” Margin=”-2,10,2,-10” Background=”#FFD4D8D6”>

<!--Pivot item one-->

Concepts

Session

2

</phone:PivotItem> <!--Pivot item two-->

<phone:PivotItem Header=”item2” Margin=”14,41,10,-13” Background=”#FF9C9B88”>

</phone:PivotItem> </phone:Pivot>

Figure 2.8 shows two Windows Phone 8 screens, which depict the Pivot control. In these screens, the Pivot control contains two items, item1 and item2, which are similar to tabs. The first screen shows the part of the page with the contents of item1 visible. The second screen shows the part of the page with the contents of item2 visible.

Concepts

Session

2

Note –Panorama and Pivot controls are similar in their approach of displaying scrollable information to the users. However, the difference lies in the purpose of these two controls.

You can use the Panorama control whenever you need to provide different sections of an app on the same topic or heading in a single screen. For example, you can create a Panorama control in an app that provides information on the list of services offered by an organization, such as Software services, Hardware services, BPO services, and so on. All these sections can be displayed as part of a single screen itself and the user can navigate to each section by swiping to the next section horizontally. You use Pivot control whenever you need to create content in the form of sub sections. For example, you can create a Pivot control for calendar applications with different views to provide data to the users. Î Text Controls

You can use Text controls to either display information to the users or get inputs from the users in a string format. There are three types of Text controls, namely:

y _TextBlock: This control is used to display static information to the users.

y TextBox: This control is used to get both smaller as well as larger amounts of textual

information from the users.

y _PasswordBox: This control is used to get password inputs from the users. The characters

that the user enters are displayed in the form of a bullet character (default) to promote confidentiality.

Code Snippet 7 shows a partial program that contains the creation of Text controls in XAML.

Code Snippet 7:

<!-- Creating a TextBlock control -->

<TextBlock HorizontalAlignment=”Left” Height=”95” Margin=”84,0,0,0” TextWrapping=”Wrap” Text=”My TextBlock Control” Width=”275”

FontSize=”29.333”/>

<!-- Creating a TextBox control -->

<TextBox HorizontalAlignment=”Left” Height=”105” Margin=”69,0,0,0” TextWrapping=”Wrap” Text=”My TextBox Control” Width=”290”/>

<!-- Creating a PasswordBox control -->

<PasswordBox HorizontalAlignment=”Left” Height=”85”

Margin=”69,45,0,0” Width=”290” Password=”jcsjdcbsdhcbshcb” BorderBrush=”#26ECDEDE”/>

Concepts

Session

2

Figure 2.9: Example of a Windows Phone 8 App with Text Controls

Î List Controls

You can use List controls to display a list of options to the users and enable them to select a single option or even multiple options. There are two types of List controls, namely:

y ListBox: This control is used to display a small list of options from which the user can

select by clicking the required option(s).

y LongListSelector: It is used to display information in the form of large list(s) to the

users, as in the case of an address book. This control enables the users to either scroll through the list of options or directly navigate to a specific option through the use of index or search criteria.

Code Snippet 8 shows a partial program that contains the creation of List controls in XAML.

Code Snippet 8:

<!-- Creating a ListBox control -->

<ListBox x:Name=”MainListBox” Margin=”0,0,-12,0” SelectionChanged=”MainListBox_SelectionChanged” Style=”{StaticResource ListBoxStyle1}”>

Concepts

Session

2

<TextBlock Content=”Text2” Width=”151” Background=”#FFCF5D5D”/> </ListBox>

<!-- Creating a LongListSelector control -->

<phone:LongListSelector x:Name=”MainLongListSelector”

Margin=”0,0,-12,0” ItemsSource=”{Binding Items}” SelectionChange d=”MainLongListSelector_SelectionChanged”>

<phone:LongListSelector.ItemTemplate> <DataTemplate>

<TextBlock Text=”{Binding LineOne}” TextWrapping=”Wrap” Style=”{StaticResource PhoneTextExtraLargeStyle}”/>

<TextBlock Text=”{Binding LineTwo}” TextWrapping=”Wrap” Margin=”12,-6,12,0” Style=”{StaticResource

PhoneTextSubtleStyle}”/> </DataTemplate>

</phone:LongListSelector.ItemTemplate> </phone:LongListSelector>

Concepts

Session

2

Figure 2.10: Example of Windows Phone 8 App with List Controls

Î Button and Selection Controls

You can use Button and selection controls to enable the user to quickly select or specify options on the screen, instead of typing.

Table 2.1 provides a brief explanation of some of the important controls available under Button and selection controls.

Concepts

Session

2

Button and Selection

Control

Purpose

Sample Image

Button

A Button control is used when the user submits the details to the app or proceeds to a different part of the app by performing a Click action. CheckBox

A CheckBox control is used to provide two states to the user – an option select state or an option clear state.

RadioButton

A RadioButton control provides a group of options to the user under a common heading. The user would be allowed to select only a single option from the group of options.

Slider

A Slider control enables to the user to select a value from the range of values displayed in a bar. The selected value indicates a proportion of the given range in the Slider.

HyperlinkButton

A HyperlinkButton control is used whenever the user needs to navigate to either a different page in the same app, or a Web page in the same app, or an external Web link outside the current app.

Table 2.1: Important Controls under Button and Selection Controls

Code Snippet 9 shows a partial program that contains the creation of Button and selection controls in XAML.

Code Snippet 9:

<!-- Creating a Button control -->

Concepts

Session

2

Height=”128” Margin=”51,87,0,0” VerticalAlignment=”Top” Width=”341” Background=”#FFBF7A7A”/>

<!-- Creating a CheckBox control -->

<CheckBox Content=”CheckBox” HorizontalAlignment=”Left” Height=”70” VerticalAlignment=”Top” Width=”208”/>

<!-- Creating a RadioButton control -->

<RadioButton Content=”RadioButton” HorizontalAlignment=”Left” Margin=”231,344,0,0” VerticalAlignment=”Top”/>

<!-- Creating a Slider control -->

<Slider HorizontalAlignment=”Left” Height=”85” Margin=”26,360,0,0” VerticalAlignment=”Top” Width=”236”/>

<!-- Creating a HyperlinkButton control -->

<HyperlinkButton x:Name=” GoogleNews” Content=” Google News” NavigateUri=”http://www.news.google.com” TargetName=”_ blank” HorizontalAlignment=”Left” Margin=”73,292,0,0” VerticalAlignment=”Top” Height=”57” Width=”244” />

2.2.2 Creating a UI in Windows Phone 8 Using XAML

Once you plan your design for the UI of the app, you can create the UI in XAML by using Visual Studio or Blend for Visual Studio.

There are two ways to create a UI in XAML:

Î Drag the required UI controls to the Design view and the XAML code will be automatically generated in the Code view of Mainpage.xaml in Visual Studio or Blend for Visual Studio.

(Or)

Î Directly create the code in the Code view of Mainpage.xaml file in Visual Studio or Blend for Visual Studio. This approach is more time-consuming and complex.

The complete step-by-step procedure to create a single UI control and attach some specific attributes to it in Blend for Visual Studio is as follows:

To create a button control:

1. Open Blend for Visual Studio. 2. Click File → New Project.

Concepts

Session

2

4. Select 8.0 in the Version box. Click OK. 5. The Design page of the project is displayed.

6. Click the option, Mainpage.xaml in the left side of the window to invoke the Code window. 7. Click Assets → Controls → Button.

Figure 2.11 shows the Assets tab and its associated options in Blend for Visual Studio.

Figure 2.11: Assets Tab in Blend for Visual Studio

8. Drag the Button control to the Design window in Blend for Visual Studio. 9. Change the Content property of the Button to ’Click me’.

10. Set the background of the Button by using the Background property given in the Properties window. For example, you can type the value, #FFBF7A7A to set the background to Reddish-brown.

Concepts

Session

2

The Button control is created in the new project in Blend for Visual Studio as shown in figure 2.12.

Figure 2.12: Adding a Button Control in Blend for Visual Studio

You can repeat this procedure to create various UI controls by using their associated UI objects, to design the complete UI for your app. A sample UI designed using XAML is displayed for your reference in figure 2.13.

Concepts

Session

2

Figure 2.13: A Sample Windows Phone App UI

Code Snippet 10 shows a partial XAML program that contains the creation of a UI given in figure 2.13.

Code Snippet 10:

<Grid x:Name=”LayoutRoot” Background=”Transparent”> <Grid.RowDefinitions>

<RowDefinition Height=”Auto”/> <RowDefinition Height=”*”/> </Grid.RowDefinitions>

<Grid x:Name=”ContentPanel” Margin=”0” Width=”480” Grid.RowSpan=”2” Background=”#FF7E7979”> <Grid.ColumnDefinitions> <ColumnDefinition Width=”25*”/> <ColumnDefinition Width=”23*”/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height=”65*”/>