Windows Store App
Development
C#
AND XAML
PETE BROWN
11
M A N N I N G
SHELTER ISLANDcontents
preface xvii acknowledgments xx about this book xxii about the author xxviii. about the cover illustration xxix
If Hello, Modern Windows 1
-U-
1.1 Setting up the development environment 3
1.2 Configuring the project 3
The device pane 5 * Template solution items
7
1.3 Create the first Hello World UI 8
1.4 Integrating with Twitter 9
T h e Tweet class 10* Updated UI JO* Code-behind 11
1.5 Testing on different devices and resolutions 13
Debugging on the Simulator 13 * Debugging on a remote device 14
1.6 Summary 18
The Modern UI 19
2.1 Design inspiration 20
Direct influences 21 * Finding your way 22
2.2 Governing principles 23
2.3 Typography 25
2.4 The importance of the layout grid 27
2.5 Design for touch but not only for touch 28
2.6 Modern apps on Windows 8 28
Consumer and enterprise apps 29 • Key Windoius 8 UI elements and states 31
2.7 Device considerations 33
Desktop or laptop 33 • Tablet and smaller devices 33 Hybrid devices 34
2.8 Summary 34
The Windows Runtime and .NET 35
3.1 Windows Store app system architecture 36
The sandbox 38 • Deployment and the Windows Store 39 The driver model 40
3.2 COM + .NET metadata = WinRT 41
COM: back to the future 42 • Metadata 44 Projections 46
3.3 Client technologies and languages 47
3.4 A brief tour of WinRT and .NET 4.5 48
3.5 Summary 50
XAML 51
4.1 Elements and namespaces 52
Objects as elements 52 • Namespaces 54
4.2 Properties 56
Property syntax 56 • Dependency properties 58 Attached properties 61 • Property paths 62
4.3 Object trees and namescope 62
Object trees 63 • Namescope 66
4.4 Summary 68
Layout 69
5.1 Multipass layout—measuring and arranging 70
The measure pass 71 • The arrange pass 71 The Layoutlnformation class 73
CONTENTS
5.2 UIElement layout properties 74
Width and Height, plus ActualWidth and ActualHeight 75 Horizontal and vertical alignment 77 * Padding 78 Margins 79
5.3 Layout rounding 80
5.4 Performance considerations 82
Keeping the tree shallow 82 * Caching 83 Visualization 83 * Sizing and positioning 84
5.5 Summary 84
Panels 86
6.1 Canvas 87
Positioning in X, Y space 88 * Controlling the
Z
position using ZIndex 89 * Sizing child elements 916.2 StackPanel and VirtualizingStackPanel 91
Setting the orientation 92 ' Sizing children 93 Virtualizing for perfomiance 93
6.3 Grid 94
Defining rows and columns 95 * Adding and positioning elements in rows and columns 97* Using alignment and margins for sizing and positioning 99
6.4 Creating a custom panel 102
Project setup 102 • The OrbitPanel class 103* Orbits dependency property 103 * Orbit attached property 105 Custom layout 107
6.5 Summary 111
Brushes, graphics, styles, and resources 112
7.1 Brushes 113
Solid-color brushes 113 * Gradient brushes 116 Image brushes 118
7.2 Resources 120
Local and page resources 121 * Application resources 123 Resource dictionaries 123
7.3 Styles 127
Explicit or keyed styles 127 * Style inheritance 128 Implicit styles 130
7.4 Vector graphics 132
Line 132 • Polyline 134 • Paths 135 • Rectangles and ellipses 137
7.5 Bitmap images 137
7.6 Summary 139
Displaying beautiful text 141
8.1 Text basics 143
TextBlock 144 • Inlines 146 • Wrapping, ellipsis, and alignment 147 • Character spacing 150 Line spacing 151
8.2 Rich and multicolumn text 153
Rich text 154 • Multicolumn and linked text 157
8.3 OpenType text 160
Ligatures 160 * Stylistic sets 161 • Font capitals 163 Fractions and numbers 164 • Variants, superscript, and subscript 166
8.4 Embedding fonts 167
8.5 Summary 168
Controls, binding, and MWM 170
9.1 The Model-View-ViewModel pattern 172
Using an MWM toolkit like M WM Light 174 1 The
model 175 • The chat data service 176 • The MainViexvModel and CameraVieivModel classes 178 • The vietv 180
9.2 Binding primer 183
The source and target 184 • Binding mode 185 Change notification 186 " DcitaContext 189
9.3 Entering and displaying text 190
Working with the TextBox 191 * Experimenting with the PasswordBox 192 • Spell checking and, autocorrect 193
9.4 UI element binding using sliders 194
9.5 Working with lists 197
Observable collections 197 * Items controls 198 Data templates 199
9.6 Making things happen with buttons and commands 200
Button and commands 201 • HyperlinkButlon 203 RadioButton and CheckBox 204
CONTENTS
9.7 Converting data with value converters 207
9.8 Summary 209
View controls, Semantic Zoom, and navigation 211
10.1 PhotoBrowser demonstration app setup 213
Creating the project 214 • Creating the Photo model class 215 • Loading pictures using a service class 215 Creating the MainViewModel 217 * Skeleton UI XAML and code-behind 218
10.2 ListView and GridView 220
Vertical lists 220 * Horizontal lists and grids 223
10.3 Grouping with the GridView 226
Grouping in the model and, viexmnodel 227 • Grouping at UI layer 228
10.4 FlipView and navigation 231
Vieiumodel 232 • Category browser page 232 • Updated. Main Page 235
10.5 Semantic Zoom 236
10.6 Summary 239
The app bar 241
11.1 Project updates 243
11.2 Controls on the bottom app bar 246
Adding and styling buttons 246 • Wiring with >• commands 250 • Visibility and pinning 258
11.3 Top app bar for navigation 259
11.4 App bar popups and menus 261
11.5 Summary 263
The splash screen, app tile, and notifications 265
12.1 Splash screens 267
The static splash screen 267 * Extended splash screens 269
12.2 Default tiles on the start page 275
12.3 Secondary or pinned tiles 276
Creating the tile 277 • Activating the app xuith the secondary tile 281
12.4 Tile notifications or live tiles 284
Simple text notifications 285 • Images in notifications 288 Queuing multiple tile notifications 291
12.5 Toast notifications 294
Creating the notification service 295 • Enabling toast 298
12.6 Summary 299
View states 300
13.1 Full, filled, and snapped views 301
13.2 The LayoutAwarePage 303
13.3 The snapped view for the main page 305
13.4 Visual states for view management 307
13.5 Detail pages and app bars 309
Creating an appropriate presentation 310 • Fixing up the app bar 314
13.6 Summary 317
Contracts: playing nicely with others 319
14.1 Sharing 320
Sharing your data 321 • Letting others share with you 325
14.2 Letting others search your data 332
Declaring your intentions 332 • The results page and viewmodel 333 m Responding to in-app search requests 338
Responding to external search requests 339
14.3 Summary 340
Working with files 342
15.1 Loading files programmatically 343
New demonstration project 343 " File access permissions 34
7
Storage files and folders 348 * Using a data template selector 351 * Using file queries 354 • Creating files and folders 355
15.2 URI formats 359
15.3 Working with file pickers 361
Using the file open picker 361 • Implementing the file picker source contract 363
CONTENTS xiii
Asynchronous everywhere 369
16.1 Why asynchronous is important 371
16.2 Working with lAsync* WinRT methods 373
async and await: the simplest approach 374 * Long-form asynchronous operations 376 * Getting progress
updates 378 • Canceling the operation 380
16.3 Working with tasks 381
Basic task operations 382 * Canceling the task 384 Conveiiing between WinRT lAsync* and, Tasks 385
16.4 Summary 387
Networking with SOAP and RESTful services 388
17.1 Networking basics 389
Solution setup 390 * Downloading a file with HttpClient 392
17.2 Sharing your model 393
Create the source class library 395 * Create the Modem apji—compatible class library 397
17.3 Consuming SOAP services 398
Creating the service 399 • Referencing and using the service 400
17.4 Structuring your client code using MWM 401
Creating the viewmodel 402 * Creating and wiring up the user interface 404
17.5 Consuming data from RESTful services 406
Creating the RESTful service 407 • Getting data from, the service using the viewmodel, 410 * Specifying the acceptable datatype 411
17.6 DeserializingJSON and XML data 412
X M L d e s e r i a l i z a t i o n u s i n g X m l S e r i a l i z e r 4 1 2 * J S O N deserialization 413
17.7 Updating data using PUT, POST, DELETE, and more 414
17.8 Summary 421
A chat app using sockets 423
18.1 Chat app viewmodel 425
18.2 The user interface 429
XAML skeleton 430 • Styles and resources 431 App bar buttons 432 • Chat app content 433
18.3 Listening for connections 434
18.4 Connecting to the server and sending data 439
Connecting to an endpoint 440 • Sending data 440
18.5 Refactoring for better structure and flexibility 441
The updated ChatMessage class 442 • The 1MessageService interface 444 • The TcpStreamMessageSeruice class 44 7 Updated MainVieiuModel 454
18.6 Trying out UDP sockets 458
Creating the UdpMessageService class 459 • Listening for connections 460 • Connecting to another machine 461 Receiving and parsing messages 462
18.7 Summary 464
A little UI work: user controls and Blend 465
19.1 Updated game UI 466
Basic changes 466 * Play field area 468 • Orientation and view states 469
19.2 Designing the ship UI 470
Creating the UserControl 471 • Creating the ship shape in Blend 472 • Adding a label 475
19.3 Building out the ship user control properties 476
Enabling rotation 477 * Setting the color 479 Temporarily testing the Ship control 480
19.4 Summary 481
Networking player location 482
20.1 Updating the" Player model 483
The PlayerLocation class 483 * The updated Player class 484
20.2 The collection of players 485
Initializing the collection 486 • Displaying players with an ItemsControl 488 • Testing the collection 489
CONTENTS XV
20.3 Updating the TCP stream message service 491
Updated message service interface 491 * Sending location information 493 • Reading location information 495
20.4 Testing everything 497
20.5 Summary 498
Keyboards, mice, touch, accelerometers,
and gamepads 500
21.1 Making input generic 502
The UnputService interface 502 * A little math help 504 Wiring up the vieiumodel 505
21.2 Keyboard input 507
The KeyboarclInputService 508 * Virtual keys 510 Adding from the code-behind 512
21.3 Pointer input: mouse, touch, and pen 513
Some more math 513 * A minor modification to the ship user control 517 * The PointerlnputService class 517 Adding from the code-behind 519
21.4 Accelerometer input 522
Making sense of the input 523 * Implementing the AcceleivmeterlnputService 524 * Adding from the code-behind 525 * Accelerometer events 526 * Dealing with screen autorotation 526
21.5 Xbox 360 gamepad input and a little C++ 527
Creating the C++project 527 * Implementing the Controller class 529 * Creating the UnputService wrapper 532 Adding from the code-behind 534 * Compiling and deploying 534
21.6 Summary 535
App settings and suspend/resume 537
22.1 App settings UI and architecture 538
Creating the settings infrastructure 538 * Creating a settings UI 542
22.2 Persisting and using settings 550
Loading and saving settings values 550 * Acting on the options 553
22.3 Suspend and resume 554
Suspending your app 554 • Resuming activity 555
22.4 Summary 557
Deploying and selling your app 559
23.1 Testing for certification 560
23.2 Sideloading for testing purposes 563
Packaging an app for sideloading 563 • Getting a developer license luithout Visual Studio 565 • Installing the side load app package 566
23.3 Enabling trial mode 567
Creating the mock license data for testing 567 • Checking the license state 569
23.4 Listing your app in the Windows Store 570
Getting a Windows Store account 570 • Reserving an app name 570 • Submitting the app for review and approval 571
