Harini Kannan / Tim Heuer - PowerPoint Presentation

Slide1
Slide2

Harini Kannan / Tim HeuerProgram Managers, XAML

From the small screen to the big screen:Building Universal Windows Apps with XAML

2-679Slide3
Slide4

Mobile

Holographic

Surface Hub

Xbox

IoT

DesktopSlide5

UWP becomes the one platform for developers. Learn one

set of core APIs for all devices.Slide6

Yay, so what does that mean for my UI?Slide7

From a UI standpoint, we believe a large majority of these decisions/challenges can be answered by pivoting on

window size and, if necessary, capabilities.Slide8

Windows 10 XAML ‘free’Responsive layout with new APIs

Flexibility and power through extensibilityHighly-tailored

< XAML />Slide9

What do I get for free?Slide10

MenuFlyout

mf = new

MenuFlyout

();

mf.ShowAt

(sender,

e.GetPosition(sender));Slide11

Window gets resized, Pivot headers move

Mouse and Keyboard capable automaticallySlide12

Single scale factor system for all apps

Guarantees consistent visual size of text and graphics (abstracts panel density and viewing distance for you)100%, 200% and 400% are the most important sizes to support in assetsScale factors work well with 4-px grid

See session 2-63 Display Scaling: Why it matters for more details

Scaling happens automatically

Scale

Factors

100125150200250300400Slide13

Respond to windows size changes using markkup

Position UI around intuitivelyEnabling some small->big screen common scenarios

Easier Responsive UI

XAML in Windows 10 provides new building blocks for quicker development of basic responsive scenariosSlide14

Glenn

Versweyveld (@

depechie

)

Deani

Hansen (@

deanihansen)http://bit.ly/1P2jvApSlide15

DEMO:

Core responsive XAML building blocks Slide16

Visual State Triggers (code snippet)

<

VisualStateGroup

x

:

Name="WindowSizeStates"> <VisualState x:Name="WideState"> <VisualState.StateTriggers> <AdaptiveTrigger MinWindowWidth="720" /> </VisualState.StateTriggers> <VisualState.Setters> <Setter Target="MySplitView.IsPaneOpen" Value="True"

/>

<

Setter

Target

="

MySplitView.DisplayMode

"

Value

="Inline"

/>

</

VisualState.Setters> </VisualState></VisualStateGroup>Slide17

“media queries” for XAML

Respond to a condition and goes to that stateDeclarative way of doing what you can todayBuilt-in AdaptiveTrigger for window size

Setters enable more readable/direct value changing

VisualState TriggersSlide18

Visual State Setters (code snippet)

<

VisualState

x

:

Name="Pressed"> <Storyboard> <ObjectAnimationUsingKeyFrames Storyboard.TargetName="RootGrid" Storyboard.TargetProperty="Background"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}" />

</

ObjectAnimationUsingKeyFrames

>

<

ObjectAnimationUsingKeyFrames

Storyboard.TargetName

="ContentPresenter"

Storyboard.TargetProperty

="BorderBrush">

<

DiscreteObjectKeyFrame

KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground"> <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" /> </ObjectAnimationUsingKeyFrames> </Storyboard></VisualState><VisualState x:Name="Pressed"> <VisualState.Setters> <Setter Target="RootGrid.Background" Value="{ThemeResource …}" /> <Setter Target="ContentPresenter.BorderBrush" Value="{ThemeResource …}" /> <Setter Target="ContentPresenter.Foreground" Value="{ThemeResource …}" /> </VisualState.Setters></VisualState>Slide19

Constraint-based panel

Allows developers to express spatial relationshipsHuge enabler for responsive UI scenariosLeverage’s x:Name’d elements for RelativeTo* positioning

RelativePanelSlide20

RelativePanel (code snippet)

<

RelativePanel

x

:

Name

