The Universal

Windows Platform
Broaden your app’s reach with ease
Contents
01 Introduction 07 Inclusive design: accessibility,
globalization, and more
02 Getting started Accessibility testing
Setting up your machine Accessibility in the store
Choosing a language Globalization and localization
Optional tools, emulators, and downloads App settings
In-app help
03 Device families
08 Publishing Your App
Device family strategies
Desktop device family Create your app by reserving a new name
Xbox device family Create a submission
Mobile device family Certification
HoloLens device family Release
Confirmation

04 Cross-platform development
09 Monetization and marketing
Cross-platform development with Xamarin
Monetizing your app
05 User experience Marketing your app

Universal controls
- Adding controls 10 Optimization
- Styling controls
Layout panels
Common input handling Thank you
Adaptive scaling
Visual state triggers Appendix: Source code

06 Success by design:
creating the app users want to use
Figuring out what to build
Layout: Anatomy of a UWP App
Plan your UWP app
Styling your app
- Color
- Icons
- Motion
- Sound
- Typography

Introducing the new Visual Layer

2
 01 Introduction
Welcome to a Windows built for your success
Succeeding in the crowded world of app development
today means making the most of your creativity and
delivering great user experiences across a wide range
of devices. The Universal Windows Platform (UWP)
is designed to help you do all that and more, quickly
and efficiently.
This guide gives you an easy-to-digest overview of
UWP’s key features so you can get started quickly,
even if you have never developed for Windows before.
Windows is for more than just PCs
Today, the Windows ecosystem spans a wide range of
successful devices. It includes innovative 2-in-1s and
tablets such as Microsoft Surface, huge HD touchscreen
devices such as Surface Hub, the immersive mixed-
reality HoloLens device, Xbox, and Internet of Things
devices. With UWP, you can be everywhere users are
looking for the latest innovations.
How to use this guide
The UWP Guidebook takes you step-by-step through
the key features of UWP, from imagining and designing
an app all the way through packaging, marketing,
and monetization. Along the way, you’ll find tips and
resources to accelerate your success. You’ll also find
code examples from our Lunch Planner app, available
on GitHub.
Do I have to know Windows?
Nope. This guide is designed for any developer to
understand. You’ll find most of the concepts are
familiar, so you’ll get more information on those
features unique to UWP.
The best way to succeed with UWP is to dive in—so
let’s get started.
3
What is UWP?
The Universal Windows Platform was introduced with Windows 10. It’s an
evolution of the Windows Runtime (WinRT) model introduced in Windows 8.1,
bringing that model into the Windows 10 Core.

• UWP provides a common app platform available on • The UWP provides a guaranteed core API layer across
every device that runs Windows 10. devices so a single app package can be installed onto a
wide range of devices from the Windows Store.
• Apps that target the UWP can call WinRT APIs
common to all devices as well as APIs specific to the
device family the app is running on, including Win32
APIs found in classic desktop apps.

4
02 Getting started

This section covers the basics of getting started with UWP, including how to set
up your development environment and which language to choose.

Setting up your machine

Here are a few basic things you’ll need to do to set up
your environment for writing a UWP app.

If you have a PC:

1. Get Windows 10: To develop UWP apps, you need

the latest RTM version of Windows (that is, not the
Insider Preview or Preview SDK).

2. Download or update Visual Studio: Microsoft

Visual Studio 2015 helps you design, code, test, and
debug your apps. If you don’t already have Visual
Studio 2015, install the free Microsoft Visual Studio
Community 2015. It includes device and phone
simulators for testing your apps. Download Windows
10 developer tools.

3. (Optional) Enable your device for development:

Visual Studio provides a wide range of great
emulators for testing. If you want to test your apps on
an actual device, you must enable it for development. When you install Visual Studio, use the custom
Find instructions at the following link: Enable your option and make sure all Universal Windows
device for development App Development Tools options are selected, as
shown here.
4. Register as an app developer: You can start
developing apps now, but before you can submit
them to the store, you need a developer account. To
get a developer account, go to the Sign up page.
Resources
Get everything you need in one VM
• More on getting started with Visual Studio:
Start coding sooner with a virtual machine prepped for
https://msdn.microsoft.com/en-us/windows/uwp/
Windows 10 development. It has the latest versions of porting/getting-started-creating-a-project
Windows, the developer tools, SDKs, and samples ready
• Don’t want to use Visual Studio? Download the
to go. Get the Windows 10 development VM here.
standalone Windows SDK for Windows 10 installer.
Using a Mac? • Options for developing on a Mac:
With popular third-party solutions like Apple Boot https://msdn.microsoft.com/en-us/windows/uwp/
Camp, Oracle VirtualBox, VMware Fusion, and Parallels porting/setting-up-your-mac-with-windows-10
Desktop, you can install Windows 10 and Microsoft
Visual Studio on your Apple computer. Once you • Windows 10 development VM:
have Windows 10 running on your Mac, follow the https://developer.microsoft.com/en-us/windows/
instructions under “If you have a PC” above. downloads/virtual-machines

5
Choosing a language
You can choose from a wide range of common coding
languages to develop in UWP, including C++, C#,
Microsoft Visual Basic, or JavaScript. You even write
components in different languages and combine them.
How to choose
The language you choose dictates your UI options.
• For Visual C++, C#, and Visual Basic, you can use
XAML for a full-fidelity, native UI experience.
• Visual C++ adds the option to use DirectX for more
intensive graphics.
• For JavaScript, your presentation layer is HTML5.
Other considerations
• Intensive graphics and high-performance apps lend
themselves to Visual C++ and DirectX.
• JavaScript and HTML5 are great for universal web
apps.
Optional tools, emulators, and downloads
There are many great tools to help you create a
successful, innovative UWP app. Below are a few
highlights.
• Remote Tools for Visual Studio 2015: Run, debug,
and test an app that is running on one device
from another device that is running Visual Studio.
Download Remote Tools
• Microsoft Emulator for Windows 10 Mobile: Test your
universal app using a unique Windows 10 Mobile
emulator image. The emulator requires Visual Studio
2015 and is not backward compatible with earlier
versions. Download the emulator
• HoloLens Emulator and Templates: The Microsoft
HoloLens Emulator enables you to run UWP apps
targeting HoloLens on your PC. The Windows
Holographic app templates simplify the creation
UWP apps for HoloLens using DirectX. Using the
HoloLens emulator
• Multilingual App Toolkit: Tools to help you localize
your Store app with translation support, translation
file management, and editor tools. Get details and
additional languages
• Microsoft Store Services SDK: Use this SDK to add
features to your apps that help you make more
money and gain customers, such as displaying ads in
your apps and running experiments with A/B testing.
Get the Microsoft Store Services SDK
• UWP Community Toolkit
• Multilingual App Toolkit
• Package Analyzer
• Free Telerik Control
Resources:
• Windows developer downloads: https://developer.
microsoft.com/en-us/windows/downloads
6
03 Device families

Beautiful user experiences across multiple
form factors
UWP apps target device families, A device family
specifies the APIs, system characteristics, and
behaviors you can expect across a set of devices. It
also determines the set of devices on which your app
can be installed from the Store.
All child device families inherit the set of APIs in the
universal device family. If you write an app using
only universal device family APIs, it will run on every
Windows 10 device.
Each child device family adds its APIs to the ones it
inherits. The resulting union of APIs in a child device
family is guaranteed to be present in the OS based on
that device family, and on every device running that OS.
Changing the targeted device family
By default, Microsoft Visual Studio targets the universal
device family in the app package manifest file. By default,
your app will run on PC, Xbox, mobile, HoloLens, and
Windows IoT without any extra configuration. To restrict
the device family or device families that your app is
offered to from within the Store, manually configure
the TargetDeviceFamily element in your
Package.appxmanifest file.
<Dependencies>
<TargetDeviceFamily Name=”Windows.Universal”
MinVersion=”10.0.0.0”
MaxVersionTested=”10.0.0.0” />
</Dependencies>
Code example

• You can write your app for any, or even all, of a

