Architecting WPF

Applications
Paul Stovell
Senior Consultant
WPF Technical Specialist
Readify

Agenda

WPF Overview
Inductive vs. Deductive UI
Navigation
Presentation Patterns
Composition
Inter-view Communication
Dependency Injection
Partitioning
Leveraging XAML
Performance Considerations

WPF Overview

Unified Presentation

Interactiv
e UI
controls

GDI/Windo
ws Forms

COM
Interop

Flash

DirectX

3D
Animatio
n

WPF

Documen
ts

Video

PDF

Web or Windows?
Windows

Intranet
Internet

Windows
Forms

Silverligh
t
Java

WPF

Java
Applets

WPF
XBAP

ASP.NET

AJAX

XBAP

XBAP

WPF Releases

.NET
.NET
.NET
.NET

Framework 3.0
Framework 3.5
Framework 3.5 Service Pack 1
Framework 4.0

Inductive vs. Deductive

Deductive UI

Deductive UI

Inductive UI

Inductive UI

Inductive vs. Deductive

Why does it matter?
UI composition Patterns
Navigation Patterns
Service Layer

ChangeAddress vs. SaveCustomer

DataGri
d

Navigation

Linked List

Page 1

Page 2

Page 3

Page 4

Centralized Decisions
Navigation Handler

Page
1

Page
2

Page
3

Page
4

Presentation Patterns

Presentation Patterns

Model-View-ViewModel

Model-View-Presenter

aka Presentation Model

aka Supervising Controller

Model-View-Controller

Model View ViewModel

Model
Change Address View

Change Address
ViewModel

Customer

Accounts

Address

Model View ViewModel

(Wrapped)

Change Address View

Change Address
ViewModel

Customer VM

View
Model

Account VM

Address VM

Model
Customer

Account

Address

Model View Presenter

Model
Change Address View

Customer

IChangeAddressView
IChangeAddressView

Change Address
Presenter

Accounts

Address

Model View Presenter with

VM
Model

Change Address
View

IChangeAddressView
IChangeAddressView

Change Address
Presenter

Behaviour

Customer
Change
Address
ViewMode
l
Accounts

State

Address

Model View Controller

View 1
Model 1

Nav
Request

View 2
Controller
Model 2

View 3
Model 3

Presentation Patterns
Things to consider:
Does every view need separated
presentation?
Does every view need to follow the
same pattern?
Code Behind isnt Evil (DataGrids are)
MVPoo

UI Composition

Model-based Composition
Recent Orders ViewModel

Search
Search
ViewModel

Weather
ViewModel

Weather

Order List

UI-based Composition
Bottom-Up
2. Place
Navigatio
n
1. Resolve

Search

Weather

Top
Region
Bottom
Region

Order List

UI-based Composition
Top-Down
Top
Region

Order List

Bottom
Region

Search

Weather

Inter-View
Communication

Inter-View Communication
Standard .NET events
1. Child model raises
event
2. Parent model
forwards event

Search Model

Criteria
Model

Results
Model

Inter-View Communication
Event Aggregator

Publish

Criteria Model

Publish

Recent
Searches
Model

hub

Handle

Results
Model

Handle

Advert
Model

Event Aggregator
Advantages:
Automatic thread switching
Weak events
Hook for cross-cutting concerns

Dependency Injection

Dependency Injection

Partitioning

Partitioning
Splitting partitions:
By SKU
By feature
By team
By department

Partitioning
Managing partitions:
With solutions
With projects
With assemblies

Partitioning
Resolving:
Hard-coded
Config
Discovery

Partitioning
Also consider:
Deployment and patching
Inter-partition dependencies
Dev time vs. build time partitioning

Partitioning
Remember: assemblies are like
water

necessary for life

but too much can kill yo

Leveraging XAML

Abstractions
<Grid>
<Grid>
<..>
<..>
<Label
<Label
Grid.Row="0"
Grid.Row="0" Grid.Column="0"
Grid.Column="0"
Content="First
Content="First Name:"
Name:"
Target="{Binding
Target="{Binding ElementName=FirstNameTextBox}"
ElementName=FirstNameTextBox}"
/>
/>
<TextBox
<TextBox
Grid.Row="0"
Grid.Row="0" Grid.Column="1"
Grid.Column="1"
Name="FirstNameTextBox"
Name="FirstNameTextBox"
Text="{Binding
Text="{Binding Path=FirstName}"
Path=FirstName}"
/>
/>
</Grid>
</Grid>

<Form>
<Field
<Field
<Field
</Form>

For="{Binding
For="{Binding
For="{Binding

Path=FirstName}" />
Path=LastName}" />
Path=EmailAddress}" />

Consistency
<TextBlock
Foreground="Red"
Text="Please enter..."
/>

<TextBlock
Foreground="{StaticResource Color.Bad}"
Text="Please enter..."
/>

Style Catalogues
<TextBox
<TextBox
<TextBox

<TextBox
<TextBox
<TextBox

Width="300"
Width="156"
Width="215"

.../>
.../>
.../>

Style="{StaticResource
Style="{StaticResource
Style="{StaticResource

TextBox.Big}" />
TextBox.Small}" />
TextBox.Medium}" />

Behaviours
Consider this:
Developers don't
write code; they build
tools for designers

Performance
Considerations

Performance Considerations
1.
2.
3.
4.
5.

Retained scene vs. Immediate Mode

Virtualization (data and UI)
Memory leaks
Third party components
Performance test from day 1

Q&A

Links:

http://www.codeplex.com/CompositeWPF
http://magellan.codeplex.com
http://www.galasoft.ch/mvvm/getstarted/
http://caliburn.codeplex.com
Paul Stovell
paul@paulstovell.com
www.paulstovell.com