Book Image

Windows Phone 8 Application Development Essentials

By : Tomasz Szostak
Book Image

Windows Phone 8 Application Development Essentials

By: Tomasz Szostak

Overview of this book

<p>Windows Phone 8 replaces Windows Phone 7 devices with the Windows NT kernel found on many Windows 8 components. Windows 8 will give you more options to develop better and more visually appealing PC and Tablet applications.</p> <p>A practical guide that will show you how you how to create testable MVVM applications keeping in mind the best UI practices. You will learn how to integrate peripheral sensors and social portals like Facebook and Twitter into your applications. This book shows the advantages of using modern patterns instead of the traditional way of programming.</p> <p>Starting with a Windows Phone UI description, the guide then takes you through the world of fast and fluid design guidelines. After that, you will be shown the beauty of C# and MVVM advantages, finishing with clear descriptions of mobile-application integration with peripherals and social media. Clear and well-described examples throughout will help you become a WP8 developer.</p> <p>You will also learn how to test your applications using Unit Test cut dependencies in your methods using Mocks, and use the newest features of C# such as asynchronous methods. If you are more of a designer than a developer, then there is also an explanation on how to create a consistent look and feel for Windows Phone applications.</p>
Table of Contents (12 chapters)

Types of XAML objects


XAML objects can be grouped into 6 groups as follows:

  1. Navigation

  2. Containers

  3. List controls

  4. Common controls

  5. User controls

  6. Third-party controls

Navigation

Navigation controls ensure that the Windows Phone application works in a similar way to page navigation in a web browser.

PhoneApplicationFrame

PhoneApplicationFrame is a top-level container and only one can be defined for the entire application. PhoneApplicationFrame can contain pages and implements navigation by calling the Navigate method or setting the Content property. I suggest using the Navigate method because it adds entry to the BackStack enumerable (the list of entries in the navigation history). In this way, it allows the back button to be automatically handled by getting the history elements from the history stack.

PhoneApplicationPage

PhoneApplicationPage is a container for UI components that can be used as many times as we need. This is a good and fairly common practice to build a page-based application.

Containers

Containers are very important in application design. It allows us to organize content the way we want to.

Canvas

Canvas is one of the Panel containers and can contain child elements. Child objects within Canvas have their position defined by x, y (Canvas.Left, Canvas.Top) properties, which specifies the distance in pixels from the left (x) to the top(y) corner of Canvas.

Border

Border is a container that delivers border or/and background around other controls and can have only one child.

Grid

Grid is a Panel type container. Within Grid, we can create grid columns and rows, and then position objects by the Row and Column property on the control. Distribution of spaces is really simple using star sizing (means stretching to place that is split equally) or Auto value. Grid contains elements that are drawn in the order that they are defined in the container . Using the ZIndex property on the elements of Grid, we can define which element will appear at the front and at the back.

Panorama

Panorama is a long horizontal canvas that contains PanoramaItem. It is commonly used in Windows Phone. Panorama is an ideal place to put long horizontal content into as it provides a better user experience. The best thing is, we don't need to handle any gestures (swipe, flick) because it does these automatically.

Pivot

Pivot is another container that can be used instead of the Panorama control. It contains PivotItems that provide a quick way to manage pages or other views, just as Panorama has gesture handling implemented by default.

ScrollViewer

ScrollViewer is a container that hasn't got its own UI. It fits into the integrated area and provides scrolling functionality for UI items, that are present in it.

StackPanel

StackPanel is a simple layout panel that arranges controls into a single line or column (depending on the Orientation property). It works like stack; new elements go after the old ones.

List controls

Most applications display some data, often lists of items. When we need to show a list, we can use one of the list controls.

ListBox

ListBox is a control is used to display a list of items. We can customize the look of each item in ListBox (it will be described later). If needed, we can use LongListSelector, which has many features in comparison to ListBox, such as grouping and scrolling to a specific element.

LongListSelector

LongListSelector is a control that gives us flexibility in displaying data. Defining how data will appear is set by the LayoutMode property. Furthermore, it supports templates and grouping, and is often used because it performs better than ListBox.

Common controls

Mobile applications, though they are completely different, have many common elements. There are a number of controls that are available for developers in the Visual Studio toolbox.

ApplicationBar

ApplicationBar is a control that contains icon buttons. The bar is placed at the bottom of the application page and can contain buttons that launch default actions on the page, such as add, delete, save, and edit. The application bar can be shown in the following three states/sizes:

  • Mini size: Where only three dots are visible and the user can slide up the bar

  • Default size: Where buttons and ellipsis are visible

  • Full size: Where buttons, ellipsis, and labels are visible