variety of devices including phones, tablets, desktop
computers, Internet of Things (IoT) devices, Xbox
consoles, and HoloLens.
• Your app can also use adaptive code to dynamically
detect and use features of a device that are outside
of the universal device family.
• The device families you choose also determine what
types of devices can download your app from the
Windows Store.
• You can use adaptive code to detect the device
type and call APIs outside the device family you’re
targeting if you want to enable specific features.

Universal
device family

Desktop Mobile Xbox device IoT device IoT headless HoloLens

device family device family family family device family device family

7
Device family strategies
The decision about which device family (or families)
your app will target is yours to make. This decision
determines:
• The set of APIs that your app can assume to be
present when it runs (and can therefore call freely).
• The set of API calls that are safe only inside
conditional statements.
The set of devices on which your app can be installed
from the Store (and consequently the form factors that
you need to consider).
Options for targeting device families
• To reach the most devices, target the Universal
device family.
• Specialized apps can be limited to one device family.
For example, if you target the desktop device family,
the APIs guaranteed to be available to your app
include the APIs inherited from the universal device
family plus the APIs that are specific to the desktop
device family.
• Instead of targeting the universal device family, or
targeting one of the child device families, you can
instead target two (or more) child device families.
• Your app can be targeted to run everywhere except
on devices with a specific version of a specific
device family.
Desktop device family
Windows PCs and laptops include a wide array of
devices and screen sizes. With screens typically 13” or
larger, PCs and laptops can display more information
than phones or tablets.
• Apps can have a windowed view, the size of which
is determined by the user. Depending on window
size, there can be between one and three frames.
On larger monitors, the app can have more than
three frames.
• When using an app on a desktop or laptop, the user
has control over app files. As an app designer, be sure
to provide the mechanisms to manage your app’s
content. Consider including commands and features
such as “Save As”, “Recent files”, and so on.
• The system back button is optional. When if you
choose to show it, it appears in the app title bar.
Xbox device family
Tailoring and optimizing your app to work great
on Xbox One and TV screens requires special
considerations. The experience of sitting on your couch
across the room, using a gamepad or remote to interact
with your TV, is called the 10-foot experience. As
you bring your app to life in the 10-foot environment,
consider the following design principles.
• Simple: The amount of information displayed on a TV
should be comparable to what you’d see on a mobile
phone, rather than on a desktop.
• Coherent: Make the focus clear and unmistakable.
Arrange content so that movement across space is
consistent and predictable. Give people the shortest
path to what they want to do.
• Captivating: The most immersive, cinematic
experiences take place on the big screen. Edge-to-
edge scenery, elegant motion, and vibrant use of color
and typography take your apps to the next level.
• Understand gamepad and remote control input: The
quality of gamepad and remote behavior that you
get out-of-the-box depends on keyboard support in
your app. A good way to ensure that your app works
well with gamepad/remote is to make sure that it
works well with the keyboard on PC, and then test
with gamepad/remote to find weak spots in your UI.
Resources
• UWP on Xbox One: https://msdn.microsoft.com/en-
us/windows/uwp/xbox-apps/index
• Xbox best practices: https://msdn.microsoft.com/en-
us/windows/uwp/xbox-apps/tailoring-for-xbox
• Gamepad and remote control interactions: https://
msdn.microsoft.com/en-us/windows/uwp/input-
and-devices/gamepad-and-remote-interactions
• Interoperability with third-party game
engines: https://blogs.msdn.microsoft.com/
somasegar/2015/04/17/visual-studio-for-game-
development-new-partnerships-with-unity-unreal-
engine-and-cocos2d/
8
Mobile device family HoloLens device family
The most widely-used of all computing devices, phones
Cutting-edge mixed-reality experiences made easy
can do a lot with limited screen real estate and basic
with UWP
inputs. Phones are available in a variety of sizes. App
Microsoft HoloLens is the first self-contained,
experiences on larger phones enable some key changes
holographic computer, enabling you to engage with
in content consumption.
your digital content and interact with holograms in the
world around you. All apps built for Microsoft HoloLens
With Continuum for Phones, a new experience for
run on the Universal Windows Platform (UWP).
compatible Windows 10 mobile devices, users can
connect their phones to a monitor and even use a
For HoloLens, TV-like viewing distances are
mouse and keyboard to make their phones work like
recommended to produce the best readability and
a laptop. Primarily used in portrait orientation, mostly
interaction with gaze/gesture. HoloLens defaults to
due to the ease of holding the phone with one hand
a resolution of 1280x720,150%DPI (853x480 effective
and being able to fully interact with it that way, but
pixels), about the same information density as a tablet
there are some experiences that work well in landscape,
or small desktop. It also matches fixed DPI and effective
such as viewing photos and video, reading a book, and
pixels for UWP apps running on Xbox One.
composing text.
• The small size of a phone’s screen allows only one To ensure your app looks good on HoloLens, follow the
frame at a time to be viewed in both portrait and Windows 10 Human Interface Guidelines for effective
landscape orientations. All hierarchical navigation
pixels. Windows scaling will handle sizing pixels for
patterns on the phone use the “drill down” model,
usability across devices, resolutions, DPI, and so on.
with the user navigating through single-frame UI
layers.
• With larger phones, users can rotate to landscape
Resources
orientation and stay there, so a navigation frame and
menu can be visible at a time. • Holographic Academy: https://developer.microsoft.
com/en-us/windows/holographic/academy
• In both landscape and portrait orientations, be sure
that there’s enough screen real estate for the app bar • 2D vs. holographic views: https://developer.
when the on-screen keyboard is up. microsoft.com/en-us/windows/holographic/app_
views_on_hololens
• Windows 10 Human Interface Guidelines: https://dev.
Tablets windows.com/en-us/design
Tablets typically have touchscreens, cameras, • Responsive design best practices: https://msdn.
microphones, and accelerometers. Tablet screen sizes microsoft.com/en-us/library/windows/apps/
usually range from 7” to 13.3”. dn958435.aspx
• In both landscape and portrait orientations, tablets • HoloLens emulator: https://developer.microsoft.
allow two frames at a time. com/en-us/windows/holographic/using_the_
• The system back button is located on the hololens_emulator
navigation bar.

9
04 Cross-platform development

If you’re coming to UWP from Android or iOS, good news—there are tools and
approaches that make it relatively easy to port apps from those platforms to
UWP, and even to develop for multiple platforms at the same time.

Cross-platform development with Xamarin

Xamarin lets you build C# apps for Windows, Android, and iOS. Xamarin also provides the Xamarin.Forms technology,
which lets you share logic and user-interface code across platforms. It supports iOS, Android, and UWP, along with
some older Windows operating systems.
• Learn more about using Xamarin with UWP. https://developer.xamarin.com/guides/cross-platform/windows/
universal/

10
05 User experience

Make your app work as good as it looks Universal controls

A UWP app can run on many kinds of devices that have
different forms of input, screen resolutions, DPI density,
and other unique characteristics. Windows helps you
target your UI to multiple devices with the following
features:
• Universal controls and layout panels help you
optimize your UI for the screen resolution of the
device
• Common input handling allows an app to receive
input from a range of devices, such as touch, pen,
mouse, keyboards, and game controllers
• Tooling helps you to design UI that can adapt to
different screen resolutions
Universal controls are designed to work well on larger
screens, adapt themselves based on the number of
screen pixels available on the device, and integrate with
multiple types of input such as keyboard, mouse, touch,
pen, and controllers such as the Xbox controller.
In UWP app development, a control is a UI element that
displays content or enables interaction. You create the
UI for your app by using controls such as buttons, text
boxes, and combo boxes to display data and get user
input. A pattern is a recipe for modifying a control or
combining several controls to make something new. For
example, the Nav pane pattern is a way that you can
use a SplitView control for app navigation.

• Adaptive scaling adjusts to resolution and DPI

differences across devices

<SplitView IsPaneOpen=”True” DisplayMode=”Inline” OpenPaneLength=”250”>

<SplitView.Pane>
<TextBlock Text=”Pane” FontSize=”24” VerticalAlignment=”Center”
HorizontalAlignment=”Center”/>
</SplitView.Pane>
<Grid>
Pane Content
<TextBlock Text=”Content”
FontSize=”24”
VerticalAlignment=”Center”
HorizontalAlignment=”Center”/>
</Grid>
</SplitView>

