Metro and WinRT for the
Silverlight/WPF Developer
SILVERLIGHTSHOW.NET WEBINARS SERIES
GILL CLEEREN, February 2nd 2012
www.snowball.be - gill.cleeren@ordina.be - @gillcleeren
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: gill@snowball.be
• Twitter: @gillcleeren
Some practical stuff
• Ask questions through Q&A window
– We’ll 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 70-506!
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, that’s my book  )
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
This may look like the typical
“Introduction to Silverlight for developers”
or something...
But it’s 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)
• IO’ing in Metro apps
• Visit SilverlightShow.net
Focus on...
Metro style Apps
XAML
C
C++
Desktop Apps
HTML / CSS
C#
VB
JavaScript
(Chakra)
HTML
JavaScript
C
C++
C#
VB
Win32
.NET
/ SL
WinRT APIs
Communication
& Data
Graphics & Media
Devices &
Printing
Application Model
Windows Core OS Services
Internet
Explorer
Before we begin... You can earn something!
For every Metro topic you already know,
you get a badge!
GENERAL XAML STUFF
FOR WINDOWS 8
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 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
We’re 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
<Grid x:Name="LayoutRoot" Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250" />
<ColumnDefinition Width="250" />
<ColumnDefinition Width="250" />
</Grid.ColumnDefinitions>
<Rectangle Fill="Red" Grid.Column="1" />
</Grid>
But fluid layouts are often a better
choice
<Grid x:Name="LayoutRoot" Background="Green">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="3*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Rectangle Fill="Red" Grid.Column="1" />
</Grid>
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 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 + .
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)
– 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
New properties for orientation
…
<Application …>
<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
DEMO
GENERAL XAML STUFF
FOR WINDOWS 8
Congratulations,
you earned a badge!
General XAML for Windows 8
OLD AND NEW CONTROLS
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
Most old controls made the transfer to Windows 8...
DEMO
THE “GOLDEN OLDIES” IN
WINDOWS 8
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
DEMO
THE “NEW CONTROLS ON THE
BLOCK”
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
DEMO
CHANGE LISTBOX INTO LISTVIEW
GridView
• Allows creation of grid-based layouts
• Supports grouping of items (next slide)
• Has WrapGrid or VariableSizedWrapGrid
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
DEMO
GRIDVIEW AND GROUPING
Semantic zoom
<JumpViewer>
<JumpViewer.ContentView>
...
//some xaml here
...
</JumpViewer.ContentView>
<JumpViewer.JumpView>
...
//some more xaml here
...
</JumpViewer.JumpView>
</JumpViewer>
DEMO
SEMANTIC ZOOM
Congratulations,
you earned a badge!
Be in Control with Windows 8
FINDING YOUR WAY WITH NAVIGATION
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 isn’t 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
DEMO
NAVIGATION THROUGH
WINDOWS 8
Congratulations,
you earned a badge!
The Navigator
Summary
Look what you already know!
Q&A
THANKS!
Metro and WinRT for the
Silverlight/WPF Developer
SILVERLIGHTSHOW.NET WEBINARS SERIES
GILL CLEEREN, February 2nd 2012
www.snowball.be - gill.cleeren@ordina.be - @gillcleeren