This control is used in many places in Windows Phone 8 and is really intuitive.

Button

Button is one of the most frequently used controls. When the user touches the Button control, it causes the execution of the Click event method handler that is assigned to it. What is interesting is that we can set when the event will be fired by changing ClickMode. For example, if we set ClickMode to Press, the event handler will be executed when the user taps on it. A release setting (a default setting) action will be launched when the user releases the button.

CheckBox

CheckBox represents a Boolean value, a choice between two opposite states, and is often used in a group.

HyperlinkButton

HyperlinkButton works and looks like any web hyperlink. Tapping on the hyperlink opens mobile IE or a web view in our application.

Image

Using the Image control, we can show standard web format images in our application. Images respond to typical gestures in WP, such as tap, double-tap, pan, flick, and pinch-and-stretch.

A good practice is to display a picture that has a similar resolution to our image control.

MediaElement

MediaElement has no interface of its own; that is, it just shows media (audio/video) content. It can be customized by its properties to display the video on a full-screen, and if there is an audio playing, the background sound can be muted. What is important is that only one MediaElement control can be used at a time.

MultiScaleImage

MultiScaleImage in used in Deep Zoom technology. This control allows the user to open a multiresolution collection of pictures or a single picture. Methods for panning and zooming are not implemented by default but should be utilized.

PasswordBox

PasswordBox is used to input passwords (for logging in or registering purposes). It is displayed like TextBox, but the difference is that the entered letters show only for the moment and are normalized to bullets. The number of displayed bullets is not equal to the number of letters in the Text property.

Popup

Popup displays content that overlays current content. Using the IsOpen property, this control shows or hides the pop up. We can use the MessageBox control, which is a less-flexible component.

MessageBox

MessageBox is a modal dialog that shows at the top of the application page. MessageBox can be displayed by calling the static Show method on the MessageBox class. Because of that, such controls should not be used since they create the dependency of the user interface in the code.

RadioButton

RadioButton like CheckBox represents a Boolean value but can be grouped with that, which provides mutual exclusivity.

RichTextBox

RichTextBox represents a rich text-editing control that allows hyperlinks, images, formatted texts, and HTML elements.

Slider

Slider displays a range of values along the track that the user can select from. The selected position is represented by the Value property.

TextBlock

TextBlock is one of the most common controls in Windows Phone 8. It displays read-only text, which can be set by the Text property.

TextBox

TextBox enables the user to input text: it can be a short, single, or multi-line input.

ToggleButton

ToggleButton is very similar to CheckBox and RadioButton and is used to switch states. It is most commonly used in the Settings page.

WebBrowser

WebBrowser displays HTML in our application. This control is based on the Internet Explorer 10 engine. Using WebBrowser, we are able to display the web content by using the Source property. It is good to remember that the control has disabled scripts by default; if we want to use some JavaScript, we have to switch the IsScriptEnabled flag on it.

User controls

User controls provide encapsulation of some functionality. Imagine a situation where you created some form and would like to use it on another page—don't even think about copy and paste! The best solution for this will be to create a user control.

User controls are easy to create—just add the new item to the solution, select the WP user control, and put controls into it.

<UserControl x:Class="MyCustomControls.UsrControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <StackPanel HorizontalAlignment="Center">
    
    <TextBlock Text="Hello from User Control!"></TextBlock>
    
  </StackPanel>
</UserControl>

Now imagine you can put a user control into ListBox or other list control. For sure, using user controls will save your time, and the code will look clearer.

Third-party controls – Windows Phone Toolkit

Windows Phone Toolkit is based on the Microsoft Public License, so you can use it on the terms of this license. The toolkit library provides many controls that are way better than the common ones and there are some new one with nice features. For sure, using this toolkit will provide a rich user experience to our application, making users feel better about using it longer. The following is a list of some of the most popular controls used in WP Toolkit:

  • AutoCompleteBox

  • ContextMenu

  • CustomMessageBox

  • DatePicker

  • HubTile

  • MapExtensions

  • ExpanderView

  • LongListMultiSelector - List layout

  • LongListMultiSelector - Grid layout

  • ListPicker

  • ToggleSwitch

This is not the end! Windows Phone Toolkit also contains a test framework that will be used later when the Model-View-ViewModel (MVVM) pattern will be described. Why should unit testing be important for developers? Because it is not only a way to test the application; it is a way to create software—writing a code. Agile development practices require us to write and execute unit tests.

Two ways to get Windows Phone Toolkit are as follows:

  • Downloading from CodePlex by browsing to: http://phone.codeplex.com/

  • Executing the Package Manager Console command PM> Install-Package WPtoolkit