XAML ControlsDevelopers Guide to Windows 10Controls in the XAML toolboxAdaptive controls

Input intelligence

Using standard controls gets you a long wayLayout controlsCanvas

StackPanel

Grid

Proportional layout with GridRows/columns 3 types of sizing:star sizingproportional: 1*/3* = 25%/75%auto sizingsized to contentcontent can also have Max/Min widths and heights as limitspixel sizinghard-coded size avoid in most situationsauto1*2*auto1*4*7*10Proportional layout with GridGridGridautoauto1*1*1*

400711

600106711Demo: Layout with GridWrapGrid

ScrollViewer

Relative Panel is a XAML layout control. It arranges children by declaring relationships between them.Introducing the Relative PanelXAML's RelativePanel controlA child or two act as a anchor elementsThey are relative to the panelOther children are relative to the anchorsRelativePanel.Above = "ElementName"RelativePanel.RightOf = "ElementName"RelativePanel.Below = "ElementName"RelativePanel.LeftOf = "ElementName"RelativePanel simplifies adaptive UIA simple Visual State setter can rearrange the UIOne element can move a family of related elementAlign with panel

Align with sibling (below, center)

Demo: RelativePanelSplitViewIsPaneOpen="True"IsPaneOpen="False"DisplayMode="Inline"DisplayMode="Overlay"DisplayMode="CompactInline"DisplayMode="CompactOverlay"

Demo: SplitView

Buttons

Text controls

Selection and picker controls

Collection/data controls

Grid View Syntax

List View Syntax

Flip View Syntax

Hub Syntax

App bars and commands

Flyout controls

ContentDialogA custom message box to place arbitrary content

Supports both full and partial screen

ContentDialog in XAMLProject -> Add New Item -> select ContentDialogDesign your ContentDialog in the same way as a User Control

In code, show your dialog like this:AboutMessage myDialog = new AboutMessage();ContentDialogResult result = await myDialog.ShowAsync();if (result == ContentDialogResult.Primary) { /* do some more Primary logic */ }else if (result == ContentDialogResult.Secondary) { /* else do Secondary logic */ }

Demo: Flyout controlsProgress, Media & Inking controls

Resources and StylesWhat is a XAML resource?System resourcesThemeResourcesCustom resourcesValues (like font size)Objects (like color brushes)Control stylesBasedOnTemplatesControl templatesData templates

Resource ScopeStyle Resources for TextBlockA limited set of Style resources are supplied in the SDKSuitable for common text display scenariosUse F12 to examine style definitionYou can create your own stylesUse BasedOn to base on a supplied styleSet your own Property ValuesDefine in App.xaml or in the Page resources

2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/17/201539User theme and contrast preferencesOn Windows 10, users can select an accent colorYou can use this color like this:

On Windows 10 Mobile, also can select Light or Dark modeUnlike Windows Phone 8.1, your app does not automatically apply the Light or Dark themeUser can also select text size and/or High ContrastTest your apps to respect these settings

2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/17/201540Requesting Light or Dark themeRequest the theme for your app in app.xaml:

You can also apply the RequestedTheme attribute to any Page or Control:

2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.8/17/201541 2015 Microsoft Corporation. All rights reserved.