Code example: Nav pane pattern

11
Adding controls
There are 3 key steps to adding controls to your app:
1. Add a control to your app UI
2. Set properties on the control
3. When relevant, add code to the control’s event handlers so that it does something.

1. Add a control
You can add a control to an app in several ways:
• Use a design tool’s toolbox like Blend for Visual Studio or the Microsoft Visual Studio Extensible Application Markup
Language (XAML) designer.
• Add the control to the XAML markup in the Visual Studio XAML editor.
• Add the control in code. Controls that you add in the code are visible when the app runs, but are not visible in the
Visual Studio XAML designer.

Lunch Reminders
<ToggleSwitch IsOn=”True” Header=”Lunch Reminders”/>
On

Code example: XAML Markup

2. Set control properties

You use properties to specify the appearance, content, and other attributes
of controls. When you add a control using a design tool, some properties that
control size, position, and content might be set for you by Visual Studio. You
can change some properties, such as Width, Height or Margin, by selecting
and manipulating the control in the Design view.

You can set the control properties in the Properties window, in XAML, or
in code. For example, to change the foreground color for a Button, you set
the control’s Foreground property. This illustration shows how to set the
Foreground property by using the color picker in the Properties window.

XAML Properties window

12
3. Add an event handler

Each control has events that enable you to respond to actions from your user or other changes in your app. For example,
a Button control has a Click event that is raised when a user clicks the Button. You can associate a control’s event with an
event handler method in the Properties window, in XAML, or in code.

<!-- OptionsPage.xaml -->

<Page.DataContext>
<viewModels:OptionsViewModel x:Name=”ViewModel”/>
</Page.DataContext>
<Button x:Name=”CheckStatusButton”
Content=”check background task status”
Click=”{x:Bind ViewModel.GetStatusButton_OnClick}” Margin=”10”/>

Code example: Options page

<!-- OptionsViewModel.cs -->

public void GetStatusButton_OnClick(object sender, RoutedEventArgs e)

{
object obj;
if (localSettings != null &&
localSettings.Values.TryGetValue(Constants.BackgroundTaskStatusSettingsKey, out obj)){
LastTaskStatusMessage = obj.ToString();
}
}

Code example: Options view model

13
Styling controls

XAML controls separate logic and appearance, so you can modify them individually to fit your needs. Use styles to
extract visual property settings into reusable resources. Here’s an example that shows 3 buttons with a style that sets the
BorderBrush, BorderThickness and Foreground properties. By applying a style, you can make the controls appear the
same without having to set these properties on each control separately.

Button Button Button

You can define a style inline in the XAML for a control, or as a reusable resource. Define resources in an individual page’s
XAML file, in the App.xaml file, or in a separate resource dictionary XAML file. A XAML resource dictionary can be
shared across apps, and more than one resource dictionary can be merged in a single app.

14
Apply an implicit or explicit style
If you define a style as a resource, there are two ways to apply it to your controls:
• Implicitly, by specifying only a TargetType for the Style.
• Explicitly, by specifying a TargetType and an x:Key attribute for the Style and then by setting the target control’s Style
property with a {StaticResource} markup extension reference that uses the explicit key.
• If a style contains the x:Key attribute, you can only apply it to a control by setting the Style property of the control to
the keyed style. In contrast, a style without an x:Key attribute is automatically applied to every control of its target
type, that doesn’t otherwise have an explicit style setting.

<Application x:Class=”UWPGuide.App”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
RequestedTheme=”Light”>

<Application.Resources>

<!--An Explicit Style-->

<Style x:Key=”MyExplicitStyle” TargetType=”TextBlock”>
<Setter Property=”Foreground” Value=”Green” />
</Style>

<!-- An Implicit Style-->

<Style TargetType=”ContentPresenter”>
<Setter Property=”HortizontalAlignment” Value=”Stretch” />
<Setter Property=”VerticalAlignment” Value=”Stretch” />
</Style>
</Application.Resources>
<Application>

Code example: In App.xaml’s Resources with an Explicit Style using an x:Key and an Implicit Style.

15
 <!--Any page in the app-->

<!-- This TextBlock uses the named explicit style -->

<TextBlock Style=”{StaticResource MyExplicitStyle}” />

<!-- This ContentPresenter will use the implicit style -->

<ContentPresenter />

Code example: Now in any XAML page, we can use the explicit Style by it’s key. For the implicit Style, we don’t need to do anything.

Resources:
• Nav Pane pattern example: https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/nav-pane
• Controls listing: https://msdn.microsoft.com/en-us/windows/uwp/controls-and-patterns/controls-by-function
• Events and routed events overview: https://msdn.microsoft.com/en-us/windows/uwp/xaml-platform/events-and-
routed-events-overview

16
Layout panels
You can use layout panels to arrange and group UI elements in your app. The built-in XAML layout panels include
RelativePanel, StackPanel, Grid, VariableSizedWrapGrid, and Canvas. Here, you’ll learn about each panel and show
how to use it to layout XAML UI elements.
• How the panel positions its child elements.
• How the panel sizes its child elements.
• How overlapping child elements layer on top of each other (z-order).
• The number and complexity of nested panel elements needed to create your desired layout.

For example, StackPanel orders its children sequentially (horizontally or vertically).

<!-- Horizontal -->

<StackPanel>
<Rectangle Fill=”Red” Height=”44”/>
<Rectangle Fill=”Blue” Height=”44”/>
<Rectangle Fill=”Green” Height=”44”/>
<Rectangle Fill=”Yellow” Height=”44”/>
</StackPanel>

Code example: A horizontal StackPanel

<!-- Vertical -->

<StackPanel Orientation=”Horizontal”>
<Rectangle Fill=”Red” Width=”44” Height=”44”/>
<Rectangle Fill=”Blue” Width=”44” Height=”44”/>
<Rectangle Fill=”Green” Width=”44” Height=”44”/>
<Rectangle Fill=”Yellow” Width=”44” Height=”44”/>
</StackPanel>

Code example: A vertical StackPanel

17
 <Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height=”44”/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”Auto”/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Fill=”Red” Width=”44”/>
<Rectangle Fill=”Blue” Grid.Row=”1”/>
<Rectangle Fill=”Green” Grid.Column=”1”/>
<Rectangle Fill=”Yellow” Grid.Row=”1” Grid.Column=”1”/>
</Grid>

Code example: A Grid places its children into cells.

<RelativePanel BorderBrush=”Gray” BorderThickness=”1” Background=”Black”>

<Rectangle x:Name=”RedRect” Fill=”Red” Height=”44” Width=”44”/>
<Rectangle x:Name=”BlueRect” Fill=”Blue” Height=”44” Width=”88”
RelativePanel.RightOf=”RedRect” />
<Rectangle x:Name=”GreenRect” Fill=”Green”
Height=”44”
RelativePanel.Below=”RedRect”
RelativePanel.AlignLeftWith=”RedRect”
RelativePanel.AlignRightWith=”BlueRect”/>
<Rectangle Fill=”Yellow”
RelativePanel.Below=”GreenRect”
RelativePanel.AlignLeftWith=”BlueRect”
RelativePanel.AlignRightWithPanel=”True”
RelativePanel.AlignBottomWithPanel=”True”/>
</RelativePanel>

Code example: The RelativePanel eases the process of rearranging elements by defining relationships between elements, which allows you to
build more dynamic UI without using nested layouts.

18
 <Canvas Width=”120” Height=”120”>
<Rectangle Fill=”Red” Height=”44” Width=”44”/>
<Rectangle Fill=”Blue” Height=”44” Width=”44” Canvas.Left=”20” Canvas.Top=”20”/>
<Rectangle Fill=”Green” Height=”44” Width=”44” Canvas.Left=”40” Canvas.Top=”40”/>
<Rectangle Fill=”Yellow” Height=”44” Width=”44” Canvas.Left=”60” Canvas.Top=”60”/>
</Canvas>

Code example: The Canvas panel positions its child elements using fixed coordinate points.

