Windows Store App Development: C# and XAML: C# and XAML

Copyright

For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact

     Special Sales Department

     Manning Publications Co.

     20 Baldwin Road

     PO Box 261

     Shelter Island, NY 11964

     Email: 

[email protected]

©2013 by Manning Publications Co. All rights reserved.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher.

Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps.

Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without elemental chlorine.

ISBN: 9781617290947

Printed in the United States of America

1 2 3 4 5 6 7 8 9 10 – MAL – 18 17 16 15 14 13

Brief Table of Contents

Copyright

Brief Table of Contents

Table of Contents

Preface

Acknowledgments

About this Book

About the Author

About the Cover Illustration

Chapter 1. Hello, Modern Windows

Chapter 2. The Modern UI

Chapter 3. The Windows Runtime and .NET

Chapter 4. XAML

Chapter 5. Layout

Chapter 6. Panels

Chapter 7. Brushes, graphics, styles, and resources

Chapter 8. Displaying beautiful text

Chapter 9. Controls, binding, and MVVM

Chapter 10. View controls, Semantic Zoom, and navigation

Chapter 11. The app bar

Chapter 12. The splash screen, app tile, and notifications

Chapter 13. View states

Chapter 14. Contracts: playing nicely with others

Chapter 15. Working with files

Chapter 16. Asynchronous everywhere

Chapter 17. Networking with SOAP and RESTful services

Chapter 18. A chat app using sockets

Chapter 19. A little UI work: user controls and Blend

Chapter 20. Networking player location

Chapter 21. Keyboards, mice, touch, accelerometers, and gamepads

Chapter 22. App settings and suspend/resume

Chapter 23. Deploying and selling your app

Index

List of Figures

List of Tables

List of Listings

Table of Contents

Copyright

Brief Table of Contents

Table of Contents

Preface

Acknowledgments

About this Book

About the Author

About the Cover Illustration

Chapter 1. Hello, Modern Windows

1.1. Setting up the development environment

1.2. Configuring the project

1.2.1. The device pane

1.2.2. Template solution items

1.3. Create the first Hello World UI

1.4. Integrating with Twitter

1.4.1. The Tweet class

1.4.2. Updated UI

1.4.3. Code-behind

1.5. Testing on different devices and resolutions

1.5.1. Debugging on the Simulator

1.5.2. Debugging on a remote device

1.6. Summary

Chapter 2. The Modern UI

2.1. Design inspiration

2.1.1. Direct influences

2.1.2. Finding your way

2.2. Governing principles

2.3. Typography

2.4. The importance of the layout grid

2.5. Design for touch but not only for touch

2.6. Modern apps on Windows 8

2.6.1. Consumer and enterprise apps

2.6.2. Key Windows 8 UI elements and states

2.7. Device considerations

2.7.1. Desktop or laptop

2.7.2. Tablet and smaller devices

2.7.3. Hybrid devices

2.8. Summary

Chapter 3. The Windows Runtime and .NET

3.1. Windows Store app system architecture

3.1.1. The sandbox

3.1.2. Deployment and the Windows Store

3.1.3. The driver model

3.2. COM + .NET metadata = WinRT

3.2.1. COM: back to the future

3.2.2. Metadata

3.2.3. Projections

3.3. Client technologies and languages

3.4. A brief tour of WinRT and .NET 4.5

3.5. Summary

Chapter 4. XAML

4.1. Elements and namespaces

4.1.1. Objects as elements

4.1.2. Namespaces

4.2. Properties

4.2.1. Property syntax

4.2.2. Dependency properties

4.2.3. Attached properties

4.2.4. Property paths

4.3. Object trees and namescope

4.3.1. Object trees

4.3.2. Namescope

4.4. Summary

Chapter 5. Layout

5.1. Multipass layout—measuring and arranging

5.1.1. The measure pass

5.1.2. The arrange pass

5.1.3. The LayoutInformation class

5.2. UIElement layout properties

5.2.1. Width and Height, plus ActualWidth and ActualHeight

5.2.2. Horizontal and vertical alignment

5.2.3. Padding

5.2.4. Margins

5.3. Layout rounding

5.4. Performance considerations

5.4.1. Keeping the tree shallow

5.4.2. Caching

5.4.3. Virtualization

5.4.4. Sizing and positioning

5.5. Summary

Chapter 6. Panels

6.1. Canvas

6.1.1. Positioning in X,Y space

6.1.2. Controlling the Z position using ZIndex

6.1.3. Sizing child elements

6.2. StackPanel and VirtualizingStackPanel

6.2.1. Setting the orientation

6.2.2. Sizing children

6.2.3. Virtualizing for performance

6.3. Grid

6.3.1. Defining rows and columns

6.3.2. Adding and positioning elements in rows and columns

6.3.3. Using alignment and margins for sizing and positioning

6.4. Creating a custom panel

6.4.1. Project setup

6.4.2. The OrbitPanel class

6.4.3. Orbits dependency property

6.4.4. Orbit attached property

6.4.5. Custom layout

6.5. Summary

Chapter 7. Brushes, graphics, styles, and resources

7.1. Brushes

7.1.1. Solid-color brushes

7.1.2. Gradient brushes

7.1.3. Image brushes

7.2. Resources

7.2.1. Local and page resources

7.2.2. Application resources

7.2.3. Resource dictionaries

7.3. Styles

7.3.1. Explicit or keyed styles

7.3.2. Style inheritance

7.3.3. Implicit styles

7.4. Vector graphics

7.4.1. Line

7.4.2. Polyline

7.4.3. Paths

7.4.4. Rectangles and ellipses

7.5. Bitmap images

7.6. Summary

Chapter 8. Displaying beautiful text

8.1. Text basics

8.1.1. TextBlock

8.1.2. Inlines

8.1.3. Wrapping, ellipsis, and alignment

8.1.4. Character spacing

8.1.5. Line spacing

8.2. Rich and multicolumn text

8.2.1. Rich text

8.2.2. Multicolumn and linked text

8.3. OpenType text

8.3.1. Ligatures

8.3.2. Stylistic sets

8.3.3. Font capitals

8.3.4. Fractions and numbers

8.3.5. Variants, superscript, and subscript

8.4. Embedding fonts

8.5. Summary

Chapter 9. Controls, binding, and MVVM

9.1. The Model-View-ViewModel pattern

9.1.1. Using an MVVM toolkit like MVVM Light

9.1.2. The model

9.1.3. The chat data service

9.1.4. The MainViewModel and CameraViewModel classes

9.1.5. The view

9.2. Binding primer

9.2.1. The source and target

9.2.2. Binding mode

9.2.3. Change notification

9.2.4. DataContext

9.3. Entering and displaying text

9.3.1. Working with the TextBox

9.3.2. Experimenting with the PasswordBox

9.3.3. Spell checking and autocorrect

9.4. UI element binding using sliders

9.5. Working with lists

9.5.1. Observable collections

9.5.2. Items controls

9.5.3. Data templates

9.6. Making things happen with buttons and commands

9.6.1. Button and commands

9.6.2. HyperlinkButton

9.6.3. RadioButton and CheckBox

9.7. Converting data with value converters

9.8. Summary

Chapter 10. View controls, Semantic Zoom, and navigation

10.1. PhotoBrowser demonstration app setup

10.1.1. Creating the project

10.1.2. Creating the Photo model class

10.1.3. Loading pictures using a service class

10.1.4. Creating the MainViewModel

10.1.5. Skeleton UI XAML and code-behind

10.2. ListView and GridView

10.2.1. Vertical lists

10.2.2. Horizontal lists and grids

10.3. Grouping with the GridView

10.3.1. Grouping in the model and viewmodel

10.3.2. Grouping at the UI layer

10.4. FlipView and navigation

10.4.1. Viewmodel

10.4.2. Category browser page

10.4.3. Updated MainPage

10.5. Semantic Zoom

10.6. Summary

Chapter 11. The app bar

11.1. Project updates

11.2. Controls on the bottom app bar

11.2.1. Adding and styling buttons

11.2.2. Wiring with commands

11.2.3. Visibility and pinning

11.3. Top app bar for navigation

11.4. App bar popups and menus

11.5. Summary

Chapter 12. The splash screen, app tile, and notifications

12.1. Splash screens

12.1.1. The static splash screen

12.1.2. Extended splash screens

12.2. Default tiles on the start page

12.3. Secondary or pinned tiles

12.3.1. Creating the tile

12.3.2. Activating the app with the secondary tile

12.4. Tile notifications or live tiles

12.4.1. Simple text notifications

12.4.2. Images in notifications

12.4.3. Queuing multiple tile notifications

12.5. Toast notifications

12.5.1. Creating the notification service

12.5.2. Enabling toast

12.6. Summary

Chapter 13. View states

13.1. Full, filled, and snapped views

13.2. The LayoutAwarePage

13.3. The snapped view for the main page

13.4. Visual states for view management

13.5. Detail pages and app bars

13.5.1. Creating an appropriate presentation

13.5.2. Fixing up the app bar

13.6. Summary

Chapter 14. Contracts: playing nicely with others

14.1. Sharing

14.1.1. Sharing your data

14.1.2. Letting others share with you

14.2. Letting others search your data

14.2.1. Declaring your intentions

14.2.2. The results page and viewmodel

14.2.3. Responding to in-app search requests

14.2.4. Responding to external search requests

14.3. Summary

Chapter 15. Working with files

15.1. Loading files programmatically

15.1.1. New demonstration project

15.1.2. File access permissions

15.1.3. Storage files and folders

15.1.4. Using a data template selector

15.1.5. Using file queries

15.1.6. Creating files and folders

15.2. URI formats

15.3. Working with file pickers

15.3.1. Using the file open picker

15.3.2. Implementing the file picker source contract

15.4. Summary

Chapter 16. Asynchronous everywhere

16.1. Why asynchronous is important

16.2. Working with IAsync* WinRT methods

16.2.1. async and await: the simplest approach

16.2.2. Long-form asynchronous operations

16.2.3. Getting progress updates

16.2.4. Canceling the operation

16.3. Working with tasks

16.3.1. Basic task operations

16.3.2. Canceling the task

16.3.3. Converting between WinRT IAsync* and Tasks

16.4. Summary

Chapter 17. Networking with SOAP and RESTful services

17.1. Networking basics

17.1.1. Solution setup

17.1.2. Downloading a file with HttpClient

17.2. Sharing your model

17.2.1. Create the source class library

17.2.2. Create the Modern app–compatible class library

17.3. Consuming SOAP services

17.3.1. Creating the service

17.3.2. Referencing and using the service

17.4. Structuring your client code using MVVM

17.4.1. Creating the viewmodel

17.4.2. Creating and wiring up the user interface

17.5. Consuming data from RESTful services

17.5.1. Creating the RESTful service

17.5.2. Getting data from the service using the viewmodel

17.5.3. Specifying the acceptable data type

17.6. Deserializing JSON and XML data

17.6.1. XML deserialization using XmlSerializer

17.6.2. JSON deserialization

17.7. Updating data using PUT, POST, DELETE, and more

Updating the Message Service

Calling the New Functions From the Client

17.8. Summary

Chapter 18. A chat app using sockets

18.1. Chat app viewmodel

18.1.1. The MainViewModel class

18.1.2. ChatMessage model class

18.2. The user interface

18.2.1. XAML skeleton

18.2.2. Styles and resources

18.2.3. App bar buttons

