metro and winrt for the silverlight/wpf developer silverlightshow.net webinars series gill cleeren,...
TRANSCRIPT
![Page 1: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/1.jpg)
Metro and WinRT for the Silverlight/WPF DeveloperSILVERLIGHTSHOW.NET WEBINARS SERIESGILL CLEEREN, February 2nd 2012www.snowball.be - [email protected] - @gillcleeren
![Page 2: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/2.jpg)
About myself...• Gill Cleeren• .NET Architect @Ordina (www.ordina.be) • Microsoft Regional Director• Silverlight MVP• Speaker (TechDays, TechEd, DevReach, DevDays, NDC
Norway, Telerik Usergroup tour Sweden, UK and Scotland...)• Visug user group lead (www.visug.be)• Author (Silverlight 4 Data and services cookbook)
– And a new one is being finished as we speak!• Blog: www.snowball.be• Email: [email protected] • Twitter: @gillcleeren
![Page 3: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/3.jpg)
Some practical stuff
• Ask questions through Q&A window– We’ll answer them after the session or by personal
• A link to the video recording will be sent to you
![Page 4: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/4.jpg)
You can win!
Complete the post-webinar survey and win!
You can win one of the 3 ebooksGetting Ready for
Microsoft Silverlight Exam 70-506!
![Page 5: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/5.jpg)
You can win!
Tweet this webinar (comments, feedback...) using #webinarsilverlightshow tag!
You can win one of the 3 ebooksSilverlight 4
Data and Services Cookbook
(yep, that’s my book )
![Page 6: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/6.jpg)
New version coming soon!
• Updated for Silverlight 5• Over 115 recipes (that’s
30 extra!)• Extended to about 700
pages (that’s 250 extra!)• Covering WP7, MVVM,
RIA Services and much more!
• More info:http://bit.ly/SL5DataAndServices
![Page 7: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/7.jpg)
This may look like the typical “Introduction to Silverlight for developers” or something...
![Page 8: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/8.jpg)
But it’s really all about transferring your current knowledge to Windows 8.
![Page 9: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/9.jpg)
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
![Page 10: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/10.jpg)
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)
•IO’ing in Metro apps
•Visit SilverlightShow.net
![Page 11: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/11.jpg)
Focus on...
Windows Core OS Services
JavaScript(Chakra)
CC++
C#VB
Metro style Apps
Communication & Data
Application Model
Devices & Printing
WinRT APIs
Graphics & Media
XAML HTML / CSS
HTMLJavaScript
CC++
C#VB
Desktop Apps
Win32 .NET / SL
Internet Explorer
![Page 12: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/12.jpg)
Before we begin... You can earn something!
![Page 13: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/13.jpg)
For every Metro topic you already know, you get a badge!
For every Metro topic you already know, you get a badge!
![Page 14: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/14.jpg)
GENERAL XAML STUFF FOR WINDOWS 8
You can earn the “General XAML for Windows 8” badge
![Page 15: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/15.jpg)
The user is free to select any device, Windows 8 will support it.
Your app needs to adapt to bring the best possible experience.
![Page 16: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/16.jpg)
Size doesn’t 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
![Page 17: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/17.jpg)
We’re lucky to have XAML
• XAML supports fluid layout– Horizontal and vertical stretching of elements– Star-sizing
(Yes, you know this already...)
![Page 18: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/18.jpg)
XAML has fixed layouts
![Page 19: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/19.jpg)
But fluid layouts are often a better choice
![Page 20: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/20.jpg)
Windows 8 supports new and changing formats for apps: an app can be snapped while running.
![Page 21: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/21.jpg)
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 don’t 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 + .
![Page 22: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/22.jpg)
![Page 23: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/23.jpg)
Grid Template Normal
![Page 24: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/24.jpg)
![Page 25: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/25.jpg)
Grid Template Snapped
![Page 26: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/26.jpg)
![Page 27: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/27.jpg)
![Page 28: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/28.jpg)
And the user will rotate that device... He will (we all know that...).
What will (or should we say “Should”?) your app do?
![Page 29: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/29.jpg)
What about orientation?
• Windows 8 supports to be rotated (if supported by the device)– Don’t go rotating your laptop, it won’t 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 doesn’t work
![Page 30: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/30.jpg)
New properties for orientation
![Page 31: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/31.jpg)
New properties for orientation
![Page 32: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/32.jpg)
Now what do I use?
• Resize
– Window events…you will still get them
• Layout
– View “state” changes: FullScreen, Filled, Snapped
• Orientation
– Portrait Landscape changes
![Page 33: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/33.jpg)
And do you still remember our good friend, the VisualStateManager?
(Yes you do, remember you need to earn that badge!)
![Page 34: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/34.jpg)
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
![Page 35: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/35.jpg)
GENERAL XAML STUFF FOR WINDOWS 8
DEMO
![Page 36: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/36.jpg)
Congratulations, you earned a badge!
General XAML for Windows 8
![Page 37: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/37.jpg)
OLD AND NEW CONTROLS
You can earn the “Be in Control with Windows 8” badge
![Page 38: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/38.jpg)
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• We’ll 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
![Page 39: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/39.jpg)
Most old controls made the transfer to Windows 8...
![Page 40: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/40.jpg)
![Page 41: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/41.jpg)
THE “GOLDEN OLDIES” IN WINDOWS 8
DEMO
![Page 42: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/42.jpg)
Some are new and shiny!
Or perhaps not that new...
![Page 43: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/43.jpg)
Some of the new controls
• MediaPlayer• ToggleSwitch• ProgressRing
![Page 44: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/44.jpg)
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
![Page 45: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/45.jpg)
THE “NEW CONTROLS ON THE BLOCK”
DEMO
![Page 46: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/46.jpg)
And then there were collections...
Collections are everywhere, also in Windows 8...
![Page 47: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/47.jpg)
![Page 48: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/48.jpg)
New XAML list controls that work almost identically to “old” ones have been added in Windows 8.
![Page 49: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/49.jpg)
New XAML List controls• ListView• GridView– Supports grouping
• Semantic zoom (JumpViewer)• FlipView
• They support new selection models– Single– Multiple– Grouping
![Page 50: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/50.jpg)
Just use them as you would today.
![Page 51: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/51.jpg)
ListView
• Like a ListBox, but optimized for Windows 8• Supports virtualization• Often handy in snapped view
![Page 52: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/52.jpg)
Interaction model
• IsItemClickEnabled• ItemClick event• SelectionMode
![Page 53: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/53.jpg)
CHANGE LISTBOX INTO LISTVIEWDEMO
![Page 54: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/54.jpg)
GridView
• Allows creation of grid-based layouts• Supports grouping of items (next slide)• Has WrapGrid or VariableSizedWrapGrid
![Page 55: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/55.jpg)
GRouping in the GRidview
• Group content by natural ordering of lists– Needs to be done by the developer, control
doesn’t know on what it should group
• Visually appealing headers that fit in with Metro style UI
![Page 56: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/56.jpg)
GRIDVIEW AND GROUPINGDEMO
![Page 57: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/57.jpg)
Semantic zoom<JumpViewer> <JumpViewer.ContentView>
...//some xaml here...
</JumpViewer.ContentView> <JumpViewer.JumpView>
...//some more xaml here...
</JumpViewer.JumpView></JumpViewer>
![Page 58: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/58.jpg)
SEMANTIC ZOOMDEMO
![Page 59: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/59.jpg)
Congratulations, you earned a badge!
Be in Control with Windows 8
![Page 60: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/60.jpg)
FINDING YOUR WAY WITH NAVIGATION
You can earn the “The
Navigator” badge
![Page 61: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/61.jpg)
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...(!!!)
![Page 62: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/62.jpg)
Navigation APIs are similar• Windows.UI.Xaml.Navigation
– NavigationCacheMode– NavigationMode– NavigationFailed– NavigationStopped– LoadCompleted
• Frame– GoBack()– GoForward()– Navigate()– Source
• Page– OnNavigateFrom– OnNavigateTo– Frame
![Page 63: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/63.jpg)
Frames and pages in Windows 8
• Frame control represents the navigation container– Always accessible via this.Frame• NavigationService isn’t available
• Page control represents discrete sections of content
• Share objects/data between your pages– This is new! Page 3
![Page 64: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/64.jpg)
Some new stuff in the navigation area
• Page defines caching behavior on NavigationCacheMode
• Frame controls navigating history stack– GoBack()– GoForward()– Navigate()– NavigationMode
![Page 65: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/65.jpg)
Transitions
• Integrate Windows 8 look and feel for transitions
• Frame supports content transitions– EntranceThemeTransition
• Other transitions available for different scenarios
![Page 66: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/66.jpg)
NAVIGATION THROUGH WINDOWS 8
DEMO
![Page 67: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/67.jpg)
Congratulations, you earned a badge!
The Navigator
![Page 68: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/68.jpg)
Summary
Look what you already know!
NEXT WEEK IN PART 2
![Page 69: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/69.jpg)
Q&A
![Page 70: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/70.jpg)
THANKS!
![Page 71: Metro and WinRT for the Silverlight/WPF Developer SILVERLIGHTSHOW.NET WEBINARS SERIES GILL CLEEREN, February 2 nd 2012 - gill.cleeren@ordina.be](https://reader037.vdocuments.us/reader037/viewer/2022102923/55148783550346ea6e8b4cd6/html5/thumbnails/71.jpg)
Metro and WinRT for the Silverlight/WPF DeveloperSILVERLIGHTSHOW.NET WEBINARS SERIESGILL CLEEREN, February 2nd 2012www.snowball.be - [email protected] - @gillcleeren