The document is a comprehensive guide to Microsoft Azure and Windows 10 development, outlining cloud concepts, Azure infrastructure, and app development practices. It emphasizes the benefits of cloud computing, modern architecture principles, and the importance of high cohesion and low coupling in software design. Additionally, it discusses tools like Azure App Service and various Azure services that facilitate building scalable applications across different platforms.

1. Microsoft Azure & Windows 10
Development
Alon Fliess
Chief Software Architect
alonf@codevalue.net
http://blogs.microsoft.co.il/blogs/alon

2. Agenda
About
Cloud Concepts & Benefit
Azure Infrastructure and Services
Azure App Service
Mobile Services & Mobile Apps
Universal Windows Platform
App development
Introduction to XAML
Application Lifecycle
Advanced features
Summary

3. About Me
Alon Fliess:
Chief Software Architect & Co-Founder at CodeValue Ltd.
More than 25 years of hands-on experience
Microsoft Regional Director & Microsoft MVP
Active member of several Patterns & Practices councils
Renowned speaker at both international and domestic events

4. About CodeValue
A leading software company
~130 employees: more than 120 technology experts
Provides high quality software development solutions
Turn-Key projects
Software development and consultation
Tailor-made courses and training
Fields of expertise include:
Desktop & LOB applications
Cloud Computing
Advanced Mobile & Web Technologies
User Experience (UX) & User Interface (UI)
Application Lifecycle Management (ALM) and DevOps
Embedded & IoT

5. About OzCode
An innovative debugging extension for Visual-Studio
Simplify & visualize complex statements
Compare objects and collections
Search and filter collections
Focus on relevant data
http://oz-code.com

6. Israeli Azure Developer Community
Curious about Azure? Join us!
Meet every two months at Microsoft Ra’anana
Next meeting – December 2015
http://www.meetup.com/IsraeliAzureDevelopers
https://www.facebook.com/IsraeliAzureDevelopers

7. A Full Stack Developer
Full Stack Development includes:
Analysis of business needs
Architecture & Design
Server, Network, and Hosting Environment
Data Modeling
Business Logic
API Layer
User Interface, Client Logic, User Experience
Web, Desktop, Mobile
7

8. A Full Stack Developer
It is almost impossible to be an expert over every facet of the
development stack
However with great tooling and good foundation – one can build a full
system
In this course we will:
Talk about modern architecture & design
See how the cloud provides the backend server side foundation and tooling
See how Windows 10 provide the foundation and tooling for building
modern rich user interface clients
Running on IoT devices, phones, tablets and desktop

9. Windows 10 Motivation

10. Demo
One
Windows
Platform

11. Software Architecture

12. What an Architect Must Know
Understand the requirements
Understand the constraints
Low Coupling
High Cohesive
Balance of Size & Number of Components

13. The Architecture Process
Understand the requirements
Capture the main system building blocks
Provide the first abstraction
Validate the architecture concepts vs. the requirements
Communicate the conceptual architecture with the
stakeholders
Refine the architecture
Capture the architecture decisions
documentation, modeling

14. Requirements & Constrains
Non-Functional requirements
Mainly architecture phase
Functional requirements
Mainly design phase
Constraints
Decision Helpers

15. Architecture Attributes
Performance
Localize operations to minimize sub-system communication
Security & Identity
Use a layered architecture with critical assets in inner layers
Provide Identity flow diagram for the whole system
Safety
Isolate safety-critical components
Availability
Include redundant components in the architecture
Maintainability
Use fine-grain, self-contained components
Scalability
Include redundant components and handle state

16. More Quality Attributes (*Ilities )
Stability
Backward compatibility
Extensibility
Reliability
Maintainability
Availability
Security
Usability
Auditability
Scalability
Testability
Composability
Demonstrability
Deployability
Efficiency
Learnability
Manageability
Operability

17. Decomposition
17
Is this a good design?

18. Decomposition
Architecture 101
18
Is this a good design?

19. Decomposition
Is this a good design?

20. Decomposition
20
Decomposition

21. The cost of the software development process
21
number of modules
Module
Integration
cost
module
development
cost
Cost

22. Cohesion
The degree to which a module performs one and only one
function
Strive for high cohesion
Module can be:
Assembly (DLL)
File
Class
Method
WinRT/COM component
Any reusable element
22

23. Coupling
The degree to which each program module relies on each
one of the other modules
Low coupling often correlates with high cohesion, and vice
versa
Low coupling is
A sign of a well-structured computer system
Good design
When combined with high cohesion
supports high readability, maintainability, extendibility, and reusability
23

24. Fan-In Fan-Out and Stable Module
One way to examine module stability (i.e. Low coupling and
High Cohesion) is by looking at its Fan-In Fan-Out and other
dependencies
Fan-In: The number of users for the module
Fan-Out: The number of modules that the current module is
being used with
A Stable module is a module that has high fun-in and low
fan-out
This module can be easily reused
24

25. Cross Cutting Concerns
Logging
Authentication and Authorization (Identity & Security)
Error Handling
Communication & Hosting
Admin
Report
Caching
Configuration
Validation
…

26. The Two Views of The System
The software solution can be viewed from two angles:
The Static View
The components and the possible relationships between them
UML class diagram & component diagram for example
The Dynamic View
The flow of operation, request or transaction in the system
UML sequence and activity diagram for example
26

27. 27
Service A
ErrorDetector ErrorHandler
1
*
Error
1
*
*
*
ErrorInfo
Creates
Machine Manager
ErrorHandler ErrorInfo
1 *
ErrorMessage
errorDetctor
error
Create
errorHandler
NotifyNewError
GetErrorInfo
machineManagerErrorHandler
NewError
ClearError
CheckErrorStatus
Destroy

28. IDesign Method
IDesign method provides a methodology that assists in:
Assembly Allocation
Run-Time Process Allocation
Identity Management
Call Authentication and Authorization
Transaction Flow
To learn more about IDesign Method refer to IDesign site or
participate in one of Juval Lowy’s Architecture Master Class
http://www.idesign.net

29. 29
UI Application
Device
Accessor
Device A
Machine Health Monitoring
Utilities
Security
Admin
Client
Logging
Pub/Sub
.
.
.
Reports
Support
Health
View
Diagnostics
Manager
Command
Engine
Diagnostics
Control
Archive
Manager
Event
Health
Engine
Device B

30. Based on Idesign Methd
External
Systems
(Search - Endeca,
Back Office)
Accessors
B&H Android/
iOS and Future
Apps
Manager
Business Logic Layer
B&H B2C Site
DB (Oracle)/
Storage
Accessors
External Systems
Engine
RESTful Service Contract
Engine
Data
30

31. Analysis Phase
Analysis Phase

32. Analysis Realization & Validation
A user compares products
Home page MVC App
Controller
User Manager
Product Manager Inventory Engien Comparision Engine
Phase
Compare Selected
Products
Compare Products
Get Comparision
Template
Get Products
Compare Products
Get User Context
Return Comparision
Table
Build Comparision
Table
Get Products
Compare Products
With Template
To Define
user
comparision
defaults

33. Architecture Summary
Understand the requirements
Understand the constraints
Low Coupling
High Cohesive
Balance of Size & Number of Components

34. Cloud Computing

35. Why the Cloud?
Rapidly setup environments to drive business priorities
Scale to meet peak demands
Increase daily activities, efficiency and reduced cost.

36. Introduction to Cloud Computing
Cloud Computing - A Game Changing Technology
Infinite shared resources & services
Infrastructure is not a limiting factor
No need to equip for peak-load requirements
Elasticity on demand
Anytime, anywhere
Efficient scalability and high availability
Suitable pricing models
Pay for what you use