18.2.4. Chat app content

18.3. Listening for connections

18.4. Connecting to the server and sending data

18.4.1. Connecting to an endpoint

18.4.2. Sending data

18.5. Refactoring for better structure and flexibility

18.5.1. The updated ChatMessage class

18.5.2. The IMessageService interface

18.5.3. The TcpStreamMessageService class

18.5.4. Updated MainViewModel

18.6. Trying out UDP sockets

18.6.1. Creating the UdpMessageService class

18.6.2. Listening for connections

18.6.3. Connecting to another machine

18.6.4. Receiving and parsing messages

18.7. Summary

Chapter 19. A little UI work: user controls and Blend

19.1. Updated game UI

19.1.1. Basic changes

19.1.2. Play field area

19.1.3. Orientation and view states

19.2. Designing the ship UI

19.2.1. Creating the UserControl

19.2.2. Creating the ship shape in Blend

19.2.3. Adding a label

19.3. Building out the ship user control properties

19.3.1. Enabling rotation

19.3.2. Setting the color

19.3.3. Temporarily testing the Ship control

19.4. Summary

Chapter 20. Networking player location

20.1. Updating the Player model

20.1.1. The PlayerLocation class

20.1.2. The updated Player class

20.2. The collection of players

20.2.1. Initializing the collection

20.2.2. Displaying players with an ItemsControl

20.2.3. Testing the collection

20.2.4. Wiring up the collection to service events

20.3. Updating the TCP stream message service

20.3.1. Updated message service interface

20.3.2. Sending location information

20.3.3. Reading location information

20.4. Testing everything

20.5. Summary

Chapter 21. Keyboards, mice, touch, accelerometers, and gamepads

21.1. Making input generic

21.1.1. The IInputService interface

21.1.2. A little math help

21.1.3. Wiring up the viewmodel

21.2. Keyboard input

21.2.1. The KeyboardInputService

21.2.2. Virtual keys

21.2.3. Adding from the code-behind

21.3. Pointer input: mouse, touch, and pen

21.3.1. Some more math

21.3.2. A minor modification to the ship user control

21.3.3. The PointerInputService class

21.3.4. Adding from the code-behind

21.4. Accelerometer input

21.4.1. Making sense of the input

21.4.2. Implementing the AccelerometerInputService

21.4.3. Adding from the code-behind

21.4.4. Accelerometer events

21.4.5. Dealing with screen autorotation

21.5. Xbox 360 gamepad input and a little C++

21.5.1. Creating the C++ project

21.5.2. Implementing the Controller class

21.5.3. Creating the IInputService wrapper

21.5.4. Adding from the code-behind

21.5.5. Compiling and deploying

21.6. Summary

Chapter 22. App settings and suspend/resume

22.1. App settings UI and architecture

22.1.1. Creating the settings infrastructure

22.1.2. Creating a settings UI

22.2. Persisting and using settings

22.2.1. Loading and saving settings values

22.2.2. Acting on the options

22.3. Suspend and resume

22.3.1. Suspending your app

22.3.2. Resuming activity

22.4. Summary

Chapter 23. Deploying and selling your app

23.1. Testing for certification

23.2. Sideloading for testing purposes

23.2.1. Packaging an app for sideloading

23.2.2. Getting a developer license without Visual Studio

23.2.3. Installing the sideload app package

23.3. Enabling trial mode

23.3.1. Creating the mock license data for testing

23.3.2. Checking the license state

23.4. Listing your app in the Windows Store

23.4.1. Getting a Windows Store account

23.4.2. Reserving an app name

23.4.3. Submitting the app for review and approval

23.5. Summary

Index

List of Figures

List of Tables

List of Listings

Preface

I’ve been programming for fun since seventh grade in 1984 and professionally since around 1991/1992. During that time, I’ve see a lot of change. In the ’80s, as the personal computer industry was trying to settle, there were dozens of completely incompatible (both software- and hardware-wise) computers available to the public. In my small group of friends, some owned Commodore 64s, some Commodore VIC-20s, a couple of Apple II variants, a TRS-80 or two, and a couple of others I can’t recall. My middle school (properly called a junior high school in Massachusetts) was equipped with some DEC VT-102 Robins, a handful of Commodore VIC-20s (with their disk drive on a serial A/B switch to share between different computers), and a number of Commodore 64 computers. My high school had an Apple IIgs, a couple of Apple IIe computers, and several Apple II computers. Later, they got an Apple IIc and several knock-off Apple clones as well as a lone black-and-white Macintosh. The few computer-literate teachers had access to a handful of IBM PCs to do the serious work of tracking student grades and whatnot. The computer camp I attended in tenth grade used DEC Rainbows and Commodore PETs. The computer competition I attended in tenth grade required knowing Unix and C.

Over the span of four years (seventh grade to tenth grade), I had to learn how to program in multiple incompatible dialects of BASIC and become proficient in multiple different operating systems just to be able to sit down at any given machine and do something useful. (One very interesting trait of these computers, as has been pointed out by others, is that you used to have to choose not to program. Programming was the default. More on that some other time.) Later, as a professional just a couple of years out of high school, at a single job I had for a bit under four years, I had to know how to use dBase, FoxPro, Borland Delphi, Borland C++, PowerBuilder, Visual Basic 3, QBasic, QuickBasic, and much more. Oh, and I had to be able to set up the Novel Netware 4 network at the office and convert everyone from dumb terminals to DOS and Windows 3.x PCs. The languages were different, the UI layers were different. There was little to no compatibility between any of these packages.

Change was the norm. It was expected.

Fast-forward to today. As developers, we’ve never had more pressure on us to be productive, but at the same time, we’ve never had the longevity of tools, platforms, and languages that we have today. If you started with .NET 1.0 or the alphas/betas (as I did), you’ve been able to use the same programming language and core runtime for almost 13 years. If you’ve been a Java programmer, you can claim an even longer run. The only people who had those kinds of runs in the past were FORTRAN and COBOL programmers.