Resources
• Layout panels: https://msdn.microsoft.com/en-us/windows/uwp/layout/layout-panels
• Attached properties: https://msdn.microsoft.com/en-us/windows/uwp/xaml-platform/attached-properties-
overview

19
Common input handling
Common input handling allows your app to receive input through a variety of devices and interfaces. The way UWP
handles inputs is designed to help you give users distinctive experiences. For example, you can enable ink with
touch and pointer inputs as well as pen. Inking is supported on many devices (including mobile devices) and is easily
incorporated with a few lines of code.

Out-of-the-box vs. customized input

UWP apps automatically handle a wide variety of inputs across a variety of devices—there’s nothing extra you need
to do to enable touch input or make your app run on a phone, for example.

However, in many cases, you might want to optimize your app for certain types of input or devices.

Maximize inputs and accessibility

To accommodate the broadest range of users and devices, design your apps to work with as many input types as
possible (gesture, speech, touch, touchpad, mouse, and keyboard). Doing so maximizes flexibility, usability, and
accessibility.

Resources
• Interaction primer: https://msdn.microsoft.com/en-us/windows/uwp/input-and-devices/input-primer

20
Adaptive scaling
Windows 10 introduces an evolution of the existing scaling model. In addition to scaling vector content, there is a
unified set of scale factors that provides a consistent size for UI elements across a variety of screen sizes and display
resolutions. The scale factors are also compatible with the scale factors of other operating systems such as iOS and
Android, making it easier to share assets between these platforms. The Store picks the assets to download based in
part of the DPI of the device. Only the assets that best match the device are downloaded.

Thumbnail for a grid layout Thumbnail for a list layout Thumbnail for a single picture
ThumbnailMode.pictureView ThumbnailMode.listView ThumbnailMode.singleitem
200x137 200x200 256x170

Adaptive scaling example

Effective pixels and scaling

UWP apps automatically adjust the size of controls, fonts, and other UI elements so that they are legible on all devices.
When your app runs on a device, the system uses an algorithm to normalize the way UI elements display on the
screen. This scaling algorithm considers viewing distance and screen density (pixels per inch) to optimize for perceived
size (rather than physical size).

When you design your UWP app, you’re designing in effective pixels, not actual physical pixels. That means:
• You can ignore the pixel density and the actual screen resolution when designing. Instead, design for the effective
resolution (the resolution of effective pixels) for a size class.
• When the system scales your UI, it does so by multiples of 4. To ensure a crisp appearance, snap your designs to the
4x4 pixel grid: make margins, sizes and positions of UI elements, and the position (but not the size—text can be any
size) of text a multiple of 4 effective pixels.

Resources
• Effective pixels: https://msdn.microsoft.com/en-us/windows/uwp/layout/design-and-ui-intro#effective-pixels-
and-scaling

21
Visual state triggers
Your UI may need to adapt to changes in window size. Adaptive visual states allow you to change the visual state in
response to changes in the size of the window. StateTriggers define a threshold at which a visual state activates, which
then sets layout properties as appropriate for the window size that triggered the state change.

<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name=”wideState”>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth=”641” />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target=”HeaderGrid.Visibility”
Value=”Collapsed” />
</VisualState.Setters>
</VisualState>
<VisualState x:Name=”narrowState”>
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth=”0” />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target=”HeaderGrid.Visibility”
Value=”Visible” />
Code example:</VisualState.Setters>
Visual state triggers
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Code example: Visual state triggers

Maximize inputs and accessibility

To accommodate the broadest range of users and devices, design your apps to work with as many input types as
possible (gesture, speech, touch, touchpad, mouse, and keyboard). Doing so maximizes flexibility, usability, and
accessibility.

Resources
• Visual state triggers:
https://msdn.microsoft.com/library/windows/apps/windows.ui.xaml.visualstate.statetriggers.aspx

22
06 Success by design: creating the app users want to use

The power of design-led development
The right design can set your app apart from the rest
by giving users powerful, memorable interactions
they return to again and again. This section covers
inspiration, planning, sketching, layout, style, and some
tips for working with the visual layer in UWP.
To kick things off, look at the Microsoft Design
Language principles. These aren’t meant to tell you how
to design—just as inspiration for thinking about your
own set of design principles and how to create apps that
stand out.
• Keep it simple: We start with simplicity as the
ultimate unifier. When design is intuitive, we just
know. We can feel it. The result is an experience that’s
honest and timeless.
• Make it personal: Next, we challenge ourselves to
create an emotional connection with the user. We
design for the ways people live and think and act.
The result is an experience that feels like it is created
for an individual’s specific needs.
• Think universal: We design to embrace the things
that make us human. It’s more far more than an
attitude for making stuff – and into creating a world
that makes lives better. The result is technology that’s
inclusive.
• Create delight: Our final principle is about energy
within a structure. It’s how you know the experience
is made by a real person. The result is an experience
that surprises and has a sense of place.
Using a service such as AppAnnie, you can analyze the
breakdown by category across various app stores. To
better interpret the data, look at the number of apps as
well as the number of ratings and reviews. You may find
that some categories are disproportionately represented
in the top app charts relative to their overall app count,
indicating potential opportunities.
Looking at the market data, you may notice a category
where there is relatively little competition. You may have
also found a few missing apps or app types that seem
to be currently popular on other platforms. Use this
information to augment and better prioritize your ideas
list. Once you have this, you can start looking at the
competition in that space.
Take your top ideas and brainstorm a few keywords. For
example, if you wanted to make a Solitaire game, you
might have keywords such as: Solitaire, Spider Solitaire,
Cards, Casino, etc. Take these keywords and look at the
Top Charts. Do you already see one or more extremely
popular apps of this type? Is there something that these
apps are missing? What do users mostly criticize about
the app? This information can point to opportunities
that result in a much more competitive app.

Figuring out what to build

Whether you’re building for money, fame, passion, or
charity, it pays to spend some time considering what the
current market landscape looks like for the idea. Who
are your competitors? How popular are they? What’s
their value-add? Conducting a market analysis before
you build an app can greatly increase the discoverability
of your app and, lead to an increased number of
downloads and users. There are many resources
available to help in analyzing the current landscape of
the market. Choosing a category with less competition
or adding features a competitor may not have helps
make your app stand out more.

23
Layout: Anatomy of a UWP App
A modern user interface is a complex thing. To make things simpler, let’s define the anatomy of an app from a design
perspective. Let’s say that an app is made up of screens and pages. Each page has a user interface, made up of three
types of UI elements: navigation, commanding, and content elements.

Navigation elements
Navigation elements help users choose the content
they want to display. Examples of navigation elements
include tabs and pivots, hyperlinks, and nav panes.

Command elements
Command elements initiate actions, such as
manipulating, saving, or sharing content. Examples of
command elements include button and the command
bar. Command elements can also include keyboard
shortcuts that aren’t visible on the screen.

Content elements
Content elements display the app’s content. For a
painting app, the content might be a drawing; for a
news app, the content might be a news article.

At a minimum, an app has a splash screen and a home page that defines the user interface. A typical app has multiple
pages and screens. Navigation, command, and content elements might change from page to page.

• To make the most effective use of space and reduce the need to navigate: If you design an app to look good on
a device that has a small screen, such as a phone, the is usable on a PC with a much bigger display, but there may be
some wasted space. You can customize the app to display more content when the screen is above a certain size.
• To take advantage of devices’ capabilities: Your app can detect which capabilities are available and enable
features that use them.
• To optimize for input: The universal control library works with all input types (touch, pen, keyboard, mouse), but
you can still optimize for certain input types by re-arranging your UI elements.

24
Responsive design techniques
When you optimize your app’s UI for specific screen widths, we say that you’re creating a responsive design. Here are
six responsive design techniques you can use to customize your app’s UI.

Reposition
You can alter the location and position of app UI
elements to get the most out of each device

Resize
You can optimize the frame size by adjusting
the margins and size of UI elements.

Reflow
By changing the flow of UI elements based on device
and orientation, your app can offer an optimal display
of content.

Reveal
You can reveal UI based on screen real estate, or when
the device supports additional functionality, specific
situations, or preferred screen orientations.

25
 Replace
This technique lets you switch the user interface for a
specific device size-class or orientation.

