Windows 8 for Silverlight/WPF Coderz
Jeremy Likness (@JeremyLikness)
Principal Consultant
jlikness@wintellect.com
Copyright © 2012
consulting training design debugging wintellect.com

what we do
consulting training design debugging
who we are
Founded by top experts on Microsoft – Jeffrey Richter, Jeff Prosise, and John Robbins –
we pull out all the stops to help our customers achieve their goals through advanced
software-based consulting and training solutions.
how we do it Training
• On-site instructor-led training
Consulting & Debugging • Virtual instructor-led training
• Architecture, analysis, and design services • Devscovery conferences
• Full lifecycle custom software development
• Content creation Design
• Project management • User Experience Design
• Debugging & performance tuning • Visual & Content Design
• Video & Animation Production
consulting training design debugging wintellect.com

Building Windows 8 Apps
• Everything you need to build and
deploy Windows 8 Apps
• Full source code online
• Leverage your C# and XAML skills
• Learn about new concepts, like:
– Roaming storage
– Live Tiles and Notifications
– The Windows Store
http://bit.ly/win8design
consulting training design debugging wintellect.com

Agenda
• Introduction
• XAML and Blend
• Animations
• Styles – Parts and States
• New Controls – Grouping and Sorting
• Visual State Manager (Orientations, Snapped, Resolutions)
• WinRT
• Charms and Contracts
• Application Bar
• Portable Class Library
• Strategies for Managing the Gap
• Recap
consulting training design debugging wintellect.com

Introduction: Windows 8 Apps
• Brand new look and feel
• Run on a variety of devices
• Sold through the Windows Store
• Language choice (we’ll focus on C#/XAML, but C++/XAML and
HTML5/JavaScript are available)
• Single, chromeless window that fills the entire screen
• Multiple layouts – orientation, snapped, form-factors, etc.
• Touch-first but pen, mouse, and keyboard friendly
• Apps “talk to each other” through contracts
• New controls and UI surfaces
• Tiles instead of icons
consulting training design debugging wintellect.com

demo
Windows 8 Apps
consulting training design debugging wintellect.com

XAML and Blend
• XAML very similar to Silverlight/WPF
– Namespaces change
– No markup extensions
• Still design-time friendly
• MVVM built-in to the templates
• You still have a friend in Blend!
consulting training design debugging wintellect.com

demo
XAML and Blend
consulting training design debugging wintellect.com

Animations
• Same old story(board)
• Plus a whole lot more
• Animations Library makes life easy
consulting training design debugging wintellect.com

demo
Animations
consulting training design debugging wintellect.com

Styles
• Same concept, can use styles “as is” in
many cases
• Resource keys allow for theme-aware
styles (ex: high contrast)
• Same parts and states for controls
• StyleSelector to return styles
consulting training design debugging wintellect.com

Theme Dictionaries
<ResourceDictionary>
<ResourceDictionary.ThemeDictionaries>
<ResourceDictionary x:Key="Default">
<SolidColorBrush x:Key="AppBarBackgroundThemeBrush“
Color="#E5000000" />
<SolidColorBrush x:Key="AppBarBorderThemeBrush“
Color="#E5000000" />
</ResourceDictionary>
<ResourceDictionary x:Key="HighContrast">
<SolidColorBrush x:Key="AppBarBackgroundThemeBrush“
Color="{StaticResource SystemColorButtonFaceColor}" />
<SolidColorBrush x:Key="AppBarBorderThemeBrush“
Color="{StaticResource SystemColorHighlightColor}" />
</ResourceDictionary>
</ResourceDictionary.ThemeDictionaries>
</ResourceDictionary>
consulting training design debugging wintellect.com

StyleSelector
public class MyStyleSelector: StyleSelector
{
protected override Style SelectStyleCore(
object item,
DependencyObject container)
{
Style style = new Style(typeof(ListViewItem));
style.Setters.Add(new Setter(
ListViewItem.ForegroundProperty,
new SolidColorBrush(Colors.Red)));
return style;
}
}
<ListView ItemsSource="{Binding Widgets}"
ItemContainerStyleSelector="{StaticResource MyStyleSelector}" />
consulting training design debugging wintellect.com

New Controls
• Progress ring
• Spell-check support
• GridView
• ListView
• FlipView
• SemanticZoom
• Touch-first
consulting training design debugging wintellect.com

demo
Controls
consulting training design debugging wintellect.com

Visual State Manager
• Behaves the same as Silverlight
• Used in the fundamental templates
• Helpful for orientation and display
mode changes
• Full Blend support
consulting training design debugging wintellect.com

demo
VSM
consulting training design debugging wintellect.com

WinRT
• The new API for Windows 8 apps
• Has it’s own type system
• Provides language projections for support in JavaScript,
C#, C++, etc.
• Automatic mapping between types
• You can create WinRT using managed code for
consumption by non-managed Windows Store apps
• See the built-in WinRT types:
c:windowssystem32WinMetadata
• Uses ECMA-335 for type definitions – use ILDASM.exe
consulting training design debugging wintellect.com

demo
WinRT
consulting training design debugging wintellect.com

Charms, Contracts, Extensions
• Use Charms (Windows Key + C) to invoke certain contracts
• Contracts are agreements between Windows Store apps
• Extensions are agreements between Windows Store apps
and the Windows 8 operating system
• Contracts: Cached file updater, file picker, play to, search,
settings, share
• Extensions: account picture provider, AutoPlay,
background tasks, camera settings, contact picker, file
activation, game explorer, print task settings, protocol
activation, SSL/certificates
consulting training design debugging wintellect.com

demo
Contracts and Extensions
consulting training design debugging wintellect.com

Application Bar
• Similar to Windows Phone concept
• Drop-in control
• Automatically handles show/hide
• Advanced scenarios like IE10
• Commands live at the edge:
– Right-edge = Charms and “system level” commands
– Bottom, top edges = Application commands
consulting training design debugging wintellect.com

Portable Class Library
• Built into Visual Studio 2012
• Dozens of profiles based on various combinations
• Finds the common API surface area between target
platforms
• Supported targets:
– .NET Framework 4.0 – 4.5
– Silverlight 4 – 5
– Windows Phone 7 – 7.5
– .NET for Windows Store apps
– Xbox 360
• More targets = less surface area
consulting training design debugging wintellect.com

Strategies for Managing the Gap
• Only target the specific frameworks you know you will use
(i.e. don’t target Windows Phone if that’s not on your
radar)
• Build as much functionality into the API surface area you
can
• Use interfaces (IoC/DI) and delegates for functionality that
must be platform specific
• Don’t try to share XAML. The various targets all have
different design considerations.
consulting training design debugging wintellect.com

demo
Wintellog (MVVM + WPF and Windows Store)
consulting training design debugging wintellect.com

Recap
• XAML and Blend
• Animations
• Styles – Parts and States
• New Controls – Grouping and Sorting
• Visual State Manager (Orientations, Snapped, Resolutions)
• WinRT
• Charms and Contracts
• Application Bar
• Portable Class Library
• Strategies for Managing the Gap
consulting training design debugging wintellect.com

Links
• Twitter me:
@JeremyLikness
• Blog me:
http://csharperimage.jeremylikness.com/
• Book me:
http://bit.ly/win8design
• Source me:
http://windows8applications.codeplex.com/
consulting training design debugging wintellect.com

Questions?
Jeremy Likness (@JeremyLikness)
Principal Consultant
jlikness@wintellect.com
consulting training design debugging wintellect.com