37. Cloud Computing
Evolution of Computing - The Next (Current) Big Thing
Virtualization and Abstraction
Details are abstracted from consumers
Reduces complexity
Not necessarily the Internet, can be on premises
Private cloud
Automation, Monitoring, Deployment
Reduce cost, shift risk, shorten time-to-market, focus on
business functionality
37

38. Less Worries
Focus on functionality
Let others take care of:
Resource management
Security
Environments (staging, production)
High availability, scalability, load balancing
Fault tolerance
OS - installation, licensing, updates, patches
Network
Maintenance
38

39. Why the Cloud?
On Premises
You
scale,
make
resilient
and
manage
Infrastructure
(as a Service)
Managed
by
vendor
You
scale,
make
resilient
&
manage
Platform
(as a Service)
Scale,
resilience
and
management
by
vendor
You
manage
Software
(as a Service)
Applications
Scale,
resilience
and
management
by
vendor

40. Cloud Computing Architecture

41. Introduction to Cloud Architecture
Cloud Computing - A Game Changing Technology
Infinite shared resources & services
Infrastructure is not a limiting factor
No need to equip for peak-load requirements
Elasticity on demand
Anytime, anywhere
Efficient scalability and high availability
Suitable pricing models
Pay for what you use
Less worries about the foundation – Better application quality!!!
41

42. Cloud Application Architecture
High Scale, High Availability, High Maintainability – to
the Extreme!
The Cloud technology enables cloud scale applications with much less effort
Answers many of the non-functional requirements and the cross-cutting concerns out of
the box!
Enables elastic, theoretically endless scale
Surfaces more concerns:
More geographic options
Promotes “design for failure” (be prepared for VM shutdown)
Promotes Agility (continued integrations/deployments)
42

43. Architect for High Availability
Remove any single-point-of-failure throughout your application
Make sure you have redundant services
Distribute services and data across geographies
Extreme monitoring & automatic responses
Elastic scaling
Self healing mechanisms (Azure Fabric Controller, AWS Elastic Beanstalk)
Long latency is a failure!
Make sure your services respond quickly even on load
Spawn more instances, buy better QoS resources (I/O, CPUs, Memory, Network)
Load balance to reduce the pressure
Have a storage only based failover web site for web applications
43

44. Load Balancing Servers
A single system can exceed its resource limit
CPU, Memory, IO, Network Connections
Use the best VM size to best fit the load among these resources
Scaling Out: LB Over VM Instances
Distribute the load across machines taking into account machine health
state
Configuring the Load Balancer:
Automatically with Azure App Fabric and Amazon Elastic Beanstalk
Manually with Amazon Elastic Load Balancing (ELB)
and Azure Endpoint LB
44

45. Multi-Tenancy
One Application to Rule Them All!
The cloud provides many benefits
You develop and deploy to the cloud
Staging/Production cloud environments
Cloud management & monitoring
You’d like to share those effort for all
of your customers
A Multi-tenant application is one application that serves many
isolated application instances
Beware of privacy
45

46. Azure Architecture Blueprints

47. Microsoft Azure

48. 48

49. Azure
footprint
Microsoft Azure – 17 Regions Worldwide in Mid 2015
Data Centers
Regional Partners

50. Fortune 500 using Azure
>80% >300k
Active websites
More than
1,000,000
SQL Databases in Azure
>30TRILLION
storage objects >500MILLION
AAD users
>13 BILLION
authentication/wk
>3
MILLION
requests/sec
>1.65
MILLION
Developers registered
with Visual Studio Online
Microsoft Azure (Mid 2015)

51. Microsoft Azure Services
Data
&
Storage
Web
&
Mobile
Compute
SQL Database
App
Service
Virtual
Machines
Media
&
CDN
Media
Services
CDN
Developer
Services
DocumentDB Redis Cache
Cloud Services Batch Service Fabric
Networking
Virtual
Network ExpressRoute
Traffic
Manager
StorSimple
Search
Storage
Identity
&
Access
Azure Active
Directory
Multi-Factor
Authent
API
Management
Notification
Hubs
Mobile
Engagement
Visual Studio
Online
Application
Insights
Management
Scheduler Automation
Operational
Insights Key Vault
Analytics
&
IoT
HDInsight
Machine
Learning
Stream
Analytics Data Factory Event Hubs
Hybrid
Integration
BizTalk
Services Service Bus Backup Site Recovery
Web App Mobile App API App Logic App
Blobs Tables Queues Files
Marketplace
…
Data Lake
Data
Warehouse
RemoteApp DNS
Application
Gateway

52. Azure Compute Instance Options
Most Memory
Fastest CPUs
SSD Storage
Faster CPUs
Highest Value Largest Scale-up
Highest Value >50,000s of IOPS

53. Azure Storage Page Blobs, 3 copies
High durability
VHD disks, 1 TB per disk (64 TB total)
500 IOPs per disk
Virtual Machine Standard Storage

54. Availability Sets
Availability set
SLA 99.95
SLA High Availability
Hardware and Software
Windows and Linux

55. Load Balancing
Internal and External
TCP/UDP
ACLs
Client Affinity

56. ARM – Resource Group
Container for multiple resources
Resources exist in one and only one resource group
Resource groups can span regions
Resource groups can span services
56

57. PaaS Services
There are many PaaS services such as:
Application & Web site deployment to an existing VM Image
Authentication, Identity & Access Control
Application Services
Web, Mobile, Logic
Cloud Containers
Docker, Service Fabric
Databases (SQL & No SQL)
Content Delivery Network (CDN)
Messaging, Queues & Service Bus
Distributed Cache
Business Workflows
Video (Media) Transcoding &
Streaming
Business Analytics, BI & Reporting
HPC & Big Data
IoT event streaming

58. Compute Continuum
Ultimate
Control
Rapid
Development
VMs
VM
Extensions
Service
Fabric
App Service
IaaS PaaS

59. Cloud Storage - Azure BLOB Storage
BLOB – Binary Large OBject
Storage for any type of entity such as binary files and text
documents
Distributed File Service (DFS)
Scalability and High availability
BLOB file is distributed between multiple server and replicated at
least 3 times
Get Started with Storage Account
Get Started with Blob Storage

60. Azure Blob Storage Concepts
60

61. Blob Operations
REST

62. Cloud Storage - SQL Azure
SQL Server in the cloud
No administrative overheads
Shared or Reserved (Dedicated) Hardware
High Availability
pay-as-you-grow pricing
Familiar Development Model
Create your first Azure SQL database

63. Cloud Storage - Table Storage
Not RDBMS
No relationships between entities
NoSql
Entity can have up to 255 properties - Up to 1MB per entity
Mandatory Properties for every entity
PartitionKey & RowKey (only indexed properties)
Uniquely identifies an entity
Same RowKey can be used in different PartitionKey
Defines the sort order
Timestamp - Optimistic Concurrency
Strongly consistent
Get Started with Table Storage

64. Table Storage Concepts
64

65. Cloud Storage - DocumentDB
A fully managed, highly scalable, queryable, schema-free document database,
delivered as a service, for modern applications
Query against Schema-Free JSON
Multi-Document transactions
Tunable, High Performance
Designed for cloud first
Get started with the
DocumentDB .NET SDK

66. PaaS - Azure Service Fabric

67. Battle-hardened for over 5 years

68. What is a Microservice?
Is (logic + state) that is independently versioned, deployed, and scaled
Has a unique name that can be resolved
e.g. fabric:/myapplication/myservice
Interacts with other microservices over well defined interfaces and
protocols like REST
Remains always logically consistent in the presence of failures
Hosted inside a “container” (code + config)
Can be written in any language and framework
node.js, Java VMs, any EXE
Developed by a small engineering team
68

69. Types of microservices
Stateless microservice
Has either no state or it can be retrieved from an external store
There can be N instances
e.g. web frontends, protocol gateways, Azure Cloud Services etc.
Stateful microservice
Maintain hard, authoritative state
N consistent copies achieved through replication and local persistence
e.g. database, documents, workflow, user profile, shopping cart etc.
69