Re-architect
You can collapse or fork the architecture of your app to
better target specific devices.

Resources
• Navigation elements: https://msdn.microsoft.com/windows/uwp/layout/navigation-basics
• Command elements: https://msdn.microsoft.com/windows/uwp/layout/commanding-basics
• Content elements: https://msdn.microsoft.com/windows/uwp/layout/content-basics
• Responsive Design on UWP: http://codingforlife.azurewebsites.net/2016/04/27/responsive-design-on-uwp
• UI Design: https://msdn.microsoft.com/en-us/magazine/mt590973.aspx
• Scaling: https://blogs.windows.com/buildingapps/2016/06/27/scaling-your-phone-app-design-to-all-uwp-
device-families

26
Plan your UWP app
On Microsoft design teams, our process for creating apps consists of five distinct stages: concept, structure, dynamics,
visual, and prototype. We encourage you to adopt a similar process and have fun making new experiences for the world
to enjoy.

Concept
When planning your Universal Windows Platform
(UWP) app, you should determine not only what your
app will do and who it’s for, but also what your app will
be great at. At the core of every great app is a strong
concept that provides a solid foundation.
• Start with a broad concept and list all the things that
you want to help users do with your app.
• Take a step back and look at your list of ideas to see if
a scenario really jumps out at you.
• Challenge yourself to trim the list to just a single
scenario that you want to focus on.
• After you choose a single scenario, decide how you
would explain to an average person what your app is
great at by writing it down in one sentence.
Structure
When you’re happy with your concept, you’re ready
for the next stage—creating your app’s blueprint.
Information architecture (IA) gives your content the
structural integrity it needs. It helps define your app’s
navigational model and, ultimately, your app’s identity.
By planning how your content will be organized—and
how your users will discover that content—you can get
a better idea of how users will experience your app
Visual
Once you’ve established the dynamics of your app,
you can make your app shine with the right visual
polish. Great visuals define not only how your app looks,
but how it feels and comes alive through animation and
motion. Your choice of color palette, icon, and artwork
are just a few examples of this visual language. All apps
have their own unique identity, so explore the visual
directions you can take with your app. Let the content
guide the look and feel; don’t let the look dictate your
content.
Prototype
A prototype might be a flow of hand-drawn screens
shown to a user. The person running the test might
respond to cues from the user by placing different
screens down, or sticking or unsticking smaller pieces
of UI on the pages, to simulate a running app. Or, a
prototype might be a very simple app that simulates
some workflows, provided the operator sticks to a script
and pushes the right buttons.

Dynamics
If the concept stage is about defining your app’s
purpose, the dynamics stage is all about executing that
purpose. This can be accomplished in many ways, such
as using wireframes to sketch out your page flows (how
you get from one place to the next within the app to
achieve their goals), and thinking about the voice and
the words used throughout your app’s UI. Wireframes
are a quick, low-fidelity tool to help you make critical
decisions about your app’s user flow. Common
techniques to help with this step include:
• Outline the flow: What comes first, what comes next?
• Storyboard the flow: How should users move
through your UI to complete the flow?
• Prototype: Try out the flow with a quick prototype.

27
Styling your app
Style gives your app a unique look and personality. Key places to style your app include color, icons, motion, sound,
and typography.

Color Icons

Color provides intuitive wayfinding through an Good icons harmonize with typography and with the
app’s various levels of information and serves as a rest of the design language. They don’t mix metaphors,
crucial tool for reinforcing the interaction model. In and they communicate only what’s needed, as speedily
Windows, color is also personal. Users can choose and simply as possible.
a color and a light or dark theme to be reflected
throughout their experience. Common shapes
Icons should generally maximize their given space with
When users choose an accent color, it appears as part little padding. These shapes provide starting points for
of their system theme. The areas affected are Start, sizing basic shapes.
Taskbar, window chrome, selected interaction states
and hyperlinks within common controls. Each app
can further incorporate the accent color through
their typography, backgrounds, and interactions—or
override it to preserve their specific branding.

<Color x:Key=”SystemAccentColor”>#FFCB2128</Color>

Code example

The user may also choose between a light or dark theme

for the system. Some apps choose to change their
theme based on the user’s preference, while others opt Common shapes

out. You can change themes easily by changing the

RequestedTheme property in your App.xaml.
<Application x:Class=”UWPGuide.App”
xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”
xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”
RequestedTheme=”Light” >
Use the shape that corresponds to the icon’s orientation
and compose around these basic parameters. Icons
don’t necessarily need to fill or fit completely inside
the shape and may be adjusted as needed to ensure
optimal balance.

</Application>

Code example

Removing the RequestedTheme means that your

application will honor the user’s app mode settings,
and they will be able to choose to view your app in
either the dark or light theme.

28
Angles
In addition to using the same grid and line weight,
icons are constructed with common elements.
Using only these angles in building shapes creates
consistency across all our icons, and ensures the icons
render correctly. These lines can be combined, joined,
rotated, and reflected in creating icons.
Angle examples
Curves
Curved lines are constructed from sections of a whole
circle and should not be skewed unless needed to snap
to the pixel grid.
Curve examples
Geometric construction
We recommend using only pure geometric shapes when
constructing icons. Status badges utilize a filled, colored
object that is on top of the icon, whereas action badges
are integrated into the icon in the same monochrome
style and line weight.
Motion
Make sure animation serves a purpose in your app.
The best Universal Windows Platform (UWP) apps use
animation to bring the UI to life. Animation should:
• Give feedback based on the user’s behavior.
• Teach the user how to interact with the UI.
• Indicate how to navigate to previous or succeeding
views.
Animation types available in UWP include:
• Add and delete: Insert or remove single or multiple
items from a collection
• Drag and drop: Enable users to move objects, such as
moving an item within a list.
• Edge: Show or hide UI that originates from the edge
of the screen.
• Fade: Bring items into a view or to take items out of a
view. The two common fade animations are fade-in
and fade-out.
• Pointer: Provide users with visual feedback when the
user taps on an item.
• Pop-up animations: Show and hide pop-up UI for
flyouts or custom pop-up UI elements.
• Reposition: Move elements into a new position.
29
Here’s an example of coding motion into a UWP app.

<Grid>
<Grid.Resources>
<!-- Sets up a RepositionThemeAnimation using the FromHorizontalOffset property
to start the animation from the old location. -->
<Storyboard x:Name=”PointerReleasedStoryboard”>
<RepositionThemeAnimation Storyboard.TargetName=”myRectangle” FromHorizontalOffset=”-400”/>
</Storyboard>
</Grid.Resources>

<Rectangle x:Name=”myRectangle” HorizontalAlignment=”Left” Width=”200” Height=”200” Fill=”Blue”

PointerReleased=”Rectangle_PointerReleased”
/>
</Grid>

Code example

Sound

There are many ways to use sound to enhance your
app. You can use the sound to supplement other UI
elements, enabling users to recognize events audibly.
Sound can be an effective user interface element for
people with visual disabilities. You can use sound to
create an atmosphere that immerses the user. UWP
provides the ElementSoundPlayer, an integrated sound
system within XAML, and when turned on all default
controls will play sounds automatically.
ElementSoundPlayer.State = ElementSoundPlayerState.On;
The ElementSoundPlayer has three different states: On,
Off, and Auto.
• Invoking an Element: The most common control-
triggered sound in our system today is the Invoke
sound. This sound plays when a user invokes a
control through a tap/click/enter/space or press of
the ‘A’ button on a gamepad.
• Showing & Hiding Content: There are many flyouts,
dialogs and dismissible UIs in XAML, and any action
that triggers one of these overlays should call a Show
or Hide sound.
• Navigation Within a Page: When navigating between
panels or views within an app’s page, typically, you
can move to the next view/panel or the previous one,
without leaving the current app page you’re on. The
audio experience around this navigation concept is
encompassed by the MovePrevious and MoveNext
sounds.

