PowerPoint Presentation

Andy Wigley @andy_wigleyMatthias Shapiro @matthiasshap

Programming Page Controls and Page Transition Animations

WinRT Apps29 April 2014Building Apps for Windows Phone 8.1 Jump StartBuilding Windows Runtime Apps using C# and XAMLBlank Page and Basic Page templatesSetting Page OrientationPivot controlHub controlPage transition animations

In this modulePage controlsSingle Page templates (Windows and Windows Phone)Blank pageBasic page

No UIPage included in the Blank App project template

Basic page layoutAvailable from Add New Item menuPre-configured with state management codeDependency on NavigationHelper class

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.4/28/20144Page OrientationCan specify orientation preference for whole app in Appx manifest

Can set orientation per Page using DisplayInformation API: DisplayOrientations onEntryOrientations; protected override void OnNavigatedTo(NavigationEventArgs e) { onEntryOrientations = DisplayInformation.AutoRotationPreferences; Windows.Graphics.Display.DisplayInformation.AutoRotationPreferences = Windows.Graphics.Display.DisplayOrientations.Portrait; }

protected override void OnNavigatedFrom(NavigationEventArgs e) { Windows.Graphics.Display.DisplayInformation.AutoRotationPreferences = onEntryOrientations; }

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.4/28/20145Pivot control (Windows Phone only)Same UX & usage guidance as Windows Phone 8Portrait OnlyUser swipes left or right between panesEach pane shows data that is related to the othersMore information about some itemDifferent filtered views of the same dataset (e.g. All mail, unread, flagged)

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.4/28/20146

Pivot Pages

Pivot ControlPivot HeadersPivot Items Control7Pivot controldemo 2012 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.4/28/20148Hub

Hub controlSame control as WindowsSimilar to Silverlight PanoramaHub page is landing page of your appVisually stunningDraw users into scenarios

Consists of sections relating to sections/detailsContentUI controls

Control and template make hub layout/ navigation easy

2012 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.4/28/201410

Windows XAML hub control and template

Same control on Windows and Windows PhoneFully templated and customizableLayout of each section defined in a DataTemplateVisual Studio Live! Las Vegas 2011MGB 2003 2003 Microsoft Corporation. All rights reserved.This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.11Hub 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.4/28/201412Background ImageSet your Background Image on the Hub control, not on the PageIt will display full page; Control contains special logic to make it underlay system UI such as Status Bar, App BarYou will get the full Parallax effect as the user scrolls across the Hub content

...

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.4/28/201413hub controldemo 2012 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.4/28/201414Page transition and Theme animations

AnimationsSignature Phone animations built inPage Navigation (default is Turnstile)PointerDown/Up (Tilt)Page RotationEscalator for MenuFlyout (context menu)

ThemeAnimations / ThemeTransitionsRepresents a visual behavior that occurs for predefined actions or state changesCommon API on Windows and Windows PhoneOn Phone, key animations updated to match Phone UX

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.4/28/201416Page Transitions (Phone only)Page transition animations are built-inDefault animation is TurnstileTurnstile is not appropriate in every case!Use ContinuumNavigationTransitionInfo to communicate an association between an item selected from a list, and navigation to a page that shows more detail for the selected itemUse Stagger and Slide In to provide pleasing movement to a page that is rich in listed data

Study the Hub App and Pivot App new project templates for great examples of how to apply correct transition animations 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.4/28/201417Overriding default page transitionsContinuum navigationto illustrate conceptual dead-end scenarios.

See example in the Pivot App template18

Pivot SlideSee example in the Pivot App template

19Theme TransitionsRepresents a visual behaviour that occurs for predefined actions or state changesCan be applied to individual XAML elements using the UIElement.Transitions propertyOr applied for scenario-specific theme transition properties such as ContentControl.ContentTransitions

Notable transitions:AddDeleteThemeTransitionEntranceThemeTransitionPopupThemeTransitionReorderThemeTransitionRepositionThemeTransitionmany more

See http://msdn.Microsoft.com/en-us/library/windows/apps/hh452701.aspx Often, you do not have to program these animations yourself.Standard controls, such as ListView, FlipView, Flyout and AppBar, have many of these behaviors built-in 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.4/28/201420Example: EntranceThemeTransitionEntranceThemeTransition can be applied to content when the page containing the content is first loaded and that part of the content is renderedThus the first appearance of content can offer different visual feedback than a change to content does

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.4/28/201421Page and Theme transitionsdemo 2012 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.4/28/2014222014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics 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.