70. Cluster: A federation of machines
Node
Node
Node
Node
Node
Node

71. Queues Storage
3-Tier service pattern
Front End
(Stateless
Web)
Stateless
Middle-tier
Compute
Cache
• Scale with partitioned
storage
• Increase reliability with
queues
• Reduce read latency with
caches
• Manage your own
transactions for state
consistency
• Many moving parts each
managed differently
Load Balancer

72. Stateful
Middle-tier
Compute
Stateful services: Simplify design, reduce latency
Front End
(Stateless
Web)
data stores used for analytics and disaster recovery
• Application state lives in
the compute tier
• Low Latency reads and
writes
• Partitions are first class for
scale-out
• Built in transactions
• Fewer moving parts
Load Balancer

73. Stateful Microservices are Reliable and Consistent
Each service is backed by replica set to make its internal
state reliable
All replicas are logically consistent – meaning all replicas see
the same linearized order of read and write operations to
initial state
Read-Write quorums are supported and are dynamically
adjusted
Replica set is dynamically reconfigured to account for
replica arrivals and departures
73

74. Microservices placement and failover
Node 103
P
S
S
Node 104
S
S
Node 102
P
S
S
S
Node 105
P
S
S
S
Node 101
S
S
P
Node 100
S
P
S
S
P
S
S
S

75. Get Started
Learn more about the Reliable Actors APIs
Learn more about the Reliable Services APIs
Get Started:
Reliable Actors: The canonical HelloWorld walk-through
scenario
Reliable Services: Getting Started with Microsoft Azure
Service Fabric Reliable Services

76. PaaS - Azure App Service

77. Azure App Service: One Integrated Offering
API Apps
Easily build and consume
APIs in the cloud
Web Apps
Web apps that scale
with your business
Mobile Apps
Build Mobile apps
for any device
Logic Apps
Automate business process
across SaaS and on-premises

78. Azure App Service
A new offering, consolidating and replacing existing services:
Azure Web Sites, Azure BizTalk Services, Azure Web API Authoring, Azure
Mobile Services
Create web and mobile experiences that share data access and
business logic
Automate business processes with logic apps
Build custom APIs or consume connectors from Marketplace
One common billing model for all of your App Services
Use a common Gateway to authenticate

79. Logic App – Easy Automation and Integration
No code designer for rapid creation
Dozens of pre-built templates to get started
Out of box support for popular SaaS and on-premises apps
Use with custom API apps of your own
Biztalk APIs for expert integration scenarios
Example:
Create a tweet when a file is saved to Dropbox
Introduction Video
Tutorial

81. API App – Create, Consume and Host API
Dozens of built-in APIs for popular SaaS
An ecosystem of APIs for any need
Create and publish custom, reusable APIs
Visual Studio tooling with one click publish and remote debugging
Automatic client SDK generation for many languages
Tutorial
Intro
Video

82. • Box
• Chatter
• Delay
• Dropbox
• Azure HD Insight
• Marketo
• Azure Media Services
• OneDrive
• SharePoint
• SQL Server
• Office 365
• Oracle
• QuickBooks
• SalesForce
• Sugar CRM
• SAP
• Azure Service Bus
• Azure Storage
• Timer / Recurrence
• Twilio
• Twitter
• IBM DB2
• Informix
• Websphere MQ
• Azure Web Jobs
• Yammer
• Dynamics CRM
• Dynamics AX
• Hybrid Connectivity
• HTTP, HTTPS
• File
• Flat File
• FTP, SFTP
• POP3/IMAP
• SMTP
• SOAP + WCF
• Batching / Debatching
• Validate
• Extract (XPath)
• Transform (+Mapper)
• Convert (XML-JSON)
• Convert (XML-FF)
• X12
• EDIFACT
• AS2
• TPMOM
• Rules Engine
Connectors
Protocols BizTalk Services
Built-in API Connectors

83. Azure Web Apps
Rich monitoring and
alerting
Traffic manager
Custom CNAMEs
VNET and VPN
Backup and restore
Many VM size and instance
options
In production A/B testing
Auto load-balance
Share capacity across Web and
Mobile
Staging slots
Validate changes in your staging
environment before publishing to
production
More DevOps features
Support for BitBucket and Visual
Studio Online; seamless integration
with GitHub
Web Jobs

84. Azure Mobile App

85. Azure Mobile App
REST
API
Offline
sync
Facebook Twitter Microsoft Google Azure Active
Directory
Windows
iOS
Android
HTML 5/JS
Xamarin
PhoneGap
Sencha
Windows
Android
Chrome
iOS OSX In-App
Kindle
Backend code
SQL Mongo
Tables O365 API Apps
Offline Sync

86. Azure Mobile App / Mobile Services
A Turnkey Backend for Employee Mobile Apps
Deliver Native & Cross Platform Apps
Enable Corporate Single Sign-On
Integrate w/ O365 and On-Premise Enterprise Systems
Connect To Any Data Source
Enable Offline and Real-Time Sync
Leverage Your Existing Skills with .NET Web API

87. Supported Platforms

88. Azure Mobile Apps vs. Azure Mobile Services
Mobile Services – in classic portal
Mobile Apps – preview portal
When Mobile Apps is GA, will have all the features of Mobile
Services
Your investment is safe!
Azure Mobile App is still in preview
New features will go into Mobile Apps
Azure Mobile Services is still supported
After GA, Microsoft to offer a seamless migration experience

89. JavaScript vs .NET

90. JavaScript
Based on server side scripts
Node.JS Scripts
Intercept CRUD requests to tables
Passes through to SQL by default
Fully customizable logic flow
Edit in Azure Portal or via GIT integration
Currently (October 15) limited support in the new Mobile App

91. .NET
Based on ASP.NET Web API 2
Full .NET support
Intercept CRUD requests to tables
Custom APIs available using Web API 2
Fully customizable logic flow
Standard VS tooling & support
Local debugging
Standard MS Deploy to Azure

92. Data Storage

93. New Data Model
TableController
DataManager
DTO
DTO
Mobile Service/App
Device
SQL Database
BYOD
MongoDB
Table Storage

94. Azure SQL DB
Out-of-the-box implementation
Easily store relational data
Fully integrated with Mobile Services

95. Azure Table Storage
Azure Table Storage is a highly-scalable cost-effective key-value data
store
NoSQL
Every item is addressable by combination of:
Partition Key
Row Key
Store non-relational data
.NET backend only

