Windows Store App Development C# AND XAML PETE BROWN 11 MANNING SHELTER ISLAND
contents 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 The 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 vii
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 elements and states 31 2.7 Device considerations 33 29 Key Windoius 8 UI 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
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 91 6.2 StackPanel and VirtualizingStackPanel 91 6.3 Grid 94 Setting the orientation 92 ' Sizing children 93 Virtualizing for perfomiance 93 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
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 UI layer 228 10.4 FlipView and navigation 231 227 Grouping at 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 screens 269 267 * Extended splash 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 app bar 314 13.6 Summary 317 Contracts: playing nicely with others 319 14.1 Sharing 320 310 Fixing up the 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 source contract 363 15.4 Summary 368 361 Implementing the file picker
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 service 400 399 Referencing and using the 17.4 Structuring your client code using MWM 401 Creating the viewmodel user interface 404 402 * Creating and wiring up the 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 XML deserialization using XmlSerializer deserialization 413 412 * JSON 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 r Th,e MainViewModel class 426 * Chat,Message model class 429
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 447 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 class 484 20.2 The collection of players 485 483 * The updated Player Initializing the collection 486 Displaying players with an ItemsControl 488 Testing the collection 489 Wiring up the collection to service events 490
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 codebehind 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 settings UI 542 22.2 Persisting and using settings 550 538 * Creating a 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 23.5 Summary 573 index 5 75