Lately, things have begun to change a bit more. To keep up with the demands of users and the heavy competition in the mobile space, we’re seeing programming languages and underlying platforms rev more frequently. A natural consequence of this is deprecation or sunsetting of platforms that don’t fit the new interaction models and the emergence of newer API sets, compilers, and more. The JavaScript space has arguably had the most rapid innovation, with new tools and libraries emerging seemingly daily. Many of those have, over the years, completely altered the language in ways that would make modern JavaScript completely foreign to programmers who learned it 10 or even 5 years ago.

On the Windows side, we’ve seen some amazing work in the .NET and XAML space. Interestingly, despite the changes of underlying platforms and the names of the products, .NET and XAML have remained far more compatible than many other platforms over the years. If you started learning XAML with WPF (or a year later with Silverlight), modern Windows Store XAML will easily become familiar, much like learning BASIC on the Commodore 64 and then learning to program the Apple II. Sure, the PEEK and POKE locations may be different, and there are a few other syntax differences, but there’s far more that’s compatible than incompatible.

As someone who has made a career of .NET since the first time I gave the two-day .NET 1.0 seminars in the .NET 1.0 alpha days, it’s heartening to see that my C# skills are still just as valid today as they were 13 years ago. I’m also happy to see that my investment in XAML starting back in 2006 has served me well across every client platform Microsoft has created. By combining XAML and C#, I can code for the Windows Phone, Windows Store, and the desktop. If I stick to just C#, I can code for everything from tiny ARM microcontrollers on Netduino and Gadgeteer all the way up to massive servers. Through all of this, I’m staying within a tightly focused sphere of development that centers on Visual Studio and C# (or VB, if you prefer).

That’s a solid return on investment.

As developers, we tend to focus on the differences in the Microsoft platforms. It’s just natural, because it’s those differences that give us headaches and make us take up hobbies that involve close encounters with our mortality. But the very fact that we can focus on those differences shows how compatible these platforms are.

For fun, I like to code on microcontrollers. To varying degrees, I’ve learned ARM with C, AVR with C and C++, PIC with C, NETMF with C#, and a little Arduino. Each of these used completely different IDEs; each uses completely different toolchains. Each time I try to learn another microcontroller, there’s very little practical knowledge I can port from one to the other. The registers are all different, the libraries are completely different, and, of course, the IDEs are completely different. This means I’ve not been able to ramp up on any one platform (with the exception of NETMF because of C#) in a short amount of time; each has been a huge investment in after-the-kids-go-to-sleep time. Few of the IDEs have usable IntelliSense, and help files are almost never in sync with the APIs. It’s a lot of trial and error—just getting LEDs to blink on a board feels like a huge accomplishment.

When it came time for me to learn how to write Windows Store apps, I found I had far less to learn than I would have had I been a developer using another platform. Despite WinRT replacing some of the features of .NET, it all felt very familiar. C# worked just as it has all along. Visual Studio was instantly familiar. I can use most of .NET, and the parts that have been replaced by WinRT feel just like .NET.

I’m glad I made the decision, all those years ago, to invest in learning VB3-6 and then C#. I’m also glad I moved from Windows Forms to XAML (WPF and then Silver-light) back in the mid-2000s. Both of these decisions have served me well and will continue to serve me well as Microsoft advances the platforms to better meet the needs of users and to better compete in the marketplace. As a developer, you too should feel confident that although individual products fall out of favor from time to time, your investment in core programming skills, and the higher-level .NET skills beyond that, continues to be just as useful, relevant, and marketable today as it has been over the past decade.

Viva la C#!

Viva la XAML!

Viva el desarrollador!

Acknowledgments

My name is on the cover, but technical books like this require a whole team to complete and publish. I’d like to thank the following:

The various Windows and Developer Division product teams who helped with clarifying just how things work under the covers and who were open to my rather detailed questions.

Tom McKearney, who has managed to tech review another entire book, and who has provided me with someone to blame if there are any problems with the code listings.

My friends at Manning Publications: people like Mary Piergies, Linda Recktenwald, Elizabeth Martin, and Jeff Bleiel, who all helped ensure this book is as good as possible and written in one grammatically correct voice.

The reviewers of the manuscript at various stages of its developent. Your feedback was much appreciated: Brian T. Young, Daniel Martin, Dave Arkell, Dave Campbell, Gordon Mackie (aka Joan Miró), Ian Randall, Krishna Chaitanya Anipindi, Paschal Leloup, Patrick Hastings, Patrick Toohey, Richard Scott-Robinson, Roland Civet, Rupert Wood, and Todd Miranda.

Unique in these thanks is my editor, Jeff Bleiel. This is the third book I’ve worked on with Jeff. He is my editorial interface with Manning and my continued mentor as an author. Jeff made a positive contribution to this book and to my writing in general.

As with my other books, I’d like to thank my mum for making sure that I knew the difference between you’re and your and that spelling always counts.

Most importantly, I’d like to acknowledge the contribution of my wife, Melissa, and my children, Ben and Abby. Writing a book takes an enormous amount of time, during which I’m not helping around the house, entertaining my children, or otherwise being good company. Thank you to my family for continuing to support me through another book when all my friends are telling me, Dude, you should be writing apps. You’ll make a lot more money.

Finally, thanks to you, my readers. I wrote this and continue to support you in the hopes that I can help you succeed and create awesome apps.

About this Book

The goal of this book is to take you, the developer who is at least a little familiar with C# and .NET, and help you become an awesome Windows Store app developer, regardless of which version of Windows you use for building Windows Store apps. If you’re already an awesome Windows developer familiar with Windows Store apps, WPF, or Silverlight, I’ve included deep topics to help you learn more about the platform and how things work under the covers.