If set to Off, no matter where your app is run, sound will • Back Navigation: When navigating from the current
never play. If set to On sounds for your app will play on page to the previous page within an app the GoBack
every platform. sound should be called.
• Focusing on an Element: Set up a control to play the
Focus sound when your control receives focus.
Sound and the user experience
Each sound relates to a certain basic user interaction,
Here’s an example of invoking sound in a UWP app:
and although sounds can be customized to play on any
interaction, this section serves to illustrate the scenarios
where sounds should be used to maintain a consistent ElementSoundPlayer.Play(ElementSoundKind.Invoke);
experience across all UWP apps.

30
Typography
While you can style your typography however you like, at Microsoft, we use Segoe UI for all digital designs. Segoe UI
provides a wide range of characters and is designed to maintain optimal legibility across sizes and pixel densities. It
offers a clean, light, and open aesthetic that complements the content of the system. We use a minimum of weights and
sizes, and a clear hierarchy.

Line spacing should be calculated at 125% of the font size, rounding to the closest multiple of four when necessary. Try
to round up to stay on the 4px grid. This ensures a good reading experience and adequate space for diacritical marks.

Generally, visual elements and columns of type should be left-aligned. In most instances, this flush-left and ragged-
right approach provides consistent anchoring of the content and a uniform layout.

If a line is too short, the eye must travel left and right too often, breaking the reader’s rhythm. If possible, 50–60 letters
per line is best for ease of reading.

Resources on styling your app

• Color: https://msdn.microsoft.com/windows/uwp/style/color
• Icons: https://msdn.microsoft.com/windows/uwp/style/icons
• Motion: https://msdn.microsoft.com/windows/uwp/style/motion
• Sound: https://msdn.microsoft.com/windows/uwp/style/sound
• Typography: https://msdn.microsoft.com/windows/uwp/style/typography

31
Introducing the new Visual Layer
In Windows 10, significant work was done to create a new unified compositor and rendering engine for all Windows
applications. The Windows.UI.Composition namespace offers access to new lightweight Composition objects along with
new Compositor driven Animations and Effects.

Windows.UI.Composition is a declarative, Retained-Mode API that can be called from any Universal Windows Platform
(UWP) Application to create composition objects, animations and effects directly in an application. The API is a powerful
supplement to existing frameworks such as XAML to give developers
of UWP applications a familiar C# surface to add to their application. These APIs can also be used to create DX style
framework-less applications.

Here’s an example:

//Add ‘using Windows.UI.Composition;’

var compositor = new Compositor ();
var root = compositor.CreateContainerVisual();

// Create a visual element

var element = compositor.CreateSpriteVisual();
element.Size = new Vector2(100.0f, 100.0f);

// Create an outer white rectangle

var visual = compositor.CreateSpriteVisual();
element.Children.InsertAtTop(visual);
visual.Brush = compositor.CreateColorBrush(Colors.White);
visual.Size = new Vector2(100.0f, 100.0f);

// Create an inner red rectangle

var child = compositor.CreateSpriteVisual();
visual.Children.InsertAtTop(child);
child.Offset = new Vector3(3.0f, 3.0f, 0.0f);
child.Size = new Vector2(94.0f, 94.0f);
child.Brush = compositor.CreateColorBrush(Colors.Red);
element.opacity = 0.8f;

//Add the entire element to the root visual

root.Children.InsertAtTop(element);

Code example

Resource:
• In-depth information on the Visual Layer: https://msdn.microsoft.com/en-us/windows/uwp/graphics/visual-layer

32
07 Inclusive design: accessibility, globalization, and more
Making your app work for everyone
There are many possible ways to develop for individuals
with disabilities or impairments, including limitations
in mobility, vision, color perception, hearing, speech,
cognition, and literacy. You can address most
requirements by following the guidelines offered here.
This means providing:
• Support for keyboard interactions and screen
readers.
• Support for user customization, such as font, zoom
setting (magnification), color, and high-contrast
settings.
• Alternatives or supplements for parts of your UI.
Controls for XAML provide built-in keyboard support
and support for assistive technologies such as
screen readers, which take advantage of accessibility
frameworks that already support UWP apps, HTML, and
other UI technologies. This built-in support enables a
basic level of accessibility that you can customize with
very little work, by setting just a handful of properties.
In addition, data binding, style, and template features
make it easy to implement support for dynamic changes
to display settings and text for alternative UIs.
UI Automation
Accessibility support comes primarily from the
integrated support for the Microsoft UI Automation
framework. That support is provided through
base classes and the built-in behavior of the class
implementation for control types, and an interface
representation of the UI Automation provider API
and structure of a UI to screen readers and other
assistive technologies.
Apps that have good keyboard and screen reader
support usually work well with various assistive
technology products. In many cases, a UWP app works
with these products without additional modification
of information or structure. However, you may want
to modify some settings for optimal accessibility
experience or to implement additional support.
Screen reader support and basic accessibility
information
Screen readers provide access to the text in an app
by rendering it in some other format, such as spoken
language or Braille output. The exact behavior of a
screen reader depends on the software and on the
user’s configuration of it.
The most important information that a screen reader
or any other assistive technology needs to help users
understand or navigate an app is an accessible name
for the element parts of the app. In many cases, a
control or element already has an accessible name that
is calculated from other property values that you have
otherwise provided. The most common case in which
you can use an already-calculated name is with an
element that supports and displays inner text. For other
elements, you sometimes need to account for other
ways to provide an accessible name by following best
practices for element structure.

Assistive technology

This includes functionality such as screen readers,

screen magnification, and high-contrast settings.
Assistive technology products include a wide variety of
software and hardware. These products work through
the standard keyboard interface and accessibility
frameworks that report information about the content

