-
1.
Windows 8 for Silverlight/WPF Coderz
Jeremy Likness (@JeremyLikness)
Principal Consultant
jlikness@wintellect.com
Copyright © 2012
consulting training design debugging wintellect.com
-
2.
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
-
3.
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
-
4.
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
-
5.
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
-
6.
demo
Windows 8 Apps
consulting training design debugging wintellect.com
-
7.
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
-
8.
demo
XAML and Blend
consulting training design debugging wintellect.com
-
9.
Animations
• Same old story(board)
• Plus a whole lot more
• Animations Library makes life easy
consulting training design debugging wintellect.com
-
10.
demo
Animations
consulting training design debugging wintellect.com
-
11.
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
-
12.
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
-
13.
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
-
14.
New Controls
• Progress ring
• Spell-check support
• GridView
• ListView
• FlipView
• SemanticZoom
• Touch-first
consulting training design debugging wintellect.com
-
15.
demo
Controls
consulting training design debugging wintellect.com
-
16.
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
-
17.
demo
VSM
consulting training design debugging wintellect.com
-
18.
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
-
19.
demo
WinRT
consulting training design debugging wintellect.com
-
20.
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
-
21.
demo
Contracts and Extensions
consulting training design debugging wintellect.com
-
22.
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
-
23.
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
-
24.
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
-
25.
demo
Wintellog (MVVM + WPF and Windows Store)
consulting training design debugging wintellect.com
-
26.
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
-
27.
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
-
28.
Questions?
Jeremy Likness (@JeremyLikness)
Principal Consultant
jlikness@wintellect.com
consulting training design debugging wintellect.com
Show IE10 and app bar, weather, then go into photos, take a picture, send to puzzle touch to show contracts
Create grid app, show XAML and point out differences, then open in Blend and show the new Device tab on the GroupedItemsView
Personality animations
Show tip for the SDK/Design C:\\Program Files (x86)\\Windows Kits\\8.0\\Include\\WinRT\\Xaml\\Design
Show controls, then layout, and panels, then touch – use simulator and don’t forget semantic zoom
Show Windows8Application2 in the simulator – semantic zoom
Navigate and show the ildasm of the metadata. Then show the Thumbnail library.
Reinforce thumbnail extensions, show search and settings
Reinforce thumbnail extensions, show search and settings