After you’ve read this book, you should be able to confidently design, develop, and deliver Windows Store apps. To facilitate the learning process, I’ve structured the book to get you developing as soon as possible, while providing quality, in-depth content and several functional apps you can learn from or build on.

Within each chapter, I’ve included a collection of devices to help you build a firm understanding of the XAML UI platform for Windows. The following list explains how each device helps along the journey:

Figures—Visual depictions that summarize data and help with the connection of complex concepts. Most of these are annotated to call out important details.

Code snippets—Small, concise pieces of code primarily used for showing syntactical formats. You’re usually not expected to type these in and compile, because they’re incomplete.

Code listings—Code that you can type into your project in Visual Studio. In many cases, it will take multiple code listings to build a working example.

Tables—Easy-to-read summaries.

In addition to these learning devices, my personal site, http://10rem.net, complements the information in this book and often goes into deep detail in specific areas.

Audience

This book is intended for developers who want to create great apps for the Windows Store or for sideloading within an enterprise.

Though XAML provides numerous avenues for interactions with designers, this book primarily targets people who live and breathe inside Visual Studio. With the deeper integration of Blend with Visual Studio, I’ve included some developer-focused material on working with Blend later in this book.

In addition, and more important, this book assumes you have a background using the .NET Framework and Microsoft Visual Studio. Although we’ll be using C# as the primary development language, we won’t be reviewing the C# language or explaining basic programming constructs such as classes, methods, and variables.

Experience with Silverlight or WPF will help speed you through the XAML concepts but isn’t a prerequisite for this book.

The bits: what you need

This book provides ample opportunity for hands-on learning. But it also provides a great deal of flexibility by allowing you to learn the material without using the hands-on content or optional tools. You’ll find it equally valuable to read this book at the computer, on the train, or wherever else you happen to read.

If you want to get the greatest value out of this book and sit down and code or design, here’s what you’ll need:

A PC with Windows 8 or higher installed. The examples in this book were originally developed on Windows 8 but will also work with later versions of Windows. You must develop for Windows on Windows. Although it can work, I don’t recommend doing this inside a virtual machine because you will run into issues with the Simulator (which is a remote desktop connection to the same machine), and on lower-end machines, performance will suffer.

You can use the latest recommended version of Visual Studio that will compile for the version of Windows you are using. For Windows 8, here are the recommended versions:

Microsoft Visual Studio 2012 Pro or better for both Windows Store and web development, or the free Microsoft Visual Studio 2012 Express for Windows Store apps and, for the networking examples, the free Microsoft Visual Studio 2012 Express for Web.

Blend for Visual Studio 2012 or higher. Use the version that’s shipped with the version of Visual Studio you’re using.

You’ll find links to all of these tools, as well as any information on updates, at http://dev.windows.com.

Above and beyond your development PC, you may also find the following optional items useful:

A Microsoft Surface with Windows Runtime (WinRT) or other ARM-based touch tablet to test compiling and deploying to other architectures.

Any tablet or other PC with a Windows-recognized accelerometer for testing accelerometer input. If you have a Microsoft Surface, it will serve you well here.

A wired Xbox controller for Windows for the C++ integration example.

A device with a Windows-recognized touch screen. This will help, of course, with the touch screen examples. If you have a Microsoft Surface, it will also fill this requirement.

A second PC for testing the peer-to-peer networking examples. If you have a Microsoft Surface or other tablet running Windows 8+, you can use that.

A note on versions

You’ll note a lot of or the latest version comments in the software requirements for this book.

The days of waiting three years for an update to Windows and the related development tools have passed. Microsoft recognizes that agility in delivery is as important as individual features. These days, Windows and Visual Studio often update too fast for any publication (or developer, for that matter) to keep up.

For those reasons, the source code for this book will be kept as up to date as much as possible with the latest versions of Windows and tools until the next major revision of this book has been made available. As part of that, if there are any breaking changes in the next version of Windows after Windows 8.1, these will be called out with information made freely available to the purchasers of this book.

With the ongoing Windows commitment to backward compatibility, you can feel safe that the code and techniques you learn for Windows 8 will be applicable to future versions of Windows as well.

Roadmap

WinRT XAML is a brand-new platform but with strong roots in the XAML + .NET platforms that preceded it. I’ve endeavored to arrange the topics in this book in such a way as to start with a simple example, cover all the basics and theory, and then build out some apps while exploring the more complex topics.

There are no formal sections in this book, but if you squint your eyes a little, you can logically group the chapters as follows:

Windows

It’s important to cover the basics up front. Not only are these the technical basics, but they’re also the overall themes of the platform and the reasons we made certain decisions. Starting with Windows 8, we have a brand-new set of APIs and design approaches to become familiar with. Chapter 1 introduces Windows and the concepts behind it. Chapter 2 discusses the modern UI, along with its standards and history. Finally, chapter 3 covers the Windows Runtime, what it is, how it has been designed, and why it’s so important for Windows Store apps.

XAML and Basic Controls

Next, we dive right into XAML. Chapter 4 covers all the basics of XAML, plus a number of topics of interest to advanced developers. Chapter 5 goes into detail on the layout process. This is an important topic for both beginners and advanced developers because so much performance and functionality are affected by the layout engine. Building on that information, chapter 6 covers the commonly used panels, such as the Grid and Canvas. Chapter 7 deals with graphics, images, and resource management.

One thing you’ll learn early on is the importance of text in Windows Store apps. Chapter 8 goes into depth on text, showing how to create beautiful content using text.

Finally, this group wraps up with coverage of binding and controls in chapter 9. I decided to go right into MVVM (Model-View-ViewModel) at this point as well, because it’s a good pattern to get used to.

