Composite Applications with WPF and PRISM

Composite Composite Applications with Applications withWPF and PRISMWPF and PRISM

Eyal VardiEyal VardiCEO E4D Solutions LTDCEO E4D Solutions LTDMicrosoft MVP Visual C#Microsoft MVP Visual C#blog: www.eVardi.comblog: www.eVardi.com

© 2010 E4D LTD. All rights reserved. Tel: 054-5-767-300, Email: [email protected]

AboutAbout ConsultingConsulting MentoringMentoring ProjectsProjects

http://www.e4d.co.il/


AgendaAgenda Part IPart I

Microsoft Expression Blend 4Microsoft Expression Blend 4 Styles ControlsStyles Controls Visual State Manager & AnimationsVisual State Manager & Animations Commands & Behaviors Commands & Behaviors MVVM PatternMVVM Pattern

Part IIPart II What is PRISM?What is PRISM?

Region & ViewsRegion & Views ModulesModules Pub / SubPub / Sub

PRISM & WCFPRISM & WCF


SKETCH SKETCH FLOWFLOW



PHOTOSHOPPHOTOSHOP


POWERPOINTPOWERPOINT


BlendBlend


Designer-Developer Designer-Developer ProductivityProductivity

Designers designDesigners design

With XAML designers & With XAML designers &

developers can streamline developers can streamline

their collaborationtheir collaboration

Developers add business logicDevelopers add business logic


Control CustomizationControl Customization

WPF controls are typically WPF controls are typically notnot directly directly responsible for their own responsible for their own appearanceappearance

WPF controls can have WPF controls can have nested contentnested content, style , style and templatesand templates

Pay for Play Customization :Rich Content, Visual Styling , Built for a new Platform

Prop-erties

Custom Control

Style ControlStyle Control


Theme & SkinTheme & SkinCosmopolitanCosmopolitanJetPackJetPack Windows7Windows7

http://www.silverlight.net/content/samples/sl4/themes/cosmopolitan.html

http://www.silverlight.net/content/samples/sl4/themes/jetpack.html

http://www.silverlight.net/content/samples/sl4/themes/windows7.html


Style Control SampleStyle Control Sample


Designer OutputsDesigner Outputs

Primitive ResourcePrimitive Resource ColorsColors FontsFonts Images & PicturesImages & Pictures AnimationsAnimations

Styles ControlsStyles Controls

ScreensScreens

ThemesThemes


MOCKUPMOCKUP


Visual State ManagerVisual State Manager


StateState

Visual states are the way the control appears Visual states are the way the control appears in a particular state.in a particular state.

Each control has a number of "States" - Each control has a number of "States" - determined by the designer of the control. determined by the designer of the control.

<Vi sual St at eManager. Vi sual St at eGroups> <Vi sual St at eGroup x: Name=" CommonSt at es" > <Vi sual St at e x: Name=" Normal " / > <Vi sual St at e x: Name=" MouseOver" / > <Vi sual St at e x: Name=" Pressed" / > <Vi sual St at e x: Name=" Di sabl ed" / > </ Vi sual St at eGroup></ Vi sual St at eManager. Vi sual St at eGroups>


State GroupState Group

Control can be in 2 different states as long as Control can be in 2 different states as long as each of those states are in a different state each of those states are in a different state group.group.


TransitionsTransitions Visual transitions represent the way the Visual transitions represent the way the

control looks as it transitions from one visual control looks as it transitions from one visual state to another.state to another.

<Vi sual St at eManager. Vi sual St at eGroups> <Vi sual St at eGroup x: Name=" CommonSt at es" > <Vi sual St at eGroup. Transi t i ons> <Vi sual Transi t i on Generat edDurat i on=" 0: 0: 0. 5" / > <Vi sual Transi t i on To=" MouseOver" Generat edDurat i on=" 0: 0: 0. 5" / > <Vi sual Transi t i on From=" MouseOver" Generat edDurat i on=" 0: 0: 0. 5" / > <Vi sual Transi t i on From=" MouseOver" To=" Pressed" . . . / > </ Vi sual St at eGroup. Transi t i ons> </ Vi sual St at eGroup></ Vi sual St at eManager. Vi sual St at eGroups>


TransitionsTransitions

<Vi sual St at eManager. Vi sual St at eGroups> <Vi sual St at eGroup x: Name=" CommonSt at es" > <Vi sual St at eGroup. Transi t i ons> <Vi sual Transi t i on To=" MouseOver" Generat edDurat i on=" 0: 0: 0. 5" / > </ Vi sual St at eGroup. Transi t i ons> <Vi sual St at e x: Name=" Normal " / > <Vi sual St at e x: Name=" MouseOver" / > <Vi sual St at e x: Name=" Pressed" / > <Vi sual St at e x: Name=" Di sabl ed" / > </ Vi sual St at eGroup> . . .</ Vi sual St at eManager. Vi sual St at eGroups>


Visual State ManagerVisual State ManagerIn XAMLIn XAML


TemplateVisualState AttributeTemplateVisualState Attribute

Inform template authors what states the Inform template authors what states the control can be in.control can be in.

Authors add Authors add VisualStateVisualState objects to the objects to the template to specify the appearance of a template to specify the appearance of a control when it is in a certain state.control when it is in a certain state.