96. Azure Blob Storage
Storing Blobs in a database is inefficient
BLOB storage is much cheaper and scalable
Can manually integrate the backend (C#/JavaScript) with Blob
storage to store blobs
Only store a reference to the blob (URI) in the DB

97. Existing SQL Database
TableController
DataManager
DTO
DTO
Mobile App/Service
Device
Model
AutoMapper
SQL Azure/BYOD
Existing
Tables
System
Properties
Table

98. On-Premise SQL Database
Hybrid Connections
Microsoft Azure Your Enterprise
Connection string points to
My-Database:1433
Hybrid
Connection
Manager
My-Database
1433

99. The REST API
Action HTTP Verb URL Suffix
Create POST /TodoItem
Read GET /TodoItem?$filter=id%3D42
Update PATCH /TodoItem/id
Delete DELETE /TodoItem/id
https://Mobileservice.azure-mobile.net/tables/*

100. Demo

101. Authentication & Authorization

102. Social Authentication
Authenticate against Microsoft Account, Twitter, Facebook, Google
Table level permissions for each CRUD operation
Everyone
Anyone with the Application Key
Only Authenticated Users
Only Scripts and Admins
More granular control with server side code
User Level: Admin, Authenticated, Anonymous
User Id: Id or undefined if not authenticated

103. Social Authentication
APP
R
E
S
T
A
P
I
G
A
T
E
W
A
Y
Valid
User ID
+
Token

104. Enterprise Authentication
Use Azure Active Directory
Extend line-of-business to mobile
Bring turn-key login experience with corporate credentials to mobile
developers
Enable applications built around organizational structures

105. Offline Access & Synchronization

106. Offline Data Sync
The best mobile apps handle network interruptions gracefully
Adding offline sync to an app is usually hard
With Azure Mobile App, it’s easy

107. Why Use Mobile Offline Sync?
Improve app responsiveness by caching server data locally on the
device
Make apps resilient against intermittent network connectivity
Allow end-users to create and modify data even when there is no
network access
Sync data across multiple devices
Detect and handle conflicts when the same record is modified by
more than one client

108. Mobile Services/Apps Resources
Official Documentation
Azure Mobile Apps @BUILD 2015
Migration from Azure Mobile Services to Azure Mobile Apps
Microsoft Azure Training Kit
Azure DevCamp
Microsoft Virtual Academy

109. Push Notifications

110. Push is Transforming Businesses
Broadcast breaking news to millions
of customers using their
preferences
Send notifications based on
account changes or actions
Engage customer to improve your
brand, customer satisfaction, and
business metrics
Increase employee productivity
and
responsiveness

111. Push Notification 101
Register device handle at app launch
1. Client app retrieves handle from Platform
Notification Service (PNS)
2. Client app sends handle to your custom backend
Send Notification
3. Your backend connects to PNS and requests push
Your code has to map between logical users and
device handles
4. PNS pushes notification to device
Maintain backend device handles
5. Your code must delete expired handles when
PNS rejects them
6. Your code must map between logical users and device
handles
Platform
Notification
Service
App back-end
Client app
1
2
3
4
5
6

112. Azure Notification Hub
Register device handle at app launch
1. Client app retrieves handle from Platform Notification Service
2. Client sends handle to your backend
Backend registers with Notification Hub using tags to
represent logical users and groups
Send Notification
3. Backend sends request to Notification Hub using a tag
Notification Hub manages scale
Notification Hub maps logical users/groups to device
handles
4. Notification Hub delivers notifications to matching
devices via PNS
Maintain backend device handles
5. Notification Hub deletes expired handles when PNS
rejects them
6. Notification Hub maintains mapping between logical
users/groups and device handles
PNS
App back-end
Client app
1
2
2
4
5
6
Notification
Hub
3
4

113. Advantages of Notification Hub
X-plat: one API to notify on any mobile platform
Backend can be on-prem or in the cloud, .NET, Java, PHP, Node, you name it
Support iOS, Android, Windows Phone, Windows, Kindle
Avoid storing device information in your tables
Work with logical users and segments
Personalization and localization
Templates
Broadcast at scale, multicast, unicast
Rich Telemetry
Get Started with Windows App
Blog Post

114. Demo

115. SignalR

116. SignalR
A library for ASP.NET developers
Simplifies the process of adding real-time web functionality to
applications
Stock tickers
Notifications
Any real-time server to client information
SDKs are available in various platforms
Azure Mobile Services allows integrating SignalR communication
Easily integrate web based clients
.NET Backend Only
http://www.asp.net/signalr
http://www.asp.net/signalr/overview/deployment/using-signalr-with-azure-web-sites
Azure Mobile Services SignalR Support

117. Summary

118. Windows Universal Platform

119. Phone Small Tablet
2-in-1s
(Tablet or Laptop)
Desktops
& All-in-Ones
Phablet Large Tablet
Classic
Laptop
Xbox IoT
Surface Hub Holographic
Windows 10

120. One Store +
One Dev Center
Reuse Existing
Code
One SDK +
Tooling
Adaptive
User Interface
Natural
User Inputs
One Universal Windows Platform

121. Universal Windows Platform
One Operating System
One Windows core for all devices
One App Platform
Apps run across every family
One Dev Center
Single submission flow and dashboard
One Store
Global reach, local monetization
Consumers, Business & Education

122. Universal Windows Platform
A single API surface
A guaranteed API surface
The same on all devices
Phone
Device
Xbox
Device
Desktop
Device
Windows Core
Universal Windows Platform

123. Windows app
A single app package
Running on any device
Testing for capabilities
Adjusting to devices
Phone
Device
Xbox
Device
Desktop
Device
Windows Core
Universal Windows Platform
Windows App

124. Demo

126. Shell-drawn back button for Mobile and Tablet

127. Desktop, Windowed mode:
Opt-in, shell-drawn back button on Title Bar
if (Frame.CanGoBack)
{
// Setting this visible is ignored on Mobile and when in tablet mode!
Windows.UI.Core.SystemNavigationManager.GetForCurrentView().AppViewBackButtonVisibility =
AppViewBackButtonVisibility.Visible;
}

128. Desktop, Windowed mode:
Or provide your own on-canvas Back Button

129. UI Designer and XAML
Fundamentals

130. UI Designer and XAML Fundamentals
Visual Studio
UI Designer
Toolbox
Document Outline
Properties View
Device Emulator
What is XAML?
Basic XAML
Type Converters
Markup Extensions
Naming Elements
XAML Rules
Summary

131. UI Designer
Visual Studio UI Designer
provides quick and easy way to
produce rich UI interface
Drag and drop UI controls from
the toolbox into the designer
The UI designer provides an easy
way to select, resize, align,
transform and more, using only
the mouse
The UI designer generates XAML
and automatically updated when
XAML changes

132. Toolbox
The toolbox groups UI controls
available at design time
3rd party and custom controls are also
available from the toolbox
Simple drag and drop a control from
the toolbox to the designer canvas
Element from the toolbox can be also
drag and drop directly into XAML
Controls can be searched within the
search box and can be sorted
Additional groups can be created

133. Device View
The device view provides an easy way to change page layout properties
Page orientation: Landscape or Portrait
screen resolutions:

134. Document Outline
The document outline view displays
the logical tree of UI elements, each
element name or type and an icon of
the element’s type
Each element in the hierarchy can be
design-time locked and hidden
The document outline is very useful to
navigate between UI elements,
especially in complex XAML files

135. Properties View
The properties view provides an easy
a rapid way to:
Search for an element’s property by its
name
Set simple property value using plain
text
Set complex property value using
designers
Easily select color brushes, styles, font
size, transformations and more
Register element’s events
Arrange properties in groups
Create data bindings
Reset to default values

136. What is XAML?
XML based language
Enable separation of UI and behavior (code)
Windows Phone related tools emit XAML
XAML allows
Creation of objects
Setting of properties
Connection to events
Custom behaviors
XAML cannot call methods directly

137. XAML vs. Code
Anything that can be done in XAML can be done in
code
But not vice versa
XAML is usually shorter and more concise than the
equivalent code
Thanks to type converters and markup extensions
XAML should be used for initial UI
Code will handle events and change items
dynamically

138. Simple XAML Example
Visual Studio UI designer generates XAML on each control
picked from the toolbox
XAML Can be visually viewed in the UI designer
<Button xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
Content="OK" />
Windows.UI.Xaml.Controls.Button b = new
Windows.UI.Xaml.Controls.Button();()
b.Content = "OK";

139. XAML Namespaces
The default XAML namespace is assigned a value that is
mapped to some of the runtime namespaces contain UI
elements
Other XAML namespaces may be mapped to custom
namespaces and other runtime namespaces
The “x” namespace is mapped to a special namespace,
contains XAML parser specific types
XAML namespace can be defined on each element level

140. XAML Example
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button x:Name="buttonOk"
Width="200"
Height="200"
Content="OK"
Click="buttonOk_Click" />
</Grid>

141. Elements and Attributes
Elements with type names only designate object creation
(via the default constructor)
Attributes indicate property or event values
Event values are event handlers (methods) names
Complex properties are designated using a
<Type.Property> element

142. XAML Example
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button x:Name="buttonOk"
Width="200"
Height="200"
Content="OK"
Click="buttonOk_Click" >
<Button.Background>
<LinearGradientBrush EndPoint="0.5,1“
StartPoint="0.5,0">
<GradientStop Color="#FFB2D9FF" Offset="0.004"/>
<GradientStop Color="#FFB0D8FF" Offset="1"/>
<GradientStop Color="#FF0A85FF" Offset="0.571"/>
</LinearGradientBrush>
</Button.Background>
</Button>
</Grid>

143. XAML And Code Behind
A root element, usually Page or UserControl classes, can have code
behind file
The name of the code behind file is correlated to the XAML file name
For example: MainPage.xaml and MainPage.xaml.cs
The code behind full class name is specified from XAML using the
x:Class directive
<Page
x:Class="UWPDemo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWPDemo"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Image x:Name="image" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Fill" Opacity="0.5"/>
<Button x:Name="button" Content="Button" HorizontalAlignment="Left" " Height="61" Width="127"/>
</Grid>
</Page>

144. Child Elements
Child elements (that are not property elements) can
be one of
The Content property of the object
A property adorned with the attribute
Windows.UI.Xaml.Controls.ContentProperty
Collection items
The object implements IList or IDictionary
A value that can be type-converted

145. Content Property
A single property that is designated with the
ContentProperty attribute on the type
Allows shortening the markup
<Button Content="OK" >
</Button>
<Button>
OK
</Button>
<Button>
<Button.Content>
<Rectangle Fill="Blue"/>
</Button.Content>
</Button>
<Button>
<Rectangle Fill="Blue"/>
</Button>

146. Collection Items
List (IList)
Dictionary (IDictionary)
<ListBox>
<ListBox.Items>
<ListBoxItem Content="Item 1"/>
<ListBoxItem Content="Item 2"/>
</ListBox.Items>
</ListBox>
<ResourceDictionary>
<SolidColorBrush x:Key="br1" Color="Aqua" />
<Rectangle x:Key="rc1" Fill="Brown" />
</ResourceDictionary>

147. Summary of XAML Rules
XML Element – create a new instance
XML attribute – set a property or register an event
Type converter may execute
Type.Property – set a “complex” property
ContentProperty attribute – no need to specify
Type.Property
Property of type IList or IDictionary
Add child elements (XAML calls appropriate Add method)
Need a x:Key in case of a dictionary

148. Parsing and Using XAML
Visual Studio compiles the XAML file to BAML (Binary XAML) and
embeds it as a resource
The BAML is parsed at runtime and the object tree created by the
InitializeComponent method of the parent’s element class
[GeneratedCodeAttribute("Microsoft.Windows.UI.Xaml.Build.Tasks"," 14.0.0.0")]
[global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
public void InitializeComponent()
{
if (_contentLoaded)
return;
_contentLoaded = true;
Uri resourceLocator = new Uri("ms-appx:///MainPage.xaml");
Application.LoadComponent(this, resourceLocator,
ComponentResourceLocation.Application);
{

149. Naming Elements
Elements can be named using the x:Name XAML attribute
The code-behind file will contain a field with that name
Elements deriving from FrameworkElement contain a
Name property that can be used in code to locate elements
x:Name and Name cannot be set on the same element

150. XAML Keywords
Keyword Valid on Meaning
x:Class Root element The class that derives from the element
type
x:ClassModifier Root element, must be
used with x:Class
The class visibility (public by default)
x:FieldModifier Element, must be used
with x:Name
Visibility of the field created behind the
element
x:Key Element that its parent
implements IDictionary
Key in a dictionary
x:Name Element The element’s name, used for a field
name for that element

151. Summary
XAML is mainly used to create a Windows Phone app user
interface
It declaratively allows object creation, property and event
assignment
A code-behind file will usually contain the procedural logic
Sharing with designers is easier
Tools such as Expression Blend generate XAML that is
immediately usable

152. Basic Concepts

153. Agenda
Logical and Visual Trees
Dependency Properties
Attached Properties
Routed Events
Attached Events
Resources
Summary

154. Logical Tree
A tree of elements/controls making up the user interface
<Page x:Class="UWPDemo.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<StackPanel>
<Button Content="OK" Background="Red" Margin="6"/>
<ListBox Margin="6" >
<ListBoxItem Margin="2">
<Border BorderThickness="4">
<TextBlock Text="Hello" FontSize="20" />
</Border>
</ListBoxItem>
<ListBoxItem Content="Item 2" />
</ListBox>
</StackPanel>
</Page>
Page
StackPanel
Button ListBox
ListBoxItem ListBoxItem
Border
TextBlock

155. Visual Tree
The actual visual objects
making up a logical tree
Generated from the control
templates

156. Traversing the Trees
The logical and visual trees can be examined using the static classes
System.Windows.LogicalTreeHelper and
Windows.UI.Xaml.Media.VisualTreeHelper
VisualTreeHelper
GetParent, GetChild, GetChildrenCount
LogicalTreeHelper
GetParent, GetChildren

157. Dependency Properties
Dependency properties are the workhorse of any XAML
based technology
Provide the basis for many of UWP’s features
E.g. data binding, animations, styles
Value may be provided by many entities, each with its own
priority
Highest active level wins out
Must be “registered” by calling the
DependencyProperty.Register method
Most UWP properties are dependency

158. Dependency Property Example
Can use the “propdp” Visual Studio code snippet for easier DP
declaration
public abstract class Shape : FrameworkElement {
public static readonly DependencyProperty FillProperty =
DependencyProperty.Register("Fill", typeof(Brush), typeof(Shape), new
FrameworkPropertyMetadata(null,
FrameworkPropertyMetadataOptions.SubPropertiesDoNotAffectRender |
FrameworkPropertyMetadataOptions.AffectsRender));
public Brush Fill {
get {
return (Brush)base.GetValue(FillProperty);
}
set {
base.SetValue(FillProperty, value);
}
}
}

159. Dependency Property Precedence
Property value coercion
Animation
Local value (also resource or data binding)
TemplatedParent template properties
Triggers override property setters
Implicit style
Style triggers
Template triggers
Style setters
Default (theme) style
Triggers in the theme style override setters
Inheritance
Default value from property metadata
High
Low

160. Attached Properties
Special kind of dependency properties
May be “attached” to objects of different types than the declaring
type
Declared with the static DependencyProperty.RegisterAttached
method
Allows “context” properties
E.g. Canvas.Left for elements that happen to be in a Canvas element
Can be set on any object
XAML
An attribute with Type.Property syntax is used
In code
The type exposes a SetXxx and a GetXxx with the element reference

161. Attached Properties Example
XAML
Code
<Canvas>
<Button x:Name="cmdOK" Canvas.Left="30" Canvas.Top="20"
Content="OK" Padding="10" FontSize="26">
</Button>
</Canvas>
Canvas.SetLeft(cmdOK, 30);
Canvas.SetTop(cmdOK, 20);
cmdOK.SetValue(Canvas.LeftProperty, 30);
cmdOK.SetValue(Canvas.TopProperty, 30);

162. Routed Events
UWP events are not implemented via the default .NET event
implementation
Routed events implemented similarly to dependency properties
Routing strategies (RoutingStrategy enum)
Bubbling event – upwards the tree
Tunneling event – downward the tree
Direct event – only on the source element
Declared with the static EventManager.RegisterRoutedEvent
method

163. Element Lifetime Events
Initialized (ordinary event, not a routed event)
Fired when the control properties have been set according to its XAML, but
styles and data binding have not been applied yet
The IsInitialized property is true
Loaded
Occurs after the entire window has been initialized and styles and data
binding have been applied
The IsLoaded property is true
Unloaded
Occurs when the specific element has been released, either because the
parent window has been closed or the element has been removed from its
container

164. Binary Resources
The resources that can be used by any .NET application
Usually store bitmaps, icons, etc.
Packaging
Embedded inside an Assembly
Loose files that are known to the application at compile time
Loose files that are not known to the application at compile time
May be localized

165. Defining Binary Resources
Binary resources can be embedded using Visual Studio by adding the
resource and selecting an action type
Resource
Embedded inside the assembly
Content
Remains as a loose file, but an AssemblyAssociatedContentFile attribute is
added with the relative path of the file
Don’t use the Embedded Resource action! (UWP can’t use such
resources)

166. Accessing Binary Resources
Binary resources that are added to the project as Content or
Resource can be referenced easily, even if loose files are involved (as
long as they are in the folder of the executable or a subfolder)
<Button VerticalAlignment="Center" HorizontalAlignment="Center" >
<StackPanel Orientation="Horizontal" >
<Image Source="apple.png" Width="48" Height="48" Margin="4"/>
<TextBlock Text="This is an Apple" FontSize="24"
VerticalAlignment="Center" Margin="4"/>
</StackPanel>
</Button>

167. Logical Resources
Arbitrary named .NET objects, stored in the Resources
collection property of an element
Typically for sharing the resource among child objects
The FrameworkElement type define a Resources
property (of type ResourceDictionary)

168. Creating and Using Resources
Add a Resources property to some element
Usually a Page or the Application
Any child element can reference those resources
Add the objects with a x:Key attribute (must be unique in this
resource dictionary)
Use the StaticResource markup extension with the resource key
name

169. Resources Example
<StackPanel Margin="4" Orientation="Horizontal" TextBlock.FontSize="20">
<Button Margin="4" Content="1" Padding="4">
<Button.Background>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="Yellow" />
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Margin="4" Content="2" Padding="4">
<Button.Background>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="Yellow" />
</LinearGradientBrush>
</Button.Background>
</Button>
<Button Margin="4" Content="3" Padding="4">
<Button.Background>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="Yellow" />
</LinearGradientBrush>
</Button.Background>
</Button>
</StackPanel>
<StackPanel Margin="4" Orientation="Horizontal" TextBlock.FontSize="20">
<StackPanel.Resources>
<LinearGradientBrush x:Key="back">
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="Yellow" />
</LinearGradientBrush>
</StackPanel.Resources>
<Button Margin="4" Content="1" Padding="4" Background="{StaticResource back}" />
<Button Margin="4" Content="2" Padding="4" Background="{StaticResource back}" />
<Button Margin="4" Content="3" Padding="4" Background="{StaticResource back}" />
</StackPanel>

170. Layout
Layout is the arranging of user interface elements within some
container
Older technologies (e.g. Windows Forms) mostly used exact position
and sizes
Limited in flexibility and adaptability
UWP provides several layout panels that can control dynamically size
and placement of elements
Elements may advertise their size and position needs

171. Size and Position of Elements
Element sizing and positioning is determined by the element itself
and its logical parent
A child element may request various settings
The parent panel does not have to comply

172. Element Layout Properties
Panel
Margin
Content
Padding
HorizontalAlignment
VerticalAlignment
Width
Height
LayoutTransform
FlowDirection
Element/Control

173. Element Size
Width and Height properties (from FrameworkElement)
Control the exact size of the element
Default value is Double.NaN
Meaning: be as large as it needs to be
usually a bad idea to use these properties
Prevents smart resizing by panel
Reasonable only in a Canvas
MinWidth, MinHeight, MaxWidth, MaxHeight properties
Defaults are 0 (MinWidth, MinHeight), Double.PositiveInfinity
(“Infinity” in XAML) (MaxWidth, MaxHeight)

174. More Size Properties
Read only properties
DesiredSize
Set indirectly by elements to report their desired size to their parent
Internally used by panels
RenderSize
The actual size the element is rendered with
ActualWidth, ActualHeight
Just the components of RenderSize (RenderSize.Width, RenderSize.Height)

175. Margin and Padding
Both of type Thickness (value type)
Maintains the properties Left, Top, Right, Bottom indicating distance
from the corresponding edge
Margin (from FrameworkElement)
The amount of space to add around the element
Padding (from Control, and Border)
The amount of space to add around the content of the control
In XAML, can supply one, two or four numbers

176. Visibility
Visibility of elements is determined by the Visibility property
(from UIElement) of the Windows.UI.Xaml.Visibility
enumeration
Visible
The element is rendered and participates in layout
Collapsed
The element is invisible and does not participate in layout

177. Element Positioning
Element position is determined by the containing panel policy
Simple X,Y is not the usual case
Elements can indicate their position constraints or preferences to
their containing panel

178. Alignment
Alignment indicates what should be done with any extra space given
to an element
HorizontalAlignment
Left, Right, Center, Stretch
VerticalAlignment
Top, Bottom, Center, Stretch
<StackPanel TextBlock.FontSize="20" Margin="4">
<Button HorizontalAlignment="Left" Background="Red">Left</Button>
<Button HorizontalAlignment="Center" Background="Orange">Center</Button>
<Button HorizontalAlignment="Right" Background="Yellow">Right</Button>
<Button HorizontalAlignment="Stretch" Background="Lime">Stretch</Button>
</StackPanel>

179. Content Alignment
Similar to element alignment
What to do with extra space when the content is smaller than its
control
HorizontalContentAlignment
VerticalContentAlignment
<StackPanel TextBlock.FontSize="20" Margin="4">
<Button HorizontalContentAlignment="Left" Background="Red">Left</Button>
<Button HorizontalContentAlignment="Center" Background="Orange">Center</Button>
<Button HorizontalContentAlignment="Right" Background="Yellow">Right</Button>
<Button HorizontalContentAlignment="Stretch" Background="Lime">Stretch</Button>
</StackPanel>

180. Flow Direction
The FlowDirection property indicates the flow of layout
LeftToRight (the default)
RightToLeft
The RightToLeft setting reverses the meaning of “left” and “right”

181. Layout Panels
Layout panels derive from the abstract
Windows.UI.Xaml.Controls.Panel class
Maintain a Children property of type UIElementCollection (its
ContentProperty)
Each child element can be a panel as well
Allows creation of complex and adaptive user interfaces
UWP provides several built in panels
Custom layout panels can be created as well

182. UWP Layout Panels
Main layout panels
Canvas
Arranges children in a 2D coordinate system
StackPanel
Arranges children in a horizontal or vertical “stack”
DockPanel
Arranges children horizontally or vertically to each other towards the edges
WrapPanel
Arranges children continuously horizontally or vertically, flowing to the next
row/column
Grid
Arranges children in a flexible grid

183. Example: The StackPanel
Stacks its elements in a vertical or horizontal “stack”
Orientation property
Vertical (default) or Horizontal
Alignment is ignored in the direction of stacking

184. The Grid
The most versatile and useful panel
Usually used as the top-level panel
Visual Studio and Expression Blend windows/user controls start this way
Arranges its children in a multi-row and multi-column way
Their sizes and number can be manipulated in interesting ways
Somewhat similar to an HTML table

185. Creating a Grid
For rows
Set the RowDefinitions property
Add a RowDefinition object for each row
Set any special properties
For columns
Set the ColumnDefinitions property
Add a ColumnDefinition object for each column
Set any special properties
For each element
Set the Grid.Row and Grid.Column attached properties (default is 0, 0)

186. Sizing Rows and Columns
By default, all rows are of equal height and all columns are of equal width
Can change the height of a row using the RowDefinition.Height property
Can change the width of a column using the ColumnDefinition.Width property
Each one of type GridLength
The unit is controlled by the GridUnitType property
Auto – size as required by content
Pixel – size is the number specified
Star – size is a weighted proportional (default)
“*”, “2*”, etc. in XAML
Spanning
A row may span more than one column and vice versa
Can be set by the Grid.RowSpan and Grid.ColumnSpan attached properties
Default for both is 1

187. What is a Control?
Controls are elements capable of receiving focus and handling input
Behavior is the distinction, not looks
Many controls are available “out of the box”
Custom controls can be created
User controls that wrap one or more controls and expose higher level
properties
Custom controls that derive from an existing control and extend its
functionality

188. Example: Static Text
The TextBlock Element
The Text property
Font related properties
FontSize, FontFamily, etc.
TextAlignment, TextTrimming, TextDecorations
An optional collection of “inlines”
Replacement for the Text property
Inheriting from the abstract Inline class
Hyperlink, Bold, Run, Span, Underline, Italic,
LineBreak

189. Example: TextBlock
<TextBlock FontSize="16" Margin="4">
<Run Text="Hello" />
<Bold>
Hello
<Italic>Hello</Italic>
</Bold>
<LineBreak />
<Hyperlink>Go to my web site</Hyperlink>
<LineBreak /><LineBreak />
<Underline>This line is underlined</Underline>
<LineBreak />
<Span FontSize="20">
Hello in Bigger Font
</Span>
</TextBlock>

190. Other Controls

191. The Application Object
Every UWP application is represented by an instance of
Windows.UI.Xaml.Application
A singleton
The static property Application.Current returns that instance
The Visual Studio wizard creates a XAML file for the application
Useful for application level resources
Also can set the StartupUri property to indicate which window to show
on startup

192. Application Events (1)
Startup
Called after Application.Run is called before the main window is shown
Can access command line arguments through the
StartupEventArgs.Args property
Can also be used to create a window explicitly (and calling Window.Show)
without relying on the StartupUri property
Exit
Application is being shutdown (for whatever reason)
Can set the exit code that is returned to the OS
Cannot cancel the shutdown process
(C)2015 by Pavel Yosifovich
192

193. Application Events (2)
SessionEnding
Windows session is ending (e.g. log off or shutdown)
Can cancel the shutdown by setting
SessionEndingCancelEventArgs.Cancel to true (otherwise WPF calls
Application.Shutdown)
Activated
Occurs when a top level window in the application is activated when the
user switches from another application
Also occurs the first time a window is shown
Deactivated
Occurs when the user switches to another application
(C)2015 by Pavel Yosifovich
193

194. Application Events (3)
DispatcherUnhandledException
Occurs when an unhandled exception is about to terminate the application
Only on the current (UI) thread
Can be used to log the error, show a nice dialog to the user, etc.
Can also “cancel” the exception and continue running by setting the
property DispatcherUnhandledExceptionEventArgs.Handled
to true
Must be careful – difficult to guarantee the application is in a valid state to continue
(C)2015 by Pavel Yosifovich
194

195. Application Shutdown
Application shutdown is controlled by the ShutdownMode property
OnLastWindowClose (default) – application shuts down when the last top
level window is closed
OnMainWindowClose – application shuts down when the main window
closes
OnExplicitShutdown – the application does not shut down even if all
windows are gone
Calling Application.Shutdown must be used
This call can be used regardless of the setting of the ShutdownMode property
(C)2015 by Pavel Yosifovich
195

196. Data Binding

197. What is Data Binding?
Data in UWP can reference any .NET object
Data binding means tying two arbitrary objects
Typical scenario is a non-visual object (or collection) to a visual
element
Any changes to the non-visual object are reflected in the visual
element (and optionally vice versa)

198. Data Binding Concepts
Source
The data object to bind to
Property Path
The property on the source object to use
May be a nested property, an array element or an indexer
Target
The target object to modify
Must be a dependency property
Binding Mode
Typically one way or two way (target update source)

199. Using Data Binding
Typically done in XAML using the {Binding} markup extension
The Binding class is the workhorse behind the scenes
Set on the target property
Can be done programmatically in code
Common scenario is when building custom controls

200. Binding Direction
The Binding object allows specifying how the target / source
properties are updated
Mode property (of type enum BindingMode)
Binding Mode Meaning
OneWay The target property is updated by source property changes
TwoWay OneWay + the source property is updated by changes of the target
property
OneWayToSource Similar to OneWay, but from target to source
For source properties that are not dependency properties
OneTime Target is updated by the source the first time they are bound
Default Depends on the target property.
TwoWay for user settable properties, OneWay for everything else.
This is the default value

201. Updates from the source property to the target property happen
immediately
In a TwoWay or OneWayToSource bindings, the source is updated
by the target based on the UpdateSourceTrigger property
UpdateSourceTrigger Meaning
PropertyChanged The source is updated whenever the target changes
LostFocus The source is updated when the target property’s element loses focus
Explicit The source is updated only when the method
BindingExpression.UpdateSource is called
Default Depends on the target property
(FrameworkPropertyMetadata.DefaultUpdateSourceTrigger property)

202. Binding to Objects
Source
Reference to the source object
RelativeSource
Sets the source based on the “location” of the target in the layout tree
Useful in data and control templates
DataContext
Used by default if Source or RelativeSource is not specified
Searches up the element tree if not found on target element

203. Change Notifications
An object must notify when one of its properties changes
By defining the property as a dependency property
Or by implementing the INotifyPropertyChanged interface
Raise the PropertyChanged event

204. The DataContext
Sometimes many elements bind to the same object
Perhaps with different properties
The object may be specified as the DataContext property on any
common parent element
Whenever the Source or RelativeSource properties are not
specified in the Binding, a data context object is searched up the
element hierarchy
If found, becomes the binding source object
Can be used programmatically without the need to create the source
object in XAML

205. Data Templates
A data template is a piece of UI that describes how to display a
source object
Various elements have properties of type DataTemplate just for
this
ContentControl has a ContentTemplate property
ItemsControl has a ItemTemplate property
HeaderedContentControl and HeaderedItemsControl have a
HeaderTemplate property
With data binding, the source object is automatically set to the
current object that is being rendered

206. Value Converters
A value converter can completely alter the way the source is
interpreted into the target
Often used to match source and target that are of incompatible
types
E.g. show a red background when the price of a book is greater than
50
A value converter implements the IValueConverter interface
Create an instance of the converter as a resource and use in a
binding expression
public interface IValueConverter {
object Convert(object value, Type targetType, object parameter, CultureInfo culture);
object ConvertBack(object value, Type targetType, object parameter,
CultureInfo culture);
}

207. Converter Parameters
The “parameter” object is null by default
Can be set using the ConverterParameter property of the Binding object
Not “bindable” in itself!
The culture info supplied is by default set to “en-US”
A type converter exists that can be used via the ConverterCulture
property of the Binding object (e.g. “fr-CA”, “he-IL”)
The return value can be Binding.DoNothing, which cancels the
binding operation

208. Data Template Selectors
A way to replace a data template completely
Cannot be done in XAML alone
Derive a class from DataTemplateSelector
Override the SelectTemplate method
Set the ItemTemplateSelector property on the ItemsControl
element to an instance of the custom template selector

209. Data Template Selector Example
<Window.Resources>
<local:AlternateTemplateSelector x:Key="tmpselect" EvenTemplate="tmp1" OddTemplate="tmp2" />
<DataTemplate x:Key="tmp1">
<TextBlock Margin="2" Background="Red" Foreground="White" FontSize="20" Text="{Binding}"/>
</DataTemplate>
<DataTemplate x:Key="tmp2">
<TextBlock Margin="2" Background="Yellow" Foreground="DarkBlue" FontSize="15" Text="{Binding}"/>
</DataTemplate>
</Window.Resources>
<ListBox Name="list" ItemTemplateSelector="{StaticResource tmpselect}"
HorizontalContentAlignment="Stretch"/>
public class AlternateTemplateSelector : DataTemplateSelector {
public string OddTemplate { get; set; }
public string EvenTemplate { get; set; }
public override DataTemplate SelectTemplate(object item, DependencyObject container) {
return (DataTemplate)((FrameworkElement)container).FindResource(
(int)item % 2 == 0 ? EvenTemplate : OddTemplate);
}
}
var data = new List<int>();
Random r = new Random();
for(int i = 1; i < 100; i++)
data.Add(r.Next(1, 100));
list.ItemsSource = data;

210. Styles
A style (instance of the Windows.UI.Xaml.Style class) is a
collection of dependency property setters (and triggers)
Usually defined as a resource
Can be applied to any element with the Style property
Any specific property changed by the element that conflicts with the
style takes precedence over the style setting

211. Style Example
<Page x:Class="Demo.StyleWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Style Demo" SizeToContent="WidthAndHeight">
<Window.Resources>
<Style x:Key="fancyButton">
<Setter Property="Button.Background" Value="Purple" />
<Setter Property="Button.FontSize" Value="20" />
<Setter Property="Button.FontWeight" Value="Bold" />
<Setter Property="Button.Foreground" Value="Yellow" />
<Setter Property="Button.Margin" Value="4" />
<Setter Property="Button.LayoutTransform">
<Setter.Value>
<RotateTransform Angle="15" />
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel Margin="4">
<Button Content="Click Me" Style="{StaticResource fancyButton}" />
<Button Content="Hello" Style="{StaticResource fancyButton}" />
<Button Content="Me Fancy" Style="{StaticResource fancyButton}" />
</StackPanel>
</Page>

212. Restricting Style Usage
A style may be restricted to work on certain types using the
TargetType property
And on any derived types
In this case, the full property qualification is unnecessary
<Style x:Key="fancyButton" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Purple" />
<Setter Property="FontSize" Value="20" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="Yellow" />
<Setter Property="Margin" Value="4" />
<Setter Property="LayoutTransform">
<Setter.Value>
<RotateTransform Angle="15" />
</Setter.Value>
</Setter>
</Style>

213. Implicit Styles
With the TargetType property the x:Key attribute may be omitted
The style will automatically apply to all elements of the specified
type
The exact type only (not a derived type)
Elements can still override properties or use a different style, or clear
the style by setting it to null

214. Commands and MVVM

215. Agenda
Introduction to the MVVM Pattern
Commands
UWP Command Support
Implementing Commands for MVVM
Simple MVVM Framework
Summary

216. The MVVM Pattern
Model – View – ViewModel
Based on similar principles of Model View Controller (MVC) and
Model View Presenter (MVP)
Natural pattern for XAML based applications
Data binding is key
Enables developer-designer workflow
Increases application testability
Model
View ViewModel
Commands,
Properties,
Behaviors
Methods,
Properties
Model
Model
Events

217. MVVM Participants
Model
Business logic and data
May implement change notification for properties and collections
View
Data display and user interactivity
Implemented as a Page, UserControl, DataTemplate or custom control
Has little or no code behind
ViewModel
UI logic and data for the View
Abstracts the Model for View usage
Exposes commands (ICommand) to be used by the View
Implements change notifications
Maintains state for the View (communicates via data binding)

218. The View
Provides the user interface and interaction
The DataContext property points to the View Model
Updated using property changes from the ViewModel
Binds to commands (on ICommandSource elements) provided by
the ViewModel

219. The ViewModel
Exposes properties the View binds to
Can be an adapter if some functionality missing from Model classes
Exposes commands to be invoked by the view
Maintains state for the View
Implements change notifications (INotifyPropertyChanged)
Uses ObservableCollection<T> that already implements
INotifyCollectionChanged

220. The Model
Responsible for business logic and data, e.g.
Data Transfer Objects (DTO)
POCOs (Plain Old CLR Objects)
Generated entity objects
Generated proxy objects
May provide change notifications
Provides validation if appropriate

221. Introduction to Commands
Handling routed events and executing some code is fine for simple
applications
Sometimes the same code needs to execute from unrelated events
(e.g. mouse click, keyboard shortcut, menu item, toolbar)
Maintaining UI state (e.g. enabled/disabled) becomes difficult
Higher level functionality, such as an undo / redo system is not
possible
Solution: use commands (the “Command” design pattern) with
some support from UWP

222. The Command
A command is an object implementing the
System.Windows.Input.ICommand interface
public interface ICommand {
event EventHandler CanExecuteChanged;
bool CanExecute(object parameter);
void Execute(object parameter);
}

223. Commands for MVVM
MVVM frameworks typically provide a basic ICommand
implementation that uses a delegate
Class typically called DelegateCommand or RelayCommand
Other implementations possible
E.g. the CompositeCommand class from PRISM that holds a list of
commands
Using commands in MVVM
Some controls expose a Command and CommandParameter properties that
can be bound to a command exposed by the ViewModel
ButtonBase, Hyperlink and MenuItem expose these
Technically part of the ICommandSource interface

224. Wiring the View and the View Model
The View’s DataContext must be set to its supporting ViewModel
Some options
The View can create an instance of the right VM (even in XAML)
The ViewModel can be injected using some dependency injection technique
(e.g. Unity or MEF)
Use some global ViewModel locator object
A Main VM can be set explicitly on the main View, and other VMs can be
exposed as properties, which will be bound by child views

225. Summary
Commands allow high level segregation of tasks
The MVVM pattern is common in WPF to separate logic from UI and
increase testability

226. Asynchronous Operations
UWP, like other UI technologies, is mostly single threaded
Synchronous operations are easy to use, but long operations may
freeze the UI (“Not responding”)
Unacceptable user experience
Asynchronous operations on the UI thread can be scheduled using
the Dispatcher object responsible for that UI thread
Accessible using Dispatcher.CurrentDispatcher static property if on
the UI thread
Or by calling DispatcherObject.Dispatcher instance property (which
is inherited by all UWP elements)

227. Using the Dispatcher
An operation can be scheduled using the Invoke or BeginInvoke
methods
Accept at least a delegate and an optional DispatcherPriority
.NET 4.5 adds InvokeAsync variants
DispatcherPriority enumeration
Indicates the priority to process the operation
Lower priorities can assume higher priority operations have already
completed
Default is DispatcherPriority.Normal

228. Updating the UI
When doing work on a background thread (either explicitly created
or using the thread pool or task), some result may need to update
UWP elements
Accessing the object directly will cause an exception
Need to marshal the required operation to the UI thread using the
Dispatcher
Call Invoke (for synchronous invocation) or BeginInvoke/InvokeAsync
(for asynchronous invocation)
Specify a priority for the update operation (usually
DispatcherPriority.Normal)

229. Async Patterns in .NET
Asynchronous Programming Model (APM)
Existed since .NET 1.0
Event Asynchronous Pattern (EAP)
Introduced in .NET 2.0
Task Asynchronous Pattern (TAP)
New to .NET 4.5 and C# 5.0

230. Asynchrony with C# 5.0
Synchronous
Asynchronous with C# 5.0
private void OnGetData(object sender, RoutedEventArgs e) {
_cmdGet.IsEnabled = false;
var wc = new WebClient();
_text.Text = wc.DownloadString(new Uri("http://msdn.microsoft.com"));
_cmdGet.IsEnabled = true;
}
private async void OnGetData(object sender, RoutedEventArgs e) {
_cmdGet.IsEnabled = false;
var wc = new WebClient();
_text.Text = await wc.DownloadStringTaskAsync("http://msdn.microsoft.com");
_cmdGet.IsEnabled = true;
}

231. Asynchronous methods
Marked with the async modifier
Must return void, Task or Task<T>
Avoid returning void
Does not allow callers to be notified of completion
Use await to cooperatively yield control
Are resumed when awaited operation completes
Can await anything that implements the “awaiter pattern”
Execute in the synchronization context of their caller
Depends on the implementing awaiter
Allow composition using regular programming constructs

232. Q
A
Q
A