Windows 8 UI Specifics

Although XAML is common and highly compatible across many platforms, Windows Store apps have access to some controls, layouts, and interaction patterns that are unique to the platform. Chapter 10 covers the most important of these controls and how they fit in with navigation. I also cover the Semantic Zoom pattern and control. Chapter 11 covers the modern analog to the toolbar: the app bar. Chapter 12 covers the app’s tile and the notification system built into Windows. Chapter 13 covers the important view states all apps must support (snapped view, portrait, landscape, and filled mode).

Throughout all of these chapters, we’ll build a PhotoBrowser app that showcases the features.

Integration with the OS, Services, and Other Apps

Windows Store apps have a set of standardized, user-driven mechanisms for integrating with each other. Collectively, these are called contracts and are what are invoked when you use charms such as Search and Share. Chapter 14 specifically covers how to use searching and sharing in the context of the Photo Viewer app.

Chapter 15 then shows how to work with files and file pickers. Files access is the one area that’s perhaps the most different from all other XAML and .NET implementations. Throw out everything you’ve learned about file access in the past, and learn the new (and arguably much better) approach introduced with Windows 8.

Networking and the Chat/Game Peer-To-Peer App

Connected apps are the norm, so several chapters in this book are dedicated to networking. Before jumping into networking, chapter 16 covers the important async patterns used in Windows Store apps. Chapter 17 then starts the coverage of networking by showing how to work with SOAP and RESTful services. This is the type of bread-and-butter stuff any connected app will need. Chapter 18 gets into the more advanced topic of socket communication. As part of the coverage of sockets, we’ll start the second app of this book: a chat and peer-to-peer game app involving spaceships.

Chapter 19 helps flesh out the socket app by showing how to create a player control using Blend for Visual Studio. Chapter 20 helps glue the ship and sockets together by showing how to send meaningful information across the socket connection.

Then, because games with just one type of input are a bit boring, we’ll implement all the major types of human and device input. In chapter 21, starting with the basics of keyboard input, we’ll make the ship move around on the screen and across the network. We’ll get into mice and touch-based interaction. Then, we’ll make the app accelerometer-aware so you can tilt the device to move the ship around. Finally, we’ll implement a C++ WinRT extension library to make use of an Xbox gamepad. Lots of fun stuff here!

Wrapping Up

To wrap up this book and put a nice bow on what you’ve learned, I cover the app lifetime, including suspend and resume, and the related app settings in chapter 22. At this point, you’ll have a great foundation for building your own apps.

Then, moving out of the source code and into the Store, in chapter 23 I cover how to prepare your app for Windows Store submission and how to get it into the Windows Store.

Code conventions and downloads

You can find the source code for all the examples in the book at www.manning.com/WindowsStoreAppDevelopment.

The following conventions are used throughout the book:

Italic typeface is used to introduce new terms.

Courier typeface is used to denote code samples, as well as elements and attributes, method names, classes, interfaces, and other identifiers.

Code annotations accompany many segments of code.

Code line continuations use the symbol.

Author Online

The purchase of Windows Store App Development includes free access to a private web forum run by Manning Publications, where you can make comments about the book, ask technical questions, and receive help from the author and from other users. To access the forum and subscribe to it, point your web browser to www.manning.com/WindowsStoreAppDevelopment. This page provides information on how to get on the forum once you are registered, what kind of help is available, and the rules of conduct on the forum.

Manning’s commitment to our readers is to provide a venue where a meaningful dialogue between individual readers and between readers and the author can take place. It is not a commitment to any specific amount of participation on the part of the author, whose contribution to the forum remains voluntary (and unpaid). We suggest you try asking the author some challenging questions lest his interest stray!

The author online forum and the archives of previous discussions will be accessible from the publisher’s website as long as the book is in print.

About the Author