[ Templ at eVi sual St at e(Name=" Normal " , GroupName=" CommonSt at es" ) ][ Templ at eVi sual St at e(Name=" MouseOver" , GroupName=" CommonSt at es" ) ][ Templ at eVi sual St at e(Name=" Pressed" , GroupName=" CommonSt at es" ) ]publ i c cl ass Numer i cUpDown : Cont rol } {


Initiating State ChangesInitiating State Changes

The authors is responsible for telling The authors is responsible for telling VisualStateManager when a visual state VisualStateManager when a visual state change should occur.change should occur.

pr i vat e voi d GoToSt at e(bool useTransi t i ons) } i f ( i sPressed) Vi sual St at eManager. GoToSt at e( t hi s, " Pressed" , useTransi t i ons) ; el se i f ( i sMouseOver) Vi sual St at eManager. GoToSt at e( t hi s, " MouseOver" , useTransi t i ons) ; el se Vi sual St at eManager. GoToSt at e( t hi s, " Normal “ , useTransi t i ons) ; {


Weather ControlWeather Control


Triggers, Actions & BehaviorsTriggers, Actions & Behaviors


Action WayAction Way<But t on Cont ent =" Cl i ck Me" > <But t on. Tr i ggers>

<Event Tr i gger Rout edEvent =" Cl i ck" > <Event Tr i gger. Act i ons> <Begi nSt oryboard St oryboard=" {St at i cResource sbSpi n} " / > </ Event Tr i gger. Act i ons> </ Event Tr i gger>

<Mul t i Tr i gger> <Mul t i Tr i gger. Condi t i ons> <Condi t i on Propert y=" I sMouseOver" Val ue=" True" / > <Condi t i on Propert y=" Cont ent " Val ue=" { x: Nul l } " / > </ Mul t i Tr i gger. Condi t i ons> <Set t er Propert y=" Background" Val ue=" Yel l ow" / > </ Mul t i Tr i gger> </ But t on. Tr i ggers> </ But t on>

<But t on Cont ent =" Cl i ck Me" > <E4D: MyAct i on Target Name=" l bTrace" / > 

</ But t on>

publ i c cl ass MyAct i on : Target edTr i ggerAct i on<DependencyObj ect >{ publ i c MyAct i on( ) { . . . }

prot ect ed overr i de voi d I nvoke(obj ect o) { . . . }}


ActionAction


Trigger Trigger ( When )( When )

Invokes a bunch of actions at a point when it Invokes a bunch of actions at a point when it decides to do that.decides to do that. Event TriggerEvent Trigger Timer TriggerTimer Trigger Size TriggerSize Trigger

The Attach & Detach connect toThe Attach & Detach connect tothe target.the target.


Timer Trigger SampleTimer Trigger Samplepubl i c cl ass Ti merTr i gger : Tr i ggerBase<DependencyObj ect >{ publ i c Ti meSpan I nt erval { get ; set ; }

prot ect ed overr i de voi d OnAt t ached( ) { t i mer = new Di spat cherTi mer( ) ; t i mer. I nt erval = I nt erval ; t i mer. Ti ck += OnTi ck; t i mer. St art ( ) ; }

voi d OnTi ck( obj ect sender, Event Args e) { t hi s. I nvokeAct i ons(nul l ) ; }

prot ect ed overr i de voi d OnDet achi ng( ) { t i mer. Ti ck -= OnTi ck; t i mer = nul l ; } Di spat cherTi mer t i mer;}


Custom TriggerCustom Trigger


BehaviorBehavior

Behavior Behavior don’t need don’t need the “the “WhenWhen” ( Trigger ),” ( Trigger ),and and don’t have don’t have the the I nvokeI nvoke ..


Behavior with CommandBehavior with Commandpubl i c cl ass Met hodBehavi or : Behavi or<DependencyObj ect >{ publ i c I Command Command { get ; set ; }

publ i c Met hodBehavi or( ) {

Command = new Act i onCommand( MyMet hod ) ; }

pr i vat e voi d MyMet hod( ) { / / TODO: }}

<But t on Cont ent =" Cl i ck Me“> <E4D: Met hodBehavi or>

 

</ E4D: Met hodBehavi or>

</ But t on>


BehaviorsBehaviors


FULL FULL MOCKUPMOCKUP


Prism 2010Prism 2010


Why Composite WPF?Why Composite WPF?

Modul ar i t yModul ar i t yDevelopment of applications by using Development of applications by using independent, but collaborating, modules.independent, but collaborating, modules.

Pr oduc t i vi t yPr oduc t i vi t yDeveloper (or team) is able to concentrate on Developer (or team) is able to concentrate on a specific task.a specific task.

Ext e ns i bi l i t yExt e ns i bi l i t yAllows you to replace the behaviors and Allows you to replace the behaviors and strategies provided as defaults strategies provided as defaults


UI Module UI Module Structure Structure ( MVVM )( MVVM )


Prism Quick StartPrism Quick Start(David Hill)(David Hill)


Prism & WCFPrism & WCF

RequestRequestUI ShellUI Shell

ResponseResponse

Com

munication

Com

munication


Prism & NotificationPrism & Notification

UI ShellUI Shell NotificationNotification

Com

munication

Com

munication


Prism & BehaviorsPrism & Behaviors

RequestRequest

UI ShellUI Shell

ResponseResponse

Com

munication

Com

munication NotificationNotification

BB


FINISHFINISH

Documents

Composite Applications with WPF and PRISM