="panel" Margin="4.75" Height="190"> <Image x:Name="MapImage" controls:GoogleImageDependencyObject.GoogleImageUrl="{Binding Map}" Stretch="None“ RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignLeftWithPanel="True"

RelativePanel.AlignRightWithPanel

="True"

RelativePanel.AlignTopWithPanel

="True"

HorizontalAlignment

="Stretch"

VerticalAlignment

="Stretch"/>

<

Rectangle

x:Name="topRect" Fill="White" Opacity="0.85" Height="30“

RelativePanel.AlignBottomWithPanel="True“ RelativePanel.AlignLeftWithPanel

="True" RelativePanel.AlignRightWithPanel="True" HorizontalAlignment="Stretch"/> <Rectangle x:Name="bottomRect" Fill="White" Opacity="0.85" Height="45“ RelativePanel.AlignTopWithPanel="True“ RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True" HorizontalAlignment="Stretch"/> <Image Source="{Binding TypeImageUrl}" Height="18" Margin="4.75“ RelativePanel.AlignBottomWithPanel="True“ RelativePanel.AlignLeftWithPanel="True"/> <Image Source="ms-appx:///Assets/ThumbsUp.png" Height="18" Margin="4.75" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignHorizontalCenterWithPanel="True"/> <Image Source="ms-appx:///Assets/appbar.trophy.png" Height="18" Margin="4.75" RelativePanel.AlignBottomWithPanel="True" RelativePanel.AlignRightWithPanel="True"/> <Ellipse x:Name="profilePic" Style="{StaticResource ProfileEllipse}" Margin="4.75“ RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignTopWithPanel="True"> … </Ellipse>

<TextBlock x:Name="ActivityName" Text="{Binding Name}" TextTrimming="CharacterEllipsis" Foreground="{StaticResource KlivaMainBrush}" Margin="0,0,4.75,0" FontFamily="{StaticResource OpenSansFontSemibold}“ RelativePanel.AlignTopWithPanel="True" RelativePanel.RightOf="profilePic"/> <TextBlock x:Name="ActivityMetaData" Text="{Binding Athlete.FullName}" RequestedTheme="Light" Margin="0,-2.375,4.75,0“ FontFamily="{StaticResource OpenSansFontLight}“ RelativePanel.RightOf="profilePic" RelativePanel.Below="ActivityName"/> <TextBlock x:Name="ActivityDateTime" Text="{Binding StartDate, Converter={StaticResource RelativeTimeConverter}}" FontFamily="{StaticResource OpenSansFontSemibold}" Foreground="DarkGray" Margin="4.75,-2.375,4.75,0" /></RelativePanel>Slide21

Above

BelowLeftOfRightOfAlign*WithTop, Bottom, Left, Right,

HorizontalCenter, VerticalCenter

RelativePanel Spatial PropertiesSlide22

Building block for transient content

Can be used for navigational patternsHelps with responsive UI scenarios for showing related UI in single viewsNo direct guidance built-in – use it if it makes senseOverlay, Inline and Compact modes

SplitView

ControlSlide23

SplitView

Pane

ContentSlide24

USE BUILT-IN XAML FEATURES

ONE SIMPLY DOES NOTSlide25

API type-based checking

Allow you to determine capabilities without OS version checkAnalogous to web development capability checkingFeature Detection using

ApiInformationSlide26

u

sing Windows.Foundation.Metadata.ApiInformation;

using Windows.Phone.Devices.Notifications;

// give haptic feedback for an error

if

(IsTypePresent("Windows.Phone.Devices.Notifications.VibrationDevice")){ VibrationDevice.GetDefault().Vibrate(TimeSpan.FromMilliseconds(550));}

Note: The string for the type is always single-dotted notation, even for C++Haptic feedback exampleSlide27

…when my

ViewModel changes…based on the data type…based on physical screen size

Ok then…But I want to have a VSM Trigger…Slide28

DEMO:

Extending VisualState TriggersSlide29

public

class

InputTypeTrigger

: StateTriggerBase