33
Keyboard support
To provide good keyboard support, you must ensure
that every part of your application can be used with
a keyboard. If your app uses mostly the standard
controls and doesn’t use any custom controls, you are
most of the way there already. The basic XAML control
model provides built-in keyboard support including
tab navigation, text input, and control-specific support.
The elements that serve as layout containers (such as
panels) use the layout order to establish a default tab
order. That order is often the correct tab order to use
for an accessible representation of the UI.
If you use ListBox and GridView controls to display
data, they provide built-in arrow-key navigation.
Or if you use a Button control, it already handles
the Spacebar or Enter keys for button activation.
Media and captioning
You typically display audiovisual media through a
MediaElement object. You can use MediaElement
APIs to control the media playback. For accessibility
purposes, provide controls that enable users to play,
pause, and stop the media as needed. Sometimes,
media includes additional components that are
intended for accessibility, such as captioning or
alternative audio tracks that include narrative
descriptions.
Accessible text
You Three main aspects of text are relevant to
accessibility:
• Tools must determine whether the text is to be read
as part of a tab-sequence traversal or only as part
of an overall document representation. You can
help control this determination by choosing the
appropriate element for displaying the text or by
adjusting properties of those text elements.
• Accessibility recommendations that were originally
made for web content define standards for contrast
that can help sight-limited users interact with your
application. Following web standards for contrast
can help mitigate this issue. For apps that display
large quantities of text, ensure that the app correctly
interacts with the system features that can scale up
the display, so that any text in apps scales up along
with it.
Supporting high-contrast
UI controls use a visual representation that is defined
as part of a XAML resource dictionary of themes. One
or more of these themes is specifically used when the
system is set for high contrast. When the user switches
to high contrast, by looking up the appropriate theme
from a resource dictionary dynamically, all your UI
controls will use an appropriate high-contrast theme
too. Just make sure that you haven’t disabled the
themes by specifying an explicit style or using another
styling technique that prevents the high-contrast
themes from loading and overriding your style changes.
Design for alternative UI
When you design your apps, consider how they may
be used by people with limited mobility, vision, and
hearing. Because assistive technology products make
extensive use of standard UI, it is particularly important
to provide good keyboard and screen-reader support
even if you make no other adjustments for accessibility.
In many cases, you can convey essential information
by using multiple techniques to widen your audience.
For example, you can highlight information using both
icon and color information to help users who are color
blind, and you can display visual alerts along with sound
effects to help users who are hearing impaired.
If necessary, you can provide alternative, accessible
user interface elements that completely remove
nonessential elements and animations, and provide
other simplifications to streamline the user experience.
Resources
• UI Automation Overview: https://msdn.microsoft.
com/library/windows/desktop/ee684076
• Keyboard accessibility: https://msdn.microsoft.com/
windows/uwp/accessibility/keyboard-accessibility
• Accessible text requirements: https://msdn.microsoft.
com/windows/uwp/accessibility/accessible-text-
requirements
• High-contrast themes: https://msdn.microsoft.com/
windows/uwp/accessibility/high-contrast-themes
34
Accessibility in the store
While submitting your app to the Windows Store for
certification, you can declare your app as accessible.
Declaring your app as accessible makes it easier to
discover for users who are interested in accessible
apps, such as users who have visual impairments. Users
discover accessible apps by using the Accessible filter
while searching the Windows Store. Declaring your app
as accessible also adds the Accessible tag to your app’s
description.
By declaring your app as accessible, you state that it has
the basic accessibility information that users need for
primary scenarios using one or more of the following:
• The keyboard
• A high contrast theme
• A variable DPI setting
• Common assistive technology such as the Windows
accessibility features, including Narrator, Magnifier,
and On-Screen Keyboard.
Resources:
• Accessibility in the Store: https://msdn.microsoft.
com/windows/uwp/accessibility/accessibility-in-the-
store
Globalization and localization
Windows is used worldwide, by audiences that vary in
culture, region, and language. A user may speak any
language, or even multiple languages. A user may be
located anywhere in the world, and may speak any
language in any location. You can increase the potential
market for your app by designing it to be readily
adaptable using globalization and localization.
Globalization is the process of designing and
developing your app to act appropriately for different
global markets without any changes or customization.
For example, you can:
• Design the layout of your app to accommodate
the different text lengths and font sizes of other
languages in labels and text strings.
• Retrieve text and culture-dependent images from
resources that can be adapted to different local
markets, instead of hard-coding them into your app’s
code or markup.
• Use globalization APIs to display data that are
formatted differently in different regions, such as
numeric values, dates, times, and currencies.
• Localization is the process of adapting your app
to meet the language, cultural, and political
requirements of a specific local market.
Localization is the process of adapting your app to
meet the language, cultural, and political requirements
of a specific local market.
For example:
• Translate the text and labels of the app for the
new market, and create separate resources for its
language.
• Modify any culture-dependent images as necessary,
and place in separate resources.
Resources:
• More on localization and globalization: https://msdn.
microsoft.com/en-us/windows/uwp/globalizing/
globalizing-portal
• Multi-lingual toolkit: https://developer.microsoft.
com/en-us/windows/develop/multilingual-app-
toolkit
35
App settings
App settings are the user-customizable portions of your
app and live within an app settings page. For example,
app settings in a news reader app might let the user
specify which news sources to display or how many
columns to display on the screen. Here are examples of
app options that belong on an app settings page:
• Configuration options that affect the behavior of the
app and don’t require frequent readjustment.
• Options that depend on the user’s preferences, such
as music, sound effects, or color themes.
• App information that isn’t accessed very often, such
as privacy policy, help, app version, or copyright info.
Commands that are part of the typical app workflow
(for example, changing the brush size in an art app)
shouldn’t be on a settings page.
In-app help
There are three primary categories of help content,
each with varying strengths and suitable for different
purposes. You can use any combination of them in your
app, depending on your needs.
• Instructional UI: Educate users with directions on how
to perform specific tasks.In-app help: Display help
within the application at the user’s request. There are
several ways in which this can be implemented, such
as help pages or informative descriptions.
• External help: Provide external links to detailed
tutorials, advanced functions, or libraries.

General recommendations
• Keep settings pages simple and make use of binary
(on/off) controls. A toggle switch is usually the best
control for a binary setting.
• For settings that let users choose one item from a set
of up to 5 mutually exclusive, related options, use
radio buttons.
• Create an entry point for all app settings on your app
setting’s page.
• When a user changes a setting, the app should
immediately reflect the change.
• Don’t include commands that are part of the
common app workflow.

Resources:
• More on app settings: https://msdn.microsoft.com/
en-us/windows/uwp/app-settings/app-settings-and-
data

36
08 Publishing your app
Making it real
This section provides a step-by-step guide to
submitting your app in the Windows Store.
The submission process has 5 steps:
1. Create your app by reserving a name
2. Create a submission
3. Certification
4. Release
5. Confirmation
Create your app by reserving a new name
Reserving a name is the first step in creating an app
in the dashboard. You can do this even if you haven’t
started to build your app yet. You should do it as soon
as possible, so that nobody else can use the name.
1. From the Dashboard overview or All apps page, click
Create a new app.
2. In the text box, enter the name that you want to
use, and then click the Check availability link. If the
name is available, you’ll see a green check mark. (If
the name you entered is already reserved or in use
by another developer, you’ll see a message that the
name is not available.)
3. Click Reserve app name.
Create a submission
Once you’ve created your app by reserving a name, you
can start working on getting it published. The first step
is to create a submission. You can start your submission
when your app is complete and ready to publish, or you
can start entering info even before you have written
a single line of code. The submission will be saved in
your dashboard, so you can work on it whenever you’re
ready.
• Pricing and availability lets you determine how
much your app will cost, whether you’ll offer a free
trial, and how, when, and where it will be available to
customers.
• App properties lets you define your app’s category
and indicate hardware preferences or other
declarations.
• Age ratings lets you provide information about
your app so it can receive the appropriate age and
content ratings administered by the International
Age Ratings Coalition (IARC) rating system. These
ratings are about the suitability of the content in
the app
• App packages is where you upload all the package
files (.appx, .appxupload, .appxbundle, or .xap) for
the app that you’re submitting. You can upload
packages for any operating system that your app
targets in this step. When a customer downloads
your app, the Store will automatically provide
each customer with the package that works best
for their device. To upload packages, drag them
into the upload field or click to browse your files.
For Windows 10, you should always upload the
.appxupload file here, not the .appx or .appxbundle.
• Device family availability. After your packages
have been successfully uploaded, the Device
family availability section will display a table that
indicates which packages will be offered to specific
Windows 10 device families (and earlier OS versions,
if applicable), in ranked order. This section also lets
you choose whether to offer the submission to
customers on specific Windows 10 device families.
You’ll also see a checkbox where you can indicate
whether you want to allow Microsoft to make the
app available to future Windows 10 device families.
Keep this box checked so that your app can be
available to more potential customers as new device
families are introduced.
• Store listings: In this section, you indicate the
category and subcategory which the Store
should use to categorize your app, any product
declarations, and system requirements.
37
Certification
As you submit your app, you have the option to use the
Notes for certification page to provide additional info
to the certification testers. This info can help ensure that
your app is tested correctly.
Your app’s packages are digitally signed to protect them
against tampering after they have been released. Once
this phase has begun, you can no longer cancel your
submission or change its release date.

After you successfully upload the app’s packages and
submit the app for certification, the packages are
queued for testing. You’ll see a message if any errors
are detected during preprocessing. During this phase,
several tests are conducted:
• Security tests: This first test checks your app’s
packages for viruses and malware. If your app fails
this test, you’ll need to check your development
system by running the latest antivirus software, then
rebuild your app’s package on a clean system.
• Technical compliance tests: Technical compliance
is tested by the Windows App Certification Kit. This
test can be performed from Visual Studio before
uploading, which will help prevent certification
failures.
• Content compliance: The amount of time this takes
varies depending on how complex your app is, how
much visual content it has, and how many apps have
been submitted recently.
While your app is in the publishing phase, the Show
details link in the Status column for your app’s
submission will let you know when your new packages
and Store listing details become available to customers
on each of your supported OS versions. Your app will
remain in the publishing phase until the new packages
and listing details are available to all your app’s potential
customers, which can take up to 16 hours
Confirmation
After successfully going through the steps above, the
submission’s status will change from Publishing to In
the Store. Your submission will then be available in the
Windows Store for customers to download unless you
have chosen another distribution option.
Resources:
• Complete app publishing guide: https://msdn.
microsoft.com/en-us/windows/uwp/publish/index

After the certification process is complete, you’ll get a

certification report telling you whether your app passed
certification. If it didn’t pass, the report will indicate
which test failed or which policy was not met. After you
fix the problem, you can create a new submission for
your app to start the certification process again.

