SlideShare a Scribd company logo
Composite Applications with WPF and PRISM Eyal Vardi CEO E4D Solutions LTD Microsoft MVP Visual C# blog: www.eVardi.com
About ,[object Object],[object Object],[object Object]
Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
SKETCH  FLOW
 
PHOTOSHOP
POWERPOINT
Blend
Designer-Developer Productivity Designers design ,[object Object],Developers add business logic
Control Customization ,[object Object],[object Object],Style Control
Theme & Skin Cosmopolitan JetPack Windows7
Style Control Sample
Designer Outputs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
MOCKUP
Visual State Manager
State ,[object Object],[object Object],< VisualStateManager.VisualStateGroups > < VisualStateGroup  x : Name =&quot;CommonStates&quot;> < VisualState  x : Name =&quot;Normal&quot;/> < VisualState  x : Name =&quot;MouseOver&quot; /> < VisualState  x : Name =&quot;Pressed&quot; /> < VisualState  x : Name =&quot;Disabled&quot; /> </ VisualStateGroup > </ VisualStateManager.VisualStateGroups >
State Group ,[object Object]
Transitions ,[object Object],< VisualStateManager.VisualStateGroups > < VisualStateGroup  x : Name =&quot;CommonStates&quot;>    < VisualStateGroup.Transitions >   < VisualTransition  GeneratedDuration =&quot;0:0:0.5&quot;/> < VisualTransition  To =&quot;MouseOver&quot;  GeneratedDuration =&quot;0:0:0.5&quot;/> < VisualTransition  From =&quot;MouseOver&quot;  GeneratedDuration =&quot;0:0:0.5&quot;/> < VisualTransition  From =&quot;MouseOver&quot;  To =&quot;Pressed&quot;  ... /> </ VisualStateGroup.Transitions >  </ VisualStateGroup > </ VisualStateManager.VisualStateGroups >
Transitions < VisualStateManager.VisualStateGroups > < VisualStateGroup  x : Name =&quot;CommonStates&quot;>   < VisualStateGroup.Transitions >   < VisualTransition  To =&quot;MouseOver&quot;  GeneratedDuration =&quot;0:0:0.5&quot;/> </ VisualStateGroup.Transitions > < VisualState  x : Name =&quot;Normal&quot;/> < VisualState  x : Name =&quot;MouseOver&quot; /> < VisualState  x : Name =&quot;Pressed&quot; /> < VisualState  x : Name =&quot;Disabled&quot; /> </ VisualStateGroup > ... </ VisualStateManager.VisualStateGroups >
Visual State Manager In XAML
TemplateVisualState Attribute ,[object Object],[object Object],[ TemplateVisualState (Name= &quot;Normal&quot;  , GroupName= &quot;CommonStates&quot; )] [ TemplateVisualState (Name= &quot;MouseOver&quot; , GroupName= &quot;CommonStates&quot; )] [ TemplateVisualState (Name= &quot;Pressed&quot;  , GroupName= &quot;CommonStates&quot; )] public   class   NumericUpDown  :  Control } {
Initiating State Changes ,[object Object],private   void  GoToState( bool  useTransitions) } if  (isPressed) VisualStateManager .GoToState( this ,  &quot;Pressed&quot;  , useTransitions); else   if  (isMouseOver) VisualStateManager .GoToState( this ,  &quot;MouseOver&quot; , useTransitions); else VisualStateManager .GoToState( this ,  &quot;Normal“  , useTransitions); {
Weather Control
Triggers, Actions & Behaviors
Action Way < Button   Content =&quot;Click Me&quot;>      < Button.Triggers >         < EventTrigger   RoutedEvent =&quot;Click&quot;>           < EventTrigger.Actions >             < BeginStoryboard   Storyboard =&quot;{StaticResource sbSpin}&quot;/>           </ EventTrigger.Actions >        </ EventTrigger > < MultiTrigger > < MultiTrigger.Conditions > < Condition   Property =&quot;IsMouseOver&quot;  Value =&quot;True&quot; /> < Condition   Property =&quot;Content&quot;  Value =&quot;{x:Null}&quot; /> </ MultiTrigger.Conditions > < Setter   Property =&quot;Background&quot;  Value =&quot;Yellow&quot; /> </ MultiTrigger >      </ Button.Triggers >  </ Button > < Button   Content =&quot;Click Me&quot;>      < i:Interaction.Triggers > < i:EventTrigger   EventName =&quot;Click&quot;> < E4D:MyAction   TargetName =&quot;lbTrace&quot; /> </ i:EventTrigger > </ i:Interaction.Triggers > </ Button > public class  MyAction  :  TargetedTriggerAction<DependencyObject > { public   MyAction () { ... } protected   override   void  Invoke( object  o) { ... } }
Action
Trigger  ( When ) ,[object Object],[object Object],[object Object],[object Object],[object Object]
Timer Trigger Sample public class  TimerTrigger  :  TriggerBase<DependencyObject > { public   TimeSpan  Interval {  get ;  set ; }  protected   override   void  OnAttached()  {  timer = new DispatcherTimer();  timer.Interval = Interval;  timer.Tick += OnTick; timer.Start();  }  void   OnTick(object  sender,  EventArgs  e)  {  this.InvokeActions(null);  }  protected   override   void  OnDetaching()  {  timer.Tick -= OnTick; timer = null;  }  DispatcherTimer  timer; }
Custom Trigger
Behavior ,[object Object]
Behavior with Command public class  MethodBehavior  :  Behavior<DependencyObject > { public   ICommand  Command {  get ;  set ; }  public  MethodBehavior()  {  Command = new ActionCommand( MyMethod ); }  private void  MyMethod()  {  // TODO: } } ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Behaviors
FULL MOCKUP
Prism 2010
Why Composite WPF? ,[object Object],[object Object],[object Object]
UI Module  Structure  ( MVVM )
Prism Quick Start (David Hill)
Prism & WCF Request Response Communication UI Shell
Prism & Notification Communication UI Shell Notification
Prism & Behaviors Request Communication UI Shell Response Notification B
FINISH

More Related Content

Similar to Composite Applications with WPF and PRISM

Разработка приложений для Android Honeycomb: ActionBar & Fragments
Разработка приложений для Android Honeycomb: ActionBar & FragmentsРазработка приложений для Android Honeycomb: ActionBar & Fragments
Разработка приложений для Android Honeycomb: ActionBar & FragmentsAlexey Ustenko
 
21 android2 updated
21 android2 updated21 android2 updated
21 android2 updated
GhanaGTUG
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
davejohnson
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Final
ematrix
 
Lessons Learned: Migrating Tests to Selenium v2
Lessons Learned: Migrating Tests to Selenium v2Lessons Learned: Migrating Tests to Selenium v2
Lessons Learned: Migrating Tests to Selenium v2
rogerjhu1
 
Developing and testing ajax components
Developing and testing ajax componentsDeveloping and testing ajax components
Developing and testing ajax components
Ignacio Coloma
 
Mashups as Collection of Widgets
Mashups as Collection of WidgetsMashups as Collection of Widgets
Mashups as Collection of Widgetsgiurca
 
Alfresco Forms Service Deep Dive
Alfresco Forms Service Deep DiveAlfresco Forms Service Deep Dive
Alfresco Forms Service Deep Dive
Alfresco Software
 
jQuery for Sharepoint Dev
jQuery for Sharepoint DevjQuery for Sharepoint Dev
jQuery for Sharepoint Dev
Zeddy Iskandar
 
jQuery : Events are where it happens!
jQuery : Events are where it happens!jQuery : Events are where it happens!
jQuery : Events are where it happens!Wildan Maulana
 
CRUD with Dojo
CRUD with DojoCRUD with Dojo
CRUD with Dojo
Eugene Lazutkin
 
Ajax ons2
Ajax ons2Ajax ons2
Ajax ons2
Chad Davis
 
jBPM5 in action - a quickstart for developers
jBPM5 in action - a quickstart for developersjBPM5 in action - a quickstart for developers
jBPM5 in action - a quickstart for developers
Kris Verlaenen
 
ASP.NET 02 - How ASP.NET Works
ASP.NET 02 - How ASP.NET WorksASP.NET 02 - How ASP.NET Works
ASP.NET 02 - How ASP.NET Works
Randy Connolly
 
Plone Interactivity
Plone InteractivityPlone Interactivity
Plone Interactivity
Eric Steele
 
Developing in android
Developing in androidDeveloping in android
Developing in android
Christopher Decker
 
Solr and symfony in Harmony with SolrJs
Solr and symfony in Harmony with SolrJsSolr and symfony in Harmony with SolrJs
Solr and symfony in Harmony with SolrJsWildan Maulana
 
Struts2
Struts2Struts2
Struts2
yuvalb
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
franksvalli
 

Similar to Composite Applications with WPF and PRISM (20)

Разработка приложений для Android Honeycomb: ActionBar & Fragments
Разработка приложений для Android Honeycomb: ActionBar & FragmentsРазработка приложений для Android Honeycomb: ActionBar & Fragments
Разработка приложений для Android Honeycomb: ActionBar & Fragments
 
21 android2 updated
21 android2 updated21 android2 updated
21 android2 updated
 
JavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern ImplementationJavaScript and DOM Pattern Implementation
JavaScript and DOM Pattern Implementation
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Final
 
Lessons Learned: Migrating Tests to Selenium v2
Lessons Learned: Migrating Tests to Selenium v2Lessons Learned: Migrating Tests to Selenium v2
Lessons Learned: Migrating Tests to Selenium v2
 
WPF Controls
WPF ControlsWPF Controls
WPF Controls
 
Developing and testing ajax components
Developing and testing ajax componentsDeveloping and testing ajax components
Developing and testing ajax components
 
Mashups as Collection of Widgets
Mashups as Collection of WidgetsMashups as Collection of Widgets
Mashups as Collection of Widgets
 
Alfresco Forms Service Deep Dive
Alfresco Forms Service Deep DiveAlfresco Forms Service Deep Dive
Alfresco Forms Service Deep Dive
 
jQuery for Sharepoint Dev
jQuery for Sharepoint DevjQuery for Sharepoint Dev
jQuery for Sharepoint Dev
 
jQuery : Events are where it happens!
jQuery : Events are where it happens!jQuery : Events are where it happens!
jQuery : Events are where it happens!
 
CRUD with Dojo
CRUD with DojoCRUD with Dojo
CRUD with Dojo
 
Ajax ons2
Ajax ons2Ajax ons2
Ajax ons2
 
jBPM5 in action - a quickstart for developers
jBPM5 in action - a quickstart for developersjBPM5 in action - a quickstart for developers
jBPM5 in action - a quickstart for developers
 
ASP.NET 02 - How ASP.NET Works
ASP.NET 02 - How ASP.NET WorksASP.NET 02 - How ASP.NET Works
ASP.NET 02 - How ASP.NET Works
 
Plone Interactivity
Plone InteractivityPlone Interactivity
Plone Interactivity
 
Developing in android
Developing in androidDeveloping in android
Developing in android
 
Solr and symfony in Harmony with SolrJs
Solr and symfony in Harmony with SolrJsSolr and symfony in Harmony with SolrJs
Solr and symfony in Harmony with SolrJs
 
Struts2
Struts2Struts2
Struts2
 
Mobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScriptMobile HTML, CSS, and JavaScript
Mobile HTML, CSS, and JavaScript
 

More from Eyal Vardi

Why magic
Why magicWhy magic
Why magic
Eyal Vardi
 
Smart Contract
Smart ContractSmart Contract
Smart Contract
Eyal Vardi
 
Rachel's grandmother's recipes
Rachel's grandmother's recipesRachel's grandmother's recipes
Rachel's grandmother's recipes
Eyal Vardi
 
Performance Optimization In Angular 2
Performance Optimization In Angular 2Performance Optimization In Angular 2
Performance Optimization In Angular 2
Eyal Vardi
 
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
Eyal Vardi
 
Angular 2 NgModule
Angular 2 NgModuleAngular 2 NgModule
Angular 2 NgModule
Eyal Vardi
 
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.xUpgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.x
Eyal Vardi
 
Angular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time CompilationAngular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time Compilation
Eyal Vardi
 
Routing And Navigation
Routing And NavigationRouting And Navigation
Routing And Navigation
Eyal Vardi
 
Angular 2 Architecture
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 Architecture
Eyal Vardi
 
Angular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.xAngular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.x
Eyal Vardi
 
Angular 2.0 Views
Angular 2.0 ViewsAngular 2.0 Views
Angular 2.0 Views
Eyal Vardi
 
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
Eyal Vardi
 
Template syntax in Angular 2.0
Template syntax in Angular 2.0Template syntax in Angular 2.0
Template syntax in Angular 2.0
Eyal Vardi
 
Http Communication in Angular 2.0
Http Communication in Angular 2.0Http Communication in Angular 2.0
Http Communication in Angular 2.0
Eyal Vardi
 
Angular 2.0 Dependency injection
Angular 2.0 Dependency injectionAngular 2.0 Dependency injection
Angular 2.0 Dependency injection
Eyal Vardi
 
Angular 2.0 Routing and Navigation
Angular 2.0 Routing and NavigationAngular 2.0 Routing and Navigation
Angular 2.0 Routing and Navigation
Eyal Vardi
 
Async & Parallel in JavaScript
Async & Parallel in JavaScriptAsync & Parallel in JavaScript
Async & Parallel in JavaScript
Eyal Vardi
 
Angular 2.0 Pipes
Angular 2.0 PipesAngular 2.0 Pipes
Angular 2.0 Pipes
Eyal Vardi
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 forms
Eyal Vardi
 

More from Eyal Vardi (20)

Why magic
Why magicWhy magic
Why magic
 
Smart Contract
Smart ContractSmart Contract
Smart Contract
 
Rachel's grandmother's recipes
Rachel's grandmother's recipesRachel's grandmother's recipes
Rachel's grandmother's recipes
 
Performance Optimization In Angular 2
Performance Optimization In Angular 2Performance Optimization In Angular 2
Performance Optimization In Angular 2
 
Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)Angular 2 Architecture (Bucharest 26/10/2016)
Angular 2 Architecture (Bucharest 26/10/2016)
 
Angular 2 NgModule
Angular 2 NgModuleAngular 2 NgModule
Angular 2 NgModule
 
Upgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.xUpgrading from Angular 1.x to Angular 2.x
Upgrading from Angular 1.x to Angular 2.x
 
Angular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time CompilationAngular 2 - Ahead of-time Compilation
Angular 2 - Ahead of-time Compilation
 
Routing And Navigation
Routing And NavigationRouting And Navigation
Routing And Navigation
 
Angular 2 Architecture
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 Architecture
 
Angular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.xAngular 1.x vs. Angular 2.x
Angular 1.x vs. Angular 2.x
 
Angular 2.0 Views
Angular 2.0 ViewsAngular 2.0 Views
Angular 2.0 Views
 
Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0Component lifecycle hooks in Angular 2.0
Component lifecycle hooks in Angular 2.0
 
Template syntax in Angular 2.0
Template syntax in Angular 2.0Template syntax in Angular 2.0
Template syntax in Angular 2.0
 
Http Communication in Angular 2.0
Http Communication in Angular 2.0Http Communication in Angular 2.0
Http Communication in Angular 2.0
 
Angular 2.0 Dependency injection
Angular 2.0 Dependency injectionAngular 2.0 Dependency injection
Angular 2.0 Dependency injection
 
Angular 2.0 Routing and Navigation
Angular 2.0 Routing and NavigationAngular 2.0 Routing and Navigation
Angular 2.0 Routing and Navigation
 
Async & Parallel in JavaScript
Async & Parallel in JavaScriptAsync & Parallel in JavaScript
Async & Parallel in JavaScript
 
Angular 2.0 Pipes
Angular 2.0 PipesAngular 2.0 Pipes
Angular 2.0 Pipes
 
Angular 2.0 forms
Angular 2.0 formsAngular 2.0 forms
Angular 2.0 forms
 

Composite Applications with WPF and PRISM

  • 1. Composite Applications with WPF and PRISM Eyal Vardi CEO E4D Solutions LTD Microsoft MVP Visual C# blog: www.eVardi.com
  • 2.
  • 3.
  • 5.  
  • 9.
  • 10.
  • 11. Theme & Skin Cosmopolitan JetPack Windows7
  • 13.
  • 16.
  • 17.
  • 18.
  • 19. Transitions < VisualStateManager.VisualStateGroups > < VisualStateGroup x : Name =&quot;CommonStates&quot;> < VisualStateGroup.Transitions > < VisualTransition To =&quot;MouseOver&quot; GeneratedDuration =&quot;0:0:0.5&quot;/> </ VisualStateGroup.Transitions > < VisualState x : Name =&quot;Normal&quot;/> < VisualState x : Name =&quot;MouseOver&quot; /> < VisualState x : Name =&quot;Pressed&quot; /> < VisualState x : Name =&quot;Disabled&quot; /> </ VisualStateGroup > ... </ VisualStateManager.VisualStateGroups >
  • 21.
  • 22.
  • 24. Triggers, Actions & Behaviors
  • 25. Action Way < Button Content =&quot;Click Me&quot;>     < Button.Triggers >       < EventTrigger RoutedEvent =&quot;Click&quot;>         < EventTrigger.Actions >           < BeginStoryboard Storyboard =&quot;{StaticResource sbSpin}&quot;/>         </ EventTrigger.Actions >       </ EventTrigger > < MultiTrigger > < MultiTrigger.Conditions > < Condition Property =&quot;IsMouseOver&quot; Value =&quot;True&quot; /> < Condition Property =&quot;Content&quot; Value =&quot;{x:Null}&quot; /> </ MultiTrigger.Conditions > < Setter Property =&quot;Background&quot; Value =&quot;Yellow&quot; /> </ MultiTrigger >     </ Button.Triggers > </ Button > < Button Content =&quot;Click Me&quot;>     < i:Interaction.Triggers > < i:EventTrigger EventName =&quot;Click&quot;> < E4D:MyAction TargetName =&quot;lbTrace&quot; /> </ i:EventTrigger > </ i:Interaction.Triggers > </ Button > public class MyAction : TargetedTriggerAction<DependencyObject > { public MyAction () { ... } protected override void Invoke( object o) { ... } }
  • 27.
  • 28. Timer Trigger Sample public class TimerTrigger : TriggerBase<DependencyObject > { public TimeSpan Interval { get ; set ; } protected override void OnAttached() { timer = new DispatcherTimer(); timer.Interval = Interval; timer.Tick += OnTick; timer.Start(); } void OnTick(object sender, EventArgs e) { this.InvokeActions(null); } protected override void OnDetaching() { timer.Tick -= OnTick; timer = null; } DispatcherTimer timer; }
  • 30.
  • 31.
  • 35.
  • 36. UI Module Structure ( MVVM )
  • 37. Prism Quick Start (David Hill)
  • 38. Prism & WCF Request Response Communication UI Shell
  • 39. Prism & Notification Communication UI Shell Notification
  • 40. Prism & Behaviors Request Communication UI Shell Response Notification B

Editor's Notes

  1. If user experience matters, design matters. If design matters, designers matter. If designers matter, we need to make designers first class citizens of the traditional software development process. Let’s talk about how Microsoft is unlocking Developer and Designer collaboration and is empowering them to create successful UX software applications. 1) Traditionally designers would “mockup” the graphic design for a software application. Then by any means possible designers would deliver this “looks” to the developer… they would use JPG images, PNGs, PSDs or even Powerpoint presentations to express the designer intention. Then the developer would receive this “static images” and would try to convert that into reality. If the designer created some “non standard” controls, the developer was forced to code in GDI+ or other complex technologies to create the control raising the time and budget to such level that it was simply better to take the decision of making the UI more “standard”. The developer trying to recreate the idea of the designer would deliver something like what is shown on the right side of the screen. As you can see it represents only a tiny bit of the original vision. 2) In order to enable the collaboration between developers and designers, Microsoft has created XAML. XAML is the format which integrates the development process and is the way for both developers and designers to access the functionalities of WPF. As you can see we have no middle man anymore. XAML is generated by the designer, XAML is consumed by the developer. Further more, the workflow is now two-way meaning that the development process can also start from the developer side who creates XAML and then delivers this XAML to the designer which can take it and style it or completely redesign its appearance. 3) As a brief sample this are the tools that enable this kind of process: On the designer side we have Expression and on the Developer side we have Visual Studio.