{

private FrameworkElement _targetElement; private

PointerDeviceType _lastPointerType, _triggerPointerType; public FrameworkElement TargetElement { get { return _targetElement; } set { _targetElement = value; _targetElement.AddHandler(FrameworkElement.PointerPressedEvent

,

new

PointerEventHandler

(_

targetElement_PointerPressed

),

true

);

}

}

public

PointerDeviceType PointerType { get

{ return _triggerPointerType

; } set { _triggerPointerType = value; } } private void _targetElement_PointerPressed(object sender, PointerRoutedEventArgs e) { _lastPointerType = e.Pointer.PointerDeviceType; SetActive(_triggerPointerType == _lastPointerType); } }Custom Trigger Definition (code snippet)Slide30

xmlns

:triggers

="using:StravaMobile.UAP.Triggers

"

<

VisualStateGroup x:Name="InputTypeStates"> <VisualState> <

VisualState.StateTriggers> <triggers:InputTypeTrigger TargetElement="{x:Bind ActivityList}" PointerType="Touch" /> <triggers:InputTypeTrigger TargetElement="{x:Bind ActivityList}" PointerType="Pen" /> </VisualState.StateTriggers

>

<

VisualState.Setters

>

<

Setter

Target

="

GoToTopButton.Visibility

"

Value

="Visible" />

</

VisualState.Setters

>

</VisualState></

VisualStateGroup>

Custom Trigger Usage (code snippet)Slide31

Simple base class to let the framework know when to make active

You define the logicCan combine TriggersLeverage other features within your Trigger like x:Deferhttps://github.com/Microsoft/Windows-universal-samples/tree/master/xaml_statetriggers

Extensible TriggersSlide32

Windows Insiders FTW!

http://github.com/dotMorten/WindowsStateTriggers

Morten Nielsen

Windows Developer MVP (@

dotMorten

)Slide33

From a UI standpoint, we believe a large majority of these decisions/challenges can be answered by pivoting on

window size and, if necessary, capabilities.Slide34

Custom control development

Providing specific interactions for ContinuumWhere ApiInformation

isn’t sufficientDevice families like Xbox

and Surface HubTailoring Your ExperiencesSlide35

Decide what scenario drives the need

Create unique views for those scenariosLoad appropriate view on startup based on scenario

Tailoring your view

//Get the diagonal size of the integrated display

var

dsc = new DisplaySizeHelper.DisplaySizeClass

();double _actualSizeInInches = dsc.GetDisplaySizeInInches(); //Guidance: If the diagonal size is <= 7" use the OneHanded optimized viewif ( _actualSizeInInches >0 && _actualSizeInInches <= ONEHANDEDSIZE){ rootFrame.Navigate(typeof(MainPage_OneHanded), e.Arguments);

}

else

{

rootFrame.Navigate

(

typeof

(

MainPage

),

e.Arguments

);

} Slide36

SplitView

vs. Pivot

Commands at the top vs. bottomSlide37

Create/migrate your app to UWP

Leverage Visual Studio preview tools for UI previewsThink first about window size, use Triggers, RelativePanel to help adaptGive us feedback using Windows Feedback tool and Developer forums

http://dev.windows.com

Call to actionSlide38

Related Sessions

Session

Title

Speakers

Session

CodeWhat's New in XAML for Universal Windows AppsJoe Stegman629XAML Performance: Techniques for Maximizing Universal Windows App Experiences Built with XAMLMark AlcazarKiran

Kumar689API Contracts (or How I Learned to Stop Checking OS Versions and Love Feature Detection)Brent Rector733Optimizing Windows Apps for ContinuumLiz Threlkeld703Navigation and Windowing in Windows AppsRoberth Karman779Display Scaling: What it is and why it matters to youSteve Wright263New XAML Tools in Visual Studio 2015Unni Ravindranathan697Developing Universal Windows Apps in Visual Studio 2015Navit Saxena650Slide39