Pete Brown works for Microsoft as a Technical Evangelist on the Client and Devices team in John Shewchuk’s deep tech (http://bit.ly/DeepTech) Developer Platform Evangelism group. His role is helping developers create high-quality apps for all clients, using Microsoft tools and technologies.

Prior to joining Microsoft in 2009, Pete was an architect, engagement manager, and user experience designer at a consulting company in the Washington, DC, area, where he focused on Silverlight and WPF development. During that time he was also an INETA speaker, a Microsoft WPF MVP, and a Microsoft Silverlight MVP.

As one of only a few remote workers in corporate Microsoft, Pete has a lot of Lync/ Skype webcam meetings and enjoys the stunned look he gets whenever people see his home office in the background. If a nuclear submarine and a radio station had a child near an anime convention staffed by modular synth addicts working on Commodore 64s, it would be only slightly less geeky.

Pete enjoys playing with synthesizers, writing, woodworking, electronics, programming (PC apps as well programs for ARM microcontrollers), making things with no practical use, acquiring huge monitors, cooking processors, and of course, spending time with his wife and two children at their home in Maryland.

About the Cover Illustration

The figure on the cover of Windows Store App Development is captioned A Traveler. The illustration is taken from a nineteenth-century edition of Sylvain Maréchal’s four-volume compendium of regional dress customs published in France. Each illustration is finely drawn and colored by hand. The rich variety of Maréchal’s collection reminds us vividly of how culturally apart the world’s towns and regions were just 200 years ago. Isolated from each other, people spoke different dialects and languages. On the streets or in the countryside, it was easy to identify where they lived and what their trade or station in life was just by their dress.

Dress codes have changed since then and the diversity by region, so rich at the time, has faded away. It is now hard to tell apart the inhabitants of different continents, let alone different towns or regions. Perhaps we have traded cultural diversity for a more varied personal life—certainly for a more varied and fast-paced technological life.

At a time when it is hard to tell one computer book from another, Manning celebrates the inventiveness and initiative of the computer business with book covers based on the rich diversity of regional life of two centuries ago, brought back to life by Maréchal’s pictures.

Chapter 1. Hello, Modern Windows

This chapter covers

Building your first Windows 8 app

Getting a developer license

Using the Simulator

Remotely debugging apps

Welcome to the brave new world of Windows Store app development! Getting into a new platform as it first emerges is always exciting. I love learning new things and targeting new platforms. I like being an early adopter. Sure, not everything is quite as fleshed out as you may want when you get in early, and it sometimes feels like the Wild West, but the satisfaction you get from that head start almost always makes it worth it.

Plus, quite frankly, it’s much easier to learn something new while it’s still small enough to be digestible. Looking back at Silverlight, I learned it at version 1.1a when it was just a baby. Had I picked it up at version 4 or 5 when the API surface area was 10 times as large, it would have taken me forever to learn all its ins and outs. Platforms invariably grow in scope and capability. The earlier you learn them, the less you have to take in all at once.

Because XAML and C# are one of the combinations of technologies you can use to develop for the Windows Store, if you’ve developed applications for the Windows Phone or desktop using Silverlight, you’ll find yourself well positioned to quickly learn Windows app development. The Windows Runtime XAML stack and C#/.NET side of things were both developed by many of the same people who worked on Silverlight and Windows Presentation Foundation (WPF).

Getting into Windows Store app development now will give you that same head start. Using XAML and C# allows you to lean on past experience if you have it and tons of preexisting XAML and C#/.NET content if you don’t.

Microsoft is making a serious attempt at capturing the tablet market currently dominated by the iPad and Android devices. If those platforms have taught app developers anything, it’s that getting in early with a good app can help spell success for an individual or company.

You picked up this book, so I’m going to assume you’re already interested in Windows 8 and don’t need encouragement in your selection. Instead, I’d like to take this first chapter and build something right away—just throw you right into the fire. By the end of this chapter, you’ll know how to create a simple app and have a working development environment you can use as we dive more deeply into the features in the remainder of this book.

In this chapter, you’ll build your very first Windows 8 app using C# and XAML. Neither the application nor the code will be complex. The point here is to acquaint you with a new development and runtime environment and platform rather than produce the mother of all samples.

I’ll start by helping you set up your development environment. Once that’s complete, you’ll create a new project and look at the various configuration settings, property pages, and stock files that are important. Then, I’ll show you how to create a very simple Hello World! application. All that application will do is display Hello World! on the screen.

From there, you’ll modify the application to pull data from Twitter and display it onscreen. When run, the completed application will look like figure 1.1. Despite not being very pretty, this app follows the new design aesthetic, runs full screen, and supports touch. It uses the new WrapGrid layout control and, to many, familiar XAML concepts. If you don’t know XAML yourself, don’t worry; you will by the end of this book.

Figure 1.1. The completed Hello World! application.

1.1. Setting up the development environment

Windows 8 Modern apps can only be developed on Windows 8, so the first thing you’ll need to do is install Windows 8. Hardware selection is too large a topic for this book, but you’ll want to make sure the screen width is at least 1366 x 768 or larger so you can use snapped views for apps. The machine will need to be based on an x86-compatible processor because Windows RT (ARM) devices can’t run Visual Studio.

The ideal situation is to install on the metal or set up a bootable VHD on a typical developer-class machine. Running in a virtual machine is okay, but you’ll find the experience frustrating at times, especially when it comes to swiping from the edges or activating elements using the hot corners.

Your Microsoft Account

When installing Windows, unless you’re using a domain account, make sure you set up a Microsoft account rather than a local account. Microsoft accounts have much better integration with online services, and you’ll need one to obtain a developer key. Microsoft account is a new name for Windows Live ID (or Passport, if you can remember back that far)—something almost every .NET developer already has.

To develop Windows apps, you’ll need to have a version of Visual Studio 2012. You can use the free Visual Studio Express for Windows 8 apps, or you can install a higher level and more feature-rich version such as Professional. You can find links to all the important bits at http://dev.windows.com. All the required SDKs and templates are installed automatically with Visual Studio 2012; even .NET 4.5 and the Windows Runtime are already installed on the Windows 8 machine. No additional downloads are required.

You don’t need a Windows Store account just yet, but you’ll eventually want one of those as well (more on the Windows Store in chapter 23). You can obtain a free developer key automatically the first time you create a Modern Style app in Visual Studio, as you’ll see in a moment.

1.2. Configuring the project

In keeping with the spirit of Hello World, your first Windows app will be a simple one designed to let you see the construction and build process from front to back. Don’t worry about understanding all the parts of the project just yet; that’ll come in the subsequent chapters.

In Visual Studio, select the Start page link (or File menu option) to create a new project. This will be a Visual C# project, a Windows Store app, using the Blank App (XAML) template. The .NET framework version used is 4.5—the only version currently supported for Windows app development. I named it HelloWorld, as shown in figure 1.2.

Figure 1.2. Creating the Windows XAML app using the Blank App template

Notice the other project templates: Grid App (XAML) and Split App (XAML) in particular. Those are feature-rich templates, much like the business application templates and navigation templates in Silverlight. I’ll skip these templates for now, because we’ll dive into them later in this book, and there’s a lot more to them than we want to get into in chapter 1.

Click OK to create the project. If this is the first time you’ve created a Windows 8 app on your machine, you’ll be prompted to create a developer license, as shown in figures 1.3 and 1.4.

Figure 1.3. Prompt to obtain a developer license

Figure 1.4. You’ll need to be online when you go to obtain the developer license. If not, you’ll be unable to continue creating the Windows 8 app. Don’t wait until you’re off the grid (in a taxi or one of those planes without Wi-Fi) before obtaining or renewing your license.

When you first run Visual Studio and try to build a Windows 8 app, you’ll have to register for a developer license. This is free and is granted for 30 days for non-store use and 90 days if you have a Windows Store account (these durations are subject to change). Renewing is painless as long as you have an internet connection. It may be a bit annoying to renew every 30 days, but it’s a necessary step to make sure that people creating malware or otherwise trying to cause havoc can have their keys turned off.

You can renew your developer license through the command prompt or through Visual Studio at any time should you know you’re going to be disconnected from the internet for a bit. You can find the instructions at http://bit.ly/Win8DevLicense. You may consider automating the renewal to happen every 29 days or some other time period by scheduling a job to do it for you.

Tip

I speak at a lot of events. I assume many of you also give demos to potential clients, managers, and others. If it has been a few weeks since you renewed your developer license, do so before you give that important demo. Nothing will tank your presentation faster than being prompted to renew your developer license when there’s no available internet connection. This happened to me on one of the few plane trips I took that didn’t have working Wi-Fi. I read a book instead.

If you want to keep things simple, use a single ID for your machine login and your developer license. This isn’t always possible, especially in the case of domain-joined machines, so consider it a recommendation and not a hard rule.

Once you have the developer license, you’ll be tossed into the IDE with your project loaded.

1.2.1. The device pane

Once the application template is loaded, you’ll be presented with the solution. Open MainPage.xaml and you’ll see the design surface and the usual developer window panes. One pane, the Device window panel, shown in figure 1.5, stands out as new, however.

Figure 1.5. Visual Studio 2012 with the blank project template loaded in the Hello World project. The Device window on the left is new to Windows app development and is a real convenience for screen layout.

Tip

Your design surface will likely be black. If not, compile the solution so the design surface can update.

The Device pane (windows are generally referred to as panes when docked) to the left of the design surface has a number of buttons to let you try out different views for your application: Full, Filled, Snapped, and Portrait. Under the View buttons, there’s the Display selector. This lets you select from common display resolutions. Finally, there are options that control other aspects of the simulated tablet (or touch screen) on the design surface.

Tip

If the Device window/pane isn’t visible, go to the DESIGN menu and select Device Window. It’s not on the VIEW menu, unlike most other dockable windows. Yes, the menus are in all caps. Embrace the case.

All of these options are external to your application code and markup; they don’t change anything. They simply let you test your UI layout under a number of different configurations without actually deploying it to a machine of that resolution. Nice!

Feel free to play with the options a bit, but then return them to their defaults when finished. I’m using a test resolution of 1366 x 768 (at 148 dpi), the minimum full-featured Windows 8 resolution, and have the view configured to the full view.

1.2.2. Template solution items

To the right of the design surface, you’ll see the Solution Explorer. As a .NET developer, you’re almost certainly familiar with this by now. Notice, however, that there are a few more files and folders there than you may be used to.

If you’re a Silverlight or WPF developer, App.xaml should be familiar to you. For those new to the platform, this is where the startup code exists and where you can keep styles, templates, and other resources that are shared throughout the entire application.

The Common folder contains the very important StandardStyles.xaml file. You’ll use this file, or more correctly, the resources in it, when creating the UI for the applications throughout this book. This file is where the Windows 8 Modern app styles reside.

Don’t mess with the standard styles...at first

I mentioned that the StandardStyles.xaml file is important. The note at the top of the file says it all:

This file contains XAML styles that simplify application development.

These are not merely convenient but are required by most Visual Studio project and item templates. Removing, renaming, or otherwise modifying the content of these files may result in a project that doesn’t build or that won’t build once additional pages are added. If variations on these styles are desired, it is recommended that you copy the content under a new name and modify your private copy.

So treat this file like you would autogenerated files, and leave it alone until you have more experience in app development. Experienced developers will want to pare down this file before deployment, because the additional styles do add a small amount of load time.

The Assets folder contains the application images. In it, you’ll find the app’s main and small logo as used in the tiles, the splash screen logo, and the logo to be used in the Windows Store.

Right-click the Hello World project (not the solution) and choose Properties. Most of the options here are familiar, but click the Debug tab on the left. In there you’ll see a number of start options. By default, you’ll run on the local machine. But there’s also an option to start the application on a remote machine. This is key if you want to actively test and debug on a sub-developer-class machine or a machine that simply can’t run Visual Studio, like a Windows on ARM tablet. Additionally, there’s the option to start the app in the Simulator, which we’ll explore shortly.

Next, double-click the Package.appxmanifest file. This is where you’ll specify the runtime configuration for your application, including the logos, supported orientations, background color, capabilities (such as needing access to the pictures library), and declarations (such as registering as a picture provider or as a file save picker).

This is also where you can specify your start page’s tile background and foreground colors and logos. In short, this is the place where many of the important packaging and deployment details are kept.

1.3. Create the first Hello World UI

The next step is to create a very simple Hello World UI. Open up MainPage.xaml if it isn’t already open. Before you do any real work, turn on Show Grid (this is the 20-pixel grid we’ll cover in chapter 2) and turn on Snap to Grid. Both controls are at the bottom of the design window, as shown in figure 1.6.

Figure 1.6. The Show Grid and Snap to Grid controls (the six-box grids) on the XAML design surface. If you plan to drag controls onto the design surface, turn on both Show Grid and Snap to Grid by clicking the buttons shown here. These buttons can be found at the bottom of the design surface or between the design surface and the XAML view if you’re using the default IDE layout.

Next, you can either drag a TextBlock from the Toolbox (pane on the left—you may need to click it or hover over it if it’s not already open) onto the design surface and visually align its left and text baseline with one of the major grid lines, or you can simply paste inside the Grid element the following XAML:

Hello World!

          Height=42 Width=270

          HorizontalAlignment=Left VerticalAlignment=Top