Release
When your app passes certification, it’s ready to move
to the to the Publishing process. If you’ve indicated
that your submission should be published as soon as
possible, this will happen right away. If you’ve specified
that it should not be released until a certain date, it’s
published on that date unless you click the link to
Change release date. If you’ve indicated that you want
to publish the submission manually, then it won’t be
published until you click the button to Publish now, or
if you click the link to Change release date and pick a
specific date.

38
09 Monetization and marketing
If you’re like most developers, you’re interested in making money with your
apps and ensuring they reach as many users as possible. The Windows Store
provides a wide range of options for monetizing and marketing your apps.

<!-- AdControl.xaml -->

<StackPanel Background=”{ThemeResource ApplicationPageBackgroundThemeBrush}” Margin=”12,10,12,12”>

<TextBlock Text=”Description:” Style=”{StaticResource SampleHeaderTextStyle}”/>
<TextBlock Style=”{StaticResource ScenarioDescriptionTextStyle}” TextWrapping=”Wrap”>
Create an ad control in markup
</TextBlock>
<!--
Set the application id and ad unit id via markup.
The application id and ad unit id can be obtained from Dev Center.
See “Monetize with Ads” at https://msdn.microsoft.com/en-us/library/windows/apps/mt170658.aspx
OnAdRefreshed increments the ad count so that the message changes at every refresh
OnErrorOccured is an error handler for the interstitial ad.
-->
<ads:AdControl
ApplicationId=”d25517cb-12d4-4699-8bdc-52040c712cab” AdUnitId=”10043058”
Width=”300” Height=”250”
AdRefreshed=”OnAdRefreshed”
ErrorOccurred=”OnErrorOccurred”/>
</StackPanel>

Code example: Ad control

Use SDKs from other ad networks in your UWP
apps: Increase your revenue by displaying video ads
from Vungle or banner ads from AdDuplex or Smaato
in your Universal Windows Platform (UWP) apps.
Paid apps: Charge a price for your app up front,
including the option to set per-market prices.
In-app purchases and free trials: Offer products
and features that customers can buy from within your
app, and limit features in a free trial version to entice
customers to buy your app.
New API for in-app purchases: Windows 10, version
1607 introduces a new API in the Windows.Services.
Store namespace for performing in-app purchases and
accessing license info for your app.
Windows Store Services SDK: This SDK provides
the libraries and tools that you need to display ads in
your UWP apps, run experiments with A/B testing, and
collect user feedback about your app. This SDK will
evolve over time to include new features.
Resources:
• Download the Vungle SDK: https://v.vungle.com/sdk
• Download the Smaato SDK: https://www.smaato.
com/resources/sdks/#download
• Download the AdDuplex SDK: https://
visualstudiogallery.msdn.microsoft.com/6930860a-
e64b-4b46-9d72-62d7fddda077
• In-app purchases and trials: https://msdn.microsoft.
com/windows/uwp/monetize/in-app-purchases-
and-trials
• Microsoft Store Services SDK: http://aka.ms/store-
em-sdk

39
Marketing your app
Engage with more customers and get the word out
about your app with ad campaigns, sale pricing, badges,
and more.
Ad campaigns: Launch an ad campaign to get the
word out about your app, right from your Dev Center
dashboard. You can create paid campaigns, free house
campaigns, or free community campaigns.
Windows Store badges: Let customers know your
app is in the Store with a custom badge in the style and
language of your choice.
Promotional codes: Promotional codes are an easy
way to give customers free access to your app or add-
on. You can use them for review purposes, customer
service scenarios, or other promotional giveaways.
Sale pricing: Put your app on sale to entice new
customers. When you schedule a sale, the lowered price
is displayed in your app’s Store listing for customers on
Windows 10.
App feedback: Invite your Windows 10 customers
to tell you what they think by directing them to the
Feedback Hub, where they can submit problems,
suggestions, and upvotes. Then, review and respond to
their feedback in the Dev Center Feedback report.
Respond to reviews: Follow up and connect with your
customers by responding publicly or privately to their
reviews.
Custom promotion campaigns: Add custom tracking
codes into links to your app’s Store listing to find out
which channels are driving the most downloads for
customers on Windows 10.
Affiliate marketing: The Microsoft Affiliate Program
makes it easy for affiliates to earn commissions for
purchases they refer to the Windows Store.
Resources:
• Create an ad campaign: https://msdn.microsoft.com/
library/windows/apps/mt148569.aspx
• Supported markets and other common questions:
https://msdn.microsoft.com/library/windows/apps/
mt148568.aspx
• Get your badge: https://developer.microsoft.com/
store/badges
• Download a PDF of our app marketing guidelines:
https://go.microsoft.com/fwlink/p/?LinkId=529769
• Create promotional codes: https://msdn.microsoft.
com/windows/uwp/publish/generate-promotional-
codes
• Put apps and add-ons on sale: https://msdn.
microsoft.com/windows/uwp/publish/put-apps-and-
add-ons-on-sale
• Manage feedback: http://go.microsoft.com/fwlink/
p/?LinkId=746306
• Respond to customer reviews: https://msdn.
microsoft.com/windows/uwp/publish/respond-to-
customer-reviews
• Create a custom promotion campaign: https://msdn.
microsoft.com/windows/uwp/publish/create-a-
custom-app-promotion-campaign
• Affiliate marketing website: http://go.microsoft.com/
fwlink/p/?LinkId=617665
40
 10 Optimization

You can view detailed analytics for your apps in the
Windows Dev Center dashboard. Statistics and charts
let you know how your apps are doing, from how many
customers you’ve reached to how they’re using your
app and what they say about it. You can also find info
on app health, ad usage, and more. View the reports in
the dashboard, or download the reports you need to
analyze your data offline. There are also several ways
for you to access your analytics data without using the
dashboard.
Analytics for all your apps
Publishing your app through the Windows Store and the
Windows Phone Store is just the first step in your app’s
relationship with its customers. To learn about users’
specific behavior inside your app, you can implement
telemetry, which is a form of automated remote
measurement and data collection. Combined with
appropriate analytics, telemetry can tell you things such as:
• How are customers engaging with the app?
• Where are they spending (or not spending) their time?

In addition to the dashboard reports, you can • What device configurations do your users prefer?
programmatically access some analytics data by using The easiest way to implement telemetry in your app is to
the Windows Store analytics REST API. register with a third-party analytics provider. Incorporate
their SDK into your app, make calls to their API as needed,
and spend most of your time using the analytics to create
Analytics for all your apps better apps.
To view key analytics about your most downloaded
apps, in the top navigation menu, select Analytics >
Resources
Overview. By default, the Analytics overview page
shows info about your five apps that have the most • Find telemetry providers at the Windows Partner
lifetime acquisitions. To choose different apps to show, Directory: http://services.windowsstore.com/
select Change filters. • How to use the Windows Store analytics API: https://
msdn.microsoft.com/en-us/windows/uwp/monetize/
Windows Store analytics API access-analytics-data-using-windows-store-services
Use the Windows Store analytics API to
programmatically retrieve analytics data for your apps.
This REST API enables you to retrieve data for app and
add-on acquisitions, errors, app ratings and reviews.
This API uses Azure Active Directory (Azure AD) to
authenticate the calls from your app or service.

Use the Windows Store analytics API to

programmatically retrieve analytics data for apps that
are registered to your or your organization’s Windows
Dev Center account. This API enables you to retrieve
data for app and add-on (also known as in-app product
or IAP) acquisitions, errors, app ratings and reviews.
This API uses Azure Active Directory (Azure AD) to
authenticate the calls from your app or service.

41
Thank you!

Happy developing!

We hope you’ve enjoyed this overview of UWP and how it can help you succeed
as an app developer. We’re interested in your feedback—please contact us at
<contact information> if you have suggestions, requests, or need help making
the most of UWP.

And you can always visit the Windows Dev Center for the latest: https://
msdn.microsoft.com/en-us/windows/uwp/get-started/universal-application-
platform-guide

42
Appendix

Source code:
https://github.com/LanceMcCarthy/LunchScheduler
https://github.com/Microsoft/Windows-universal-samples

43