Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd

About myself... Gill Cleeren.NET ( Microsoft Regional Director Silverlight MVP Speaker (TechDays, TechEd, DevReach, DevDays, NDC Norway, Telerik Usergroup tour Sweden, UK and Scotland...) Visug user group lead ( Author (Silverlight 4 Data and services cookbook) – And a new one is being finished as we speak! Blog:

Some practical stuff Ask questions through Q&A window – Well answer them after the session or by personal mail A link to the video recording will be sent to you

You can win! Complete the post-webinar survey and win! You can win one of the 3 ebooks Getting Ready for Microsoft Silverlight Exam !

You can win! Tweet this webinar (comments, feedback...) using #webinarsilverlightshow tag! You can win one of the 3 ebooks Silverlight 4 Data and Services Cookbook (yep, thats my book )

New version coming soon! Updated for Silverlight 5 Over 115 recipes (thats 30 extra!) Extended to about 700 pages (thats 250 extra!) Covering WP7, MVVM, RIA Services and much more! More info:

This may look like the typical Introduction to Silverlight for developers or something...

But its really all about transferring your current knowledge to Windows 8.

This is the road to development on Windows 8 In this part... General XAML stuff for Windows 8 Old and new controls Finding your way with navigation

This is the road to development on Windows 8 In the second part (next week Thursday 9th February) Styling and templating Data in your Windows 8 apps – Getting data – Data binding The Application Lifecycle (Copyright 2010 Windows Phone 7) Tiles and more (Copyright 2010 Windows Phone 7) IOing in Metro apps Visit SilverlightShow.net

Focus on... Windows Core OS Services JavaScript (Chakra) C C++ C# VB Metro style Apps Communication & Data Application Model Devices & Printing WinRT APIs Graphics & Media XAMLHTML / CSS HTML JavaScript C C++ C# VB Desktop Apps Win32.NET / SL Internet Explorer

Before we begin... You can earn something!

For every Metro topic you already know, you get a badge! For every Metro topic you already know, you get a badge!

GENERAL XAML STUFF FOR WINDOWS 8 You can earn the General XAML for Windows 8 badge

The user is free to select any device, Windows 8 will support it. Your app needs to adapt to bring the best possible experience.

Size doesnt matter... (For XAML, that is) Minimum app resolution is 1024x768 Baseline resolution is 1366x768 On any resolution, your app should still look good – However, it should use the added screen estate

Were lucky to have XAML XAML supports fluid layout – Horizontal and vertical stretching of elements – Star-sizing (Yes, you know this already...)

XAML has fixed layouts

But fluid layouts are often a better choice

Windows 8 supports new and changing formats for apps: an app can be snapped while running.

Snap view is new... The Snapped app is always 320px wide User can choose to snap your app – Any app can be snapped, even a game Some apps dont make sense in snapped view, pausing them might be a good idea Context is maintained between several views – Continuous flow of context For perfect experience, the app can adapt to changing views Scrolling patterns change in Snapped Can be called by swiping or using Win +.

Grid Template Normal

Grid Template Snapped

And the user will rotate that device... He will (we all know that...). What will (or should we say Should?) your app do?

What about orientation? Windows 8 supports to be rotated (if supported by the device) – Dont go rotating your laptop, it wont work Apps behave consistently in orientation changes Apps can be tailored to be in specific orientations Apps can prefer and/or lock an orientation While in Portrait, snapping doesnt work

New properties for orientation … <VisualElements DisplayName="Application18" Logo="Images\Logo.png" SmallLogo="Images\SmallLogo.png" Description="Application18" ForegroundText="light" BackgroundColor="#222222" InitialRotationPreference="landscapeAndFlipped"> …

New properties for orientation protected override void OnLaunched(LaunchActivatedEventArgs args) { DisplayProperties.AutoRotationPreferences = DisplayOrientations.Landscape | DisplayOrientations.LandscapeFlipped; Window.Current.Content = new MainPage(); Window.Current.Activate(); }

Now what do I use? Resize – Window events…you will still get them Layout – View state changes: FullScreen, Filled, Snapped Orientation – Portrait Landscape changes

And do you still remember our good friend, the VisualStateManager? (Yes you do, remember you need to earn that badge!)

VisualStateManager VSM can be used in combination with layout A VisualState for a layout – FullScreen (this is normal and Landscape) – Filled – Snapped – Portrait VisualStateManager.GoToState() helps easy switching

GENERAL XAML STUFF FOR WINDOWS 8 DEMO

Congratulations, you earned a badge! General XAML for Windows 8

OLD AND NEW CONTROLS You can earn the Be in Control with Windows 8 badge

Controls Most old XAML controls are still supported: – Same control model supported in Silverlight, WP7 and WPF – Same properties (mostly) – Animations, Visual State Manager (VSM) and Parts model Well see VSM again later – Content and item controls still exist, new ones have been added – Updated to support both touch and mouse PointerXXX events – Styled with a Windows 8 style Similar to WP7 default styles

Most old controls made the transfer to Windows 8...

THE GOLDEN OLDIES IN WINDOWS 8 DEMO

Some are new and shiny! Or perhaps not that new...

Some of the new controls MediaPlayer ToggleSwitch ProgressRing

Hello WP7 ApplicationBar (close enough) Contains UI for app commands – Replaces your typical menus and toolbars Persistent, light dismiss or time dismiss Swipe in from top/bottom to display

THE NEW CONTROLS ON THE BLOCK DEMO

And then there were collections... Collections are everywhere, also in Windows 8...

New XAML list controls that work almost identically to old ones have been added in Windows 8.

New XAML List controls ListView GridView – Supports grouping Semantic zoom (JumpViewer) FlipView They support new selection models – Single – Multiple – Grouping

Just use them as you would today.

ListView Like a ListBox, but optimized for Windows 8 Supports virtualization Often handy in snapped view

Interaction model IsItemClickEnabled ItemClick event SelectionMode

CHANGE LISTBOX INTO LISTVIEW DEMO

GridView Allows creation of grid-based layouts Supports grouping of items (next slide) Has WrapGrid or VariableSizedWrapGrid

GR ouping in the GR idview Group content by natural ordering of lists – Needs to be done by the developer, control doesnt know on what it should group Visually appealing headers that fit in with Metro style UI

GRIDVIEW AND GROUPING DEMO

Semantic zoom... //some xaml here //some more xaml here...

SEMANTIC ZOOM DEMO

Congratulations, you earned a badge! Be in Control with Windows 8

FINDING YOUR WAY WITH NAVIGATION You can earn the The Navigator badge

Same concepts as Silverlight and WP7 Frame – Top-level container control – Contains the page control Page – Fills the entire content region of the frame – Can navigate to other pages within frame – Pages can share data...(!!!)

Navigation APIs are similar Windows.UI.Xaml.Navigation – NavigationCacheMode – NavigationMode – NavigationFailed – NavigationStopped – LoadCompleted Frame – GoBack() – GoForward() – Navigate() – Source Page – OnNavigateFrom – OnNavigateTo – Frame

Frames and pages in Windows 8 Frame control represents the navigation container – Always accessible via this.Frame NavigationService isnt available Page control represents discrete sections of content Share objects/data between your pages – This is new! Page 3

Some new stuff in the navigation area Page defines caching behavior on NavigationCacheMode Frame controls navigating history stack – GoBack() – GoForward() – Navigate() – NavigationMode

Transitions Integrate Windows 8 look and feel for transitions Frame supports content transitions – EntranceThemeTransition Other transitions available for different scenarios

NAVIGATION THROUGH WINDOWS 8 DEMO

Congratulations, you earned a badge! The Navigator

Summary Look what you already know! NEXT WEEK IN PART 2

Q&A

THANKS!

Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd