Transcript Declarative based UI programming: WPF, Silverlight & Surface

Declarative based UI programming:
WPF, Silverlight & Surface
Tim Huckaby
CEO, InterKnowlogy
Microsoft RD & MVP
About…
• InterKnowlogy (www.InterKnowlogy.com)
• Tim Huckaby, CEO ([email protected])
 Custom Application Development / Consulting / Software &
Systems Engineering Firm headquartered in Carlsbad, CA
 Design, Architect, Build and Deploy Enterprise Class Applications
 Industry Experts:








Most of the employees are published
Microsoft .NET Application development since 2000!
Microsoft .NET Smart Client pioneers / industry leaders
Information Worker Solutions (VSTO & SharePoint)
Integration / Messaging, B2B / B2C, Wireless / Mobility
Leading Edge: Surface, WPF, Silverlight, SharePoint, OBA, Windows 7 Touch
Cutting Edge Solutions on emerging Microsoft technologies
Largest Customer: Microsoft
Session Agenda
Declarative Programming
Layout and Controls
Events and Commands
Working with Data
Styles
Reference Applications Demo
Tim Huckaby
CEO, InterKnowlogy
Microsoft RD & MVP
4
Declarative Programming
•
•
•
•
XAML replaces code
Attributes control Layout and Style
Event handlers wired-up in XAML
Declarative Data Binding
What the heck is XAML?
• Separates the front-end from the back-end
• Simple declarative programming language
suitable for constructing and initializing .NET
Objects
• Usually the most concise way to represent user
interfaces (or other hierarchies of objects)
• Doesn’t need a compile to render
• The language that almost all WPF related tools
emit
Sample XAML
Runs in a WPF Application:
Runs in the Browser:
Declarative Programming Gotcha(s), tips
& tricks
• Not all XAML is created equal
• Silverlight was designed to be a small subset of WPF not a
direct port
• Surface works with gestures so unique versions of some
controls are required
• The Surface SDK is going to permeate WPF and Silverlight
to provide a consistent API for touch across the stack.
Declarative Programming: XAML
ProductSeach in WPF & Silverlight
Surface XAML
Tim Huckaby
CEO, InterKnowlogy
Microsoft RD & MVP
9
Layout Overview
•
•
•
•
Content rendering flows inside parent
Fixed positioning (Canvas) is seldom used
Panels are used to house content
Margins and Padding over fixed size
Panels (ALL)
• StackPanel
 Arranges child elements into a single line that can be oriented
horizontally or vertically.
• Grid
 A flexible grid area that consists of columns and rows.
• Canvas
 An area within which you can explicitly position child elements by using
coordinates that are relative to the Canvas area.
Panels (WPF and Surface)
• WrapPanel
 Positions child elements in sequential position from left to right,
breaking content to the next line at the edge of the containing box.
• DockPanel
 An area where you can arrange child elements either horizontally or
vertically, relative to each other.
Positioning
• Horizontal and Vertical Alignment
• Margin
• Padding
Margin
Padding
Text Block
Text Block
Layout Demo
WPF -warehouse\ProductLocation.xaml
Silverlight-StoreInformation.xaml (in controls/store)
Tim Huckaby
CEO, InterKnowlogy
Microsoft RD & MVP
14
Controls Overview
• Not all controls are created equal
• Silverlight is a subset of WPF so certain controls have not
ported over yet
• Surface relies on touch so it has unique versions of some
controls
Standard Common Controls
•
•
•
•
•
•
TextBox
Button
CheckBox / ComboBox
Image
ListBox
Tab
WPF Controls
•
•
•
•
•
•
•
Menu and Toolbar
TextBlock
InkCanvas / InkPresenter
Expander
TreeView
DocumentViewer
UniformGrid
Silverlight Controls
• DataGrid
• Calendar
• ProgressBar
Surface Controls
•
•
•
•
ScatterView
Menu
TagVisualizer
InkCanvas
Controls Demo
Tim Huckaby
CEO, InterKnowlogy
Microsoft RD & MVP
20
Working with Data
• Overview
• Simple Data Binding
• Complex Data Binding
Data Binding Overview
• Simple Field level Data Binding
• Complex Data Binding to multiple controls at a time
(Master/Detail/Detail)
• Client-Side Sorting and Filtering
• Support for binding to Objects, XML and Relational data
sources
Simple Data Binding
• Simple Data Binding using Business Objects
• Support for two-way synchronization in simple objects via
the INotifyPropertyChanged interface
• Implicit and Declarative binding via the DataContext
Complex Data Binding
• Binding to Lists
• Supports two-way data binding to list if list inherits from
ObservableCollection<T>
• Data Templates
• Sorting
• Filtering
• Master/Detail/Detail
Working with Data Demo
Tim Huckaby
CEO, InterKnowlogy
Microsoft RD & MVP
29
Adding Style to Your Application
• Overview
• Resources *
• Triggers *
* Partial or no support in Silverlight
Styles Overview
• What are styles?
• Problems they address in WinForms 2.0
 Styling controls one at a time
 Unnecessary Custom Control Creation
• Similarities to Cascading Style Sheets
 Inline declaration
 Page level declaration
 Separate file declaration
Style Examples
Resources
• Static Resources
 Loaded when Window or Page Loads
 Leads to slower page loading
 Changes to underlining values are not propagated
• Dynamic Resources *
 More overhead to allow for constant updates
 Can only be used to set dependency properties
 Can potentially improve Page and Window load time
* Not supported in Silverlight
Resource Dictionary
• Contains hash table of resources
• Great way to organize resources
• Resource.MergedDictionaries combines many different file
based resources *
* Not supported in Silverlight
Triggers
• Setters that are set based on one or more conditions
• Three Types of Triggers
 Property – Invoked when the value of a dependency property changes
 Data – Invoked when the value of a plain .NET property changes
 Event – Invoked when a routed event changes
Not supported in Silverlight
The Silverlight Visual State Manager
•
•
•
•
•
Alternative to Triggers in Silverlight
Promotes separation between UI and code
Controls have States and State Groups
States within a State Group are immutable
Fully supported in Blend
Not supported in WPF
Adding Style to Your Application
Tim Huckaby
CEO, InterKnowlogy
Microsoft RD & MVP
37
Summary
•
•
•
•
•
•
Layout in XAML is flexible
Each technology has it’s own set of controls
Data Binding is rich & supports many data types
Styles bring life to your applications
The learning curve can be steep, but is worth it.
Download all my resources and dedicate some
time to learn.
Where to go next:
http://WindowsClient.InterKnowlogy.com
• Windows Client
Guidance
Microsoft Platform Solution
Architecture for the Application
Developer
by Tim
Huckaby
• The “Anchor Document”
to a ton of Rich Client
Guidance
WPF: Where to go Next Free Resources
• WindowsClient.net - this is the official Microsoft community
portal for WPF development, and is chock full of great
resources
• Windows Client Development Samples, Guidance, FAQs
and Blogs - Contains an aggregation of a ton of great stuff
on the Windows Client Development platform.
• Learn WPF page - this page links to podcasts, labs, and the
very popular "how do I?" videos
• MIX University's WPF Bootcamp - this is a full 3-day video
training course on WPF, in which expert instructors guide
you from the surface into the depths of the technology stack
Silverlight & Surface: Where to go Next
Free Resources
• http://silverlight.net - this is the official Microsoft
community portal for Silverlight development
• http://www.microsoft.com/surface - this is the
official Microsoft community portal for Surface
Where to go Next
Books
Windows Presentation Foundation
Unleashed (WPF)
by Adam Nathan, Daniel Lehenbauer
Essential Windows Presentation
Foundation (WPF)
by Chris Anderson
Silverlight In Action
by Chad Campbell and
John Stockton
Where to go…soon…
• Windows Presentation
Foundation
A Scenario-Based Approach
by Billy
Hollis
• “Early April…I hope…”
B. Hollis, 12/7/07
• “October…”
B. Hollis, 6/3/08
• “It’s not going to be done in April.”
B. Hollis, 2/24/09
• “I took a .NET 4.0 dependency.
Projected date now Jan 2010,
because it can’t come out until
VS2010 is released.”
• B. Hollis, 4/29/09
Where to go next :
The InterKnowlogy WPF & Silverlight Reference Applications
Tim Huckaby, InterKnowlogy
• More info on InterKnowlogy:
 www.InterKnowlogy.com
• Contact me: Tim Huckaby
 E-mail: [email protected]
 Phone: 760-444-8640
 Blog: http://team.interknowlogy.com/blogs/timhuckaby
• About Tim Huckaby









CEO, InterKnowlogy
Microsoft® Regional Director – Southern California
Microsoft® .NET Partner Advisory Council Founder / Member
Microsoft® MVP - .NET
Microsoft® Surface Partner Advisory Council
INETA Speaker – International .NET Users Group Association
Windows and .NET Magazine Advisory Board Member
.NET Developers Journal Magazine Advisory Board Member
Author / Speaker