XAML and Xbox seating on a tree
#xboxappdevaka.ms/xboxappdev
1
Build great apps for Xbox with XAML and C#Jason Short, PhD |
@infinitecodexSenior Program Manager
https://aka.ms/xboxappdevcode
#xboxappdev
2
Reach every Windows device with one app
What-you-see-is-what-you-get platform
Easily tailor your app to be great on the deviceUniversal
Windows Platform & Tailoring
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)What is
the XAML platform?Microsoft Build 2016 2016 Microsoft Corporation.
All rights reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS,
IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS
PRESENTATION.8/30/16 2:51 PM3
Demo: UWP XAML appsUniversal Windows Platform XAML apps on your
desktop
4
UWP on Xbox:the 10-foot experience
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM5
10-foot experience vs. 2-foot experience
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM6
Same universal app, tailored for 10-foot
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM7
Demo: Presidents AppDeploy to Xbox
8
Presenting on the TV
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM9
10 foot UI should be ~200% what you see at 2 foot
Default resolution for apps on Xbox is 960 x 540effective
pixelsUI Sizing
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM10
UI Sizing (in effective pixels)
1366 x 768
1920 x 1080
360 x 640
960 x 540
960 x 540960 x 540
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM11
Light blue area is not clear or visible on all TVs
The TV-safe area is inside the light blue
The UWP letterboxes apps by default, to keep all their UI within
the TV-safe area
Apps should extend non-essential UI to the edge for the best
user experienceTV-safe area and dealing with overscan960 x 540
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM12
Letterboxing (default)
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM13
Extending non-essential UI to the edge (optimal)
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)Extending
non-essential UI to the edge (optimal)
TV without overscan shows entire appTV with overscan displays
only TV-safe area
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when
necessary)DemoOptimizing for size and TV safe area
16
Gamepad and Remote
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM17
Gamepad and Remote Interaction Basics
XY Focus
Requires Pointer
Recommended for most UI surfacesUse for drawing canvases, web
content, etc.
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM18
Application.RequiresPointer="Auto" : XY Focus or pointer
depending on device (default)"WhenRequested" : XY Focus, except on
controls where specifically requested
For specific controls or pages where pointer makes
sense:Control.RequiresPointer="WhenFocused">
orControl.RequiresPointer="WhenEngaged">Configuring XY Focus vs.
Requires Pointer
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM19
Gamepad and Remote Inputs
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM20
Gamepad and Remote Common Inputs
ButtonLeft Stick/D-padBehaviorMove Focus
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM21
Gamepad and Remote Common Inputs
ButtonLeft Stick/D-padA/SelectBehaviorMove FocusClick
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM22
Gamepad and Remote Common Inputs
ButtonLeft Stick/D-padA/SelectB/BackBehaviorMove FocusClickGo
Back
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM23
Gamepad and Remote Common Inputs
ButtonLeft Stick/D-padA/SelectB/BackMenuBehaviorMove
FocusClickGo BackShow Context Menu
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM24
Gamepad and Remote Common Inputs
ButtonLeft Stick/D-padA/SelectB/BackMenuViewBehaviorMove
FocusClickGo BackShow Context MenuShow Panes or Switch Views
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM25
Gamepad and Remote Common Inputs
ButtonLeft Stick/D-padA/SelectB/BackMenuViewBehaviorMove
FocusClickGo BackShow Context MenuShow Panes or Switch Views
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM26
Gamepad and Remote Common InputsButtonBehaviorHowLeft
Stick/D-padMove Focus
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM27
Gamepad and Remote Common InputsButtonBehaviorHowLeft
Stick/D-padMove FocusA/SelectClickUse standard controls like
Button, ListView, MenuFlyout, etc. to get this by default.
If building custom controls, respond to Spacebar key events.
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM28
Gamepad and Remote Common InputsButtonBehaviorHowLeft
Stick/D-padMove FocusA/SelectClickUse standard controls like
Button, ListView, MenuFlyout, etc. to get this by default.
If building custom controls, respond to Spacebar key events.
B/BackGo BackRespond to standard
SystemNavigationManager.BackRequested events when implementing back
navigation
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM29
Gamepad and Remote Common InputsButtonBehaviorHowLeft
Stick/D-padMove FocusA/SelectClickUse standard controls like
Button, ListView, MenuFlyout, etc. to get this by default.
If building custom controls, respond to Spacebar key events.
B/BackGo BackRespond to standard
SystemNavigationManager.BackRequested events when implementing back
navigationMenuShow Context MenuSet up context menus using
ContextFlyout property or in response to ContextRequested
events.
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM30
Gamepad and Remote Common InputsButtonBehaviorHowLeft
Stick/D-padMove FocusA/SelectClickUse standard controls like
Button, ListView, MenuFlyout, etc. to get this by default.
If building custom controls, respond to Spacebar key events.
B/BackGo BackRespond to standard
SystemNavigationManager.BackRequested events when implementing back
navigationMenuShow Context MenuSet up context menus using
ContextFlyout property or in response to ContextRequested
events.ViewShow Panes or Switch ViewsRespond to GamepadView and
NavigationView key events.
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM31
Gamepad and Remote Additional InputsButtonL/R
TriggerBehaviorPage up/down
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM32
Gamepad and Remote Additional InputsButtonL/R TriggerL/R
BumperBehaviorPage up/downPage left/right
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM33
Gamepad and Remote Additional InputsButtonL/R TriggerL/R
BumperRight stickBehaviorPage up/downPage left/rightPan
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM34
Gamepad and Remote Additional InputsButtonL/R TriggerL/R
BumperRight stickX, YBehaviorPage up/downPage left/rightPanApp
appropriate shortcuts
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM35
Gamepad and Remote Additional InputsButtonL/R TriggerL/R
BumperRight stickX, YPause, Play, etc.BehaviorPage up/downPage
left/rightPanApp appropriate shortcutsControl media playback
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM36
Exploit the Gamepad and Remote Inputs!
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM37
Tuning XY Focus
IsTabStop=true & Visibility=Visible
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM38
Tuning XY Focus
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)Tuning XY
Focus
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM40
Tuning XY Focus
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)Tuning XY
Focus
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)Tuning XY
Focus
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)Tuning XY
Focus
foo
barfoofoo.XYFocusRight = bar;
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)Don't know
where focus is? Add this to your page:
page.GotFocus += (object sender, RoutedEventArgs e) => {
FrameworkElement focus = FocusManager.GetFocusedElement() as
FrameworkElement; Debug.WriteLine("got focus: " + focus.Name + " ("
+ focus.GetType().ToString() + ")");};
Debugging tips
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM45
DemoMouse Mode and Optimize for Gamepad and Remote
46
More tips for a great XY Focus experienceSet initial focus
somewhere reasonable
Lay out elements with a mind to how focus moves up, down, left,
and right.
Consider sizing of UI elements for clean experience moving focus
around
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM47
Handling focus traps and complex interactionsButton 1Button
2
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM48
Focus Engagement allows users to engage a control to interact
with it, then return to XY Focus navigation
Press A to engage.Focus EngagementButton 1Button 2
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM49
Focus Engagement allows users to engage a control to interact
with it, then return to XY Focus navigation
Press A to engage.Use left/right/up/down to interact with
control
Focus EngagementButton 1Button 2
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM50
Focus Engagement allows users to engage a control to interact
with it, then return to XY Focus navigation
Press A to engage.Use left/right/up/down to interact with
controlPress B to disengage.
control.IsFocusEngagmentEnabled="true" (on by default for
Slider)Focus EngagementButton 1Button 2
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM51
Traditional marching ants focus rectShowing focus
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM52
Showing focus High Visibility Focus Visuals
High Visibility focus rects
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM53
Configuring High Visibility Focus Visuals
On by default for apps targeting Windows 10 Anniversary
Update
Application.FocusVisualKind="HighVisibility"
Can be tuned on a per-element basis
FocusVisualMarginFocusVisualPrimaryBrushFocusVisualPrimaryThicknessFocusVisualSecondaryBrushFocusVisualSecondaryThickness
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM54
DemoEngagement Mode and Focus Visuals
55
ColorsJust as for any UWP, pick the right theme for your app
(dark or light) or go with the system default
If you go with system default theme:PC is light (user
configurable)Xbox is dark
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM56
TV-safe colors
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM57
Help users understand the interaction
Platform controls make sounds by default on Xbox
If building custom controls, you can hook up standard
sounds:ElementSoundPlayer.Play(ElementSoundKind.Focus);ElementSoundPlayer.Play(ElementSoundKind.Invoke);ElementSoundPlayer.Play(ElementSoundKind.GoBack);ElementSoundPlayer.Play(ElementSoundKind.Show);ElementSoundPlayer.Play(ElementSoundKind.Hide);ElementSoundPlayer.Play(ElementSoundKind.MoveNext);ElementSoundPlayer.Play(ElementSoundKind.MovePrevious);Sounds
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM58
DemoOptimizing for the TV-safe colors and sounds
59
What you learned about today!UWP on Xbox: the 10 foot
experience
Gamepad and Remote ControlInteraction modesInputs and
BehaviorsTuning XY FocusFocus EngagementFocus Visualization
Presenting on the TVUI sizingTV-safe areaColorsSound
BlueR:0 G:120 B:215CyanR:0 G:188 B:242Light GrayR:210 G:210
B:210Dark BlueR:0 G:32 B:80Dark GrayR:50 G:50 B:50GrayR:115 G:115
B:115PurpleR:92 G:45 B:145OrangeR:216 G:59 B:1GreenR:16 G:124
B:16Main colorsSecondary colors (use only when necessary)
Microsoft Build 2016 2016 Microsoft Corporation. All rights
reserved. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR
STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/30/16 2:51
PM60
#xboxappdevaka.ms/xboxappdev
61
