Wpf training & surface sdk 2.0 controls

1,798
-1

Published on

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,798
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Wpf training & surface sdk 2.0 controls

  1. 1. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - FranceWPFTrainingSurface SDK 2.0 Controls@ : serge.calderara@Solatys.comWindows Presentation Foundation&Surface SDK 2.0 ControlsTraining
  2. 2. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsTraining Outline• Introduction• Module 1 : WPF Concept & Fundamentals• Module 2 : Building a WPF Application• Module 3 : Resources• Module 4 : Data Binding• Module 5 : Template & Style• Module 6 : MVVM pattern
  3. 3. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsIntroductionToolsVS2010 and above Microsoft BlendAdobe Illustrator Adobe Photoshop
  4. 4. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsIntroductionDevelopment WorkflowCustomerEngineerDesignerDeveloperTester123521 Elicit requirement2 Create and validate UI prototype3 Implement Business Logic andCreate Raw-User interface2 Integrate Graphical Design5 Unit test plan and integration test
  5. 5. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 1: WPF Concept & Fundamentals• Advantages of XAML• Properties as Elements• Markup Extension• Namespaces• Logical and Visual Tree• Routed Event• Routed Event Sample• Routed Events Implementation• WPF Input Events• EventSetters & EventTriggers• DependencyProperty resolution strategy
  6. 6. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 1: WPF Concept & FundamentalsAdvantages of XAML• Code is short and clear to read• Isolation of designer code andlogic• Graphical design tools likeExpression Blend require XAML assource.• Isolation of XAML and UI logicallows it to clearly separate theroles of designer and developerXAMLCode
  7. 7. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 1: WPF Concept & FundamentalsProperties as ElementsImplicit Type conversion
  8. 8. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsMarkup Extension• Dynamic placeholders for attribute values inXAML.• Resolve the value of a property at runtime?Module 1: WPF Concept & Fundamentals
  9. 9. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsNamespacesStandard WPF windowSurface WPF windowReferring a CLR Typexmlns:local="clr-namespace:MyTestApp.Controls;assembly =TestApp.Controls"Organizing your own namespaceModule 1: WPF Concept & Fundamentals
  10. 10. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 1: WPF Concept & FundamentalsLogical and Visual TreeLogical TreeVisual TreeWindowContentPresenter AdornerLayerGridLabel ButtonBorderContentPresenterImageBorderContentPresenterTextBlockElement TemplateDescribes the relations between elements of theuser interface.Responsible for:• Inherit DependencyProperty values• Resolving DynamicResources references• Looking up element names for bindings• Forwarding RoutedEventsResponsible for:• Rendering visual elements• Propagate element opacity• Propagate Layout- andRenderTransforms• Propagate the IsEnabledproperty.• Do Hit-Testing• RelativeSource( FindAncestor )BorderAdornerDecorator
  11. 11. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsAccessing Visual Tree Parent and ChildModule 1: WPF Concept & Fundamentals
  12. 12. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsRouted EventWindowContentPresenter AdornerLayerGridLabel ButtonBorderAdornerDecoratorTunneling BubblingDirectPreview…..Module 1: WPF Concept & Fundamentals
  13. 13. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 1: WPF Concept & FundamentalsRouted Event SampleRoot ElementEvent handlerYes No CancelWhat is the route ?
  14. 14. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 1: WPF Concept & FundamentalsSample scenarioRoot ElementEvent handlerWhat is happening if WPF do not provide Routed Event ?
  15. 15. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 1: WPF Concept & FundamentalsRouted Events ImplementationRoutedEvent class Event nameRegister nameRounting strategyEvent handler definitionRouting event registrationHandling condition
  16. 16. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 1: WPF Concept & FundamentalsWPF Input EventsPreviewTouchDownTouchDown1. PreviewTouchDown (tunnel) on root element2. PreviewTouchDown (tunnel) on intermediate element #13. PreviewTouchDown (tunnel) on source element #24. TouchDown (bubble) on source element #25. TouchDown (bubble) on intermediate element #16. TouchDown (bubble) on root element #1
  17. 17. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 1: WPF Concept & FundamentalsWPF Input Events : Promoting Touch Event to mouse eventsQ: How an application not design for touch can still respond tomouse event ?A: Primary Touch point is the key• The first detected touch input isdefined as the primary touch device• A new primary touch device isallocated only if all touch input hasbeen released from screenA native WPF button responds to touch. The touch events are unhandled, so WPFpromotes the events to mouse events. The button responds to the mouse eventand triggers a click action
  18. 18. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 1: WPF Concept & FundamentalsEventSetters & EventTriggersApplied only fromstyle
  19. 19. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 1: WPF Concept & FundamentalsDependencyProperty resolution strategy• Resolved dynamically whencalling the GetValue()• Value inheritance throughresolution strategy• Implement notificationmechanismBinding expressionLocal valueCustom style triggerCustom template triggerCustom style triggerDefault style triggerDefault style setterInherited valueDefault valueAnimationLocal valueGetValue()SetValue()
  20. 20. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsTIME FOR DEMO
  21. 21. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF application• Sizing – Positioning – Transforming• Layout with Panels• Content Overflow• WPF & Surface SDK 2.0 Control• WPF vs. Surface Application Entry
  22. 22. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationSizing – Positioning - TransformingHorizontalAlignementVerticalAlignementHeightWidthElementMarginPaddingContentFlowDirectionLayoutTransformRenderTransformMain child layout properties
  23. 23. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationSizing – Positioning - TransformingVisibility
  24. 24. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationSizing – Positioning - TransformingAlignment
  25. 25. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationSizing – Positioning - TransformingApplying TranformLayout TranformRender TranformTransform can be combineusing TransformGroupSampleRotateTransform• RotationTransform• ScaleTransform• SkewTransform• TranslateTransform
  26. 26. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationLayout with Panels(0,0)Button position using Canvas.Top, Canvas.Bottom,Canvas.Left, Canvas.Right propertiesCanvasButtons using both orientationStackPanelButtons automatically arrangedWrapPanelButtons arranged DockedDockPanel
  27. 27. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationLayout with PanelsGrid
  28. 28. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationContent OverflowClipping
  29. 29. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationContent ScrollingScrollviewerViewBox (remove all wrapping)Content Overflow
  30. 30. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationWPF & Surface SDK 2.0 ControlSurfaceButtonSurfaceToggleButtonSurfaceRadioButtonSurfaceCheckBoxSurfaceListBoxSurfaceSliderSurfaceScrollViewerSurfaceInkCanvasSurfaceTextBoxSurfacePasswordBoxButtonToggleButtonRadioButtonCheckBoxListBoxSliderScroll ViewerInkCanvasTextboxPassword BoxSurface SDK WPF
  31. 31. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationWPF & Surface SDK 2.0 ControlSpecific Surface SDK control : ScatterViewScatter View ControlScatterViewItemsCustom shapeScatterViewItem
  32. 32. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationWPF & Surface SDK 2.0 ControlSpecific Surface SDK control : Library ControlsLibraryBarLibraryStack• Items can be scroll left or right• Build in Drag & Drop gesture• Items arranged in a stack view• Items selection with a Tap gesture• Build in Drag & Drop gesture
  33. 33. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationWPF & Surface SDK 2.0 ControlSpecific Surface SDK control : Library ContainersLibrary Bar ViewSwitching View ModeFilter Control
  34. 34. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationWPF & Surface SDK 2.0 ControlSpecific Surface SDK control : Library ContainersLibrary Stack ViewSwitching View ModeFilter Control
  35. 35. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationWPF & Surface SDK 2.0 ControlSpecific Surface SDK control : Element MenuMenuItemsElement Menu• ElementMenu can contain up to 8 Menu Items• Build in Drag & Drop gesture• Can be used on any control
  36. 36. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 2: Building a WPF applicationWPF & Surface SDK 2.0 ControlQ :Where is the ComboBox Control ???A :There is no ComboBox Control for SurfaceBleuOrangeGreenYellowRedSurface Garage ModeSelector Controlhttp://blogs.msdn.com/b/pixelsense/archive/2012/04/25/modeselector.aspx
  37. 37. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsWPF vs Surface Application EntryStandard Wpf applicationApp.xamlMicrosoft Surface applicationModule 2: Building a WPF application
  38. 38. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsWPF vs Surface Application EntrySurfaceWindow.xamlInherit from SurfaceWindowNew handler basedon Application StateModule 2: Building a WPF application
  39. 39. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsTIME FOR DEMO
  40. 40. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 3: Resources• Binary Resources• Logical Resources
  41. 41. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 3: ResourcesBinary ResourcesResources fileBuild ActionUse Resource or Content as a Build Action for WPF
  42. 42. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 3: ResourcesBinary ResourcesUri for accessing Binary Resources from Xamlpack://application:,,,/Subfolder/ResourceFile.xamlpack://application:,,,/ReferencedAssembly;component/ResourceFile.xamlpack://siteoforigin:,,,/SomeAssembly;component/ResourceFile.xamlhttp://msdn.microsoft.com/en-us/library/aa970069.aspx
  43. 43. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 3: ResourcesLogical Resources• Named in an element’s Resources property• Shared between different child elements• They are often Style, Template, Skin, Themes or DataProviders• Global to the application or attached to single controlVisual Element LevelApplication Level
  44. 44. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 3: ResourcesLogical ResourcesStaticResource vs. DynamicResourceResourcesStaticResource DynamicResourceApplied only once atthe time it isrequestedApplied every time itchangesLoad immediately Load when neededCan only beused to setdependencyproperty values
  45. 45. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsTIME FOR DEMO
  46. 46. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 4: Data Binding• Concept• DataContext• String Formatting• Value Converters• DataProviders• Customizing the data flow
  47. 47. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsConceptModule 4: Data BindingSource ObjectINotifyPropertyChangedTarget Object.NET Property Dependency propertyBindingStringFormat DataTemplate ValueConverterConcept
  48. 48. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsData ContextModule 4: Data BindingFramework ElementControls(DataContext)<Window x:Name=“_mainWindow” DataContext="{Binding ClasseA}" ><!-- DataContext is set to ClassA --><StackPanel><!-- DataContext is set to ClassA --><!-- DataContext is set to ClassA, so will display ClassA.Name --><Label Content="{Binding Name}" /><!-- DataContext is still ClassA, however we are setting it to ClassA.ClassB --><StackPanel DataContext="{Binding ClassB}"><!-- DataContext is set to ClassB, so will display ClassB.Name --><Label Content="{Binding Name}" /><!-- DataContext is still ClassB, but we are binding to the WindowsDataContext.Name which is ClassA.Name --><Label Content="{Binding ElementName=_mainWindow, Path=DataContext.Name}" /></StackPanel></StackPanel></Window>InheritanceClasse ANameClasseBClasse B
  49. 49. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsString FormattingModule 4: Data Binding<TextBlock Text="{Binding Path=Name, StringFormat=Name of the Person : {0}}"/><TextBlock Text="{Binding StringFormat=HH:MM d/M/ yyyy}"/><StackPanel xmlns:sys="clr-namespace:System;assembly= mscorlib"><StackPanel.DataContext><sys:Int32>123</sys:Int32></StackPanel.DataContext><TextBlock Text="{Binding StringFormat=Cost: {0:C}}" /></StackPanel>Cost: $123.00
  50. 50. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsValueConverterModule 4: Data Binding• Used for bridging incompatible data type• Customizing data display• Converter class must implement IValueConverter or IMultiValueConverter
  51. 51. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsValueConverterModule 4: Data BindingClass definitionXaml implementation
  52. 52. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsValueConverterModule 4: Data BindingClass definitionXaml Implementation
  53. 53. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsDataProviders : XMLDataProvidersModule 4: Data BindingIn line XML DataXML Data FeedBinding to the XMLExternal xml file
  54. 54. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsDataProviders : ObjectDataProvidersModule 4: Data Binding• Expose a .NET object as a data source• Declaratively instantiate the source object with a parameterized constructor• Bind to a method on the source objet• Provide more option for asynchronous data binding<Window.Resources><Local:Photos x:Key="photos" /><ObjectDataProvider x:Key="dataProvider" ObjectInstance="{StaticResource photos}"/></Window.Resources><Window.Resources><!-- The collection object is instantiated internally by ObjectDataProvider--><ObjectDataProvider x:Key="dataProvider" ObjectType="{x:Type local:Photos}"/></Window.Resources><Window.Resources><ObjectDataProvider x:Key="dataProvider" ObjectType="{x:Type local:Photos} MethodName="GetFolderName"/></Window.Resources>
  55. 55. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsCustomizing Data FlowModule 4: Data BindingOneWayTwoWayOneWayToSourceOneTime• Target updated whenever the source changes• A change to Target or Source updates the other• The Source is updated whenever the Target changes• Like OneWay but keeps a single snapshot of the SourcePropertyChanged • Source is updated whenever Target property value changesLostFocus • Source updated when Target lost focus
  56. 56. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsTIME FOR DEMO
  57. 57. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 5: Template & Style• Style• DataTemplate• ControlTemplate
  58. 58. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 5: Template & StyleStyleOkCancel<StackPanel Orientation="Horizontal“ VerticalAlignment="Top"><Button Background="Red" FontStyle="Italic" Margin="4">Ok</Button><Button Background="Orange" FontStyle="Italic" Margin="4">Cancel</Button></StackPanel><Window.Resources><Style x:Key="myStyle" TargetType="Button"><Setter Property="Background" Value="Red" /><Setter Property="FontStyle" Value="Italic" /><Setter Property="Margin" Value="4" /></Style></Window.Resources>Style definition<StackPanel Orientation="Horizontal" VerticalAlignment="Top"><Button Background="Red" Style="{StaticResource myStyle}">Ok</Button><Button Background="Orange" Style="{StaticResource myStyle}">Cancel</Button></StackPanel>Applying Style
  59. 59. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 5: Template & StyleStyle : Triggers• Property Triggers• Invoke when a value of a dependency property changes<Style x:Key="styleWithTrigger" TargetType="Rectangle"><Setter Property="Fill" Value="LightGreen" /><Style.Triggers><Trigger Property="IsMouseOver" Value="True"> <Setter Property="Fill" Value="Red" /></Trigger></Style.Triggers></Style><Rectangle Style="{StaticResource styleWithTrigger}"></Rectangle>
  60. 60. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 5: Template & StyleStyle : Triggers• Data Triggers• Invoke when a value of a .NET property changes<Style TargetType="{x:Type ListBoxItem}"><Style.Triggers><DataTrigger Binding="{Binding Path= RelationshipType}" Value="Family"><Setter Property="Background" Value="Yellow" /></DataTrigger><DataTrigger Binding="{Binding Path= RelationshipType}" Value="Friend"><Setter Property="Background" Value="Pink" /></DataTrigger><MultiDataTrigger><MultiDataTrigger.Conditions><Condition Binding="{Binding Path=Name}" Value="A" /><Condition Binding="{Binding Path= RelationshipType}" Value="Best Friend" /></MultiDataTrigger.Conditions><MultiDataTrigger.Setters><Setter Property="Background" Value="LightGreen" /></MultiDataTrigger.Setters></MultiDataTrigger></Style.Triggers></Style>Property Condition
  61. 61. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 5: Template & StyleStyle : Triggers• Event Triggers• Invoke when a routed event is raised<EventTrigger RoutedEvent="Button.Click" SourceName="BeginButton"><BeginStoryboard Name="MyBeginStoryboard"><Storyboard ><DoubleAnimation Storyboard.TargetName="myRectangle"Storyboard.TargetProperty="Width" Duration="0:0:5" From="100" To="500" /></Storyboard></BeginStoryboard></EventTrigger>
  62. 62. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 5: Template & StyleControlTemplate• Define the visual apperance of a controlStandard button<Style x:Key=“EllipseButtonStyle" TargetType="Button"><Setter Property="Template"><Setter.Value><ControlTemplate TargetType="{x:Type Button}"><Grid><Ellipse Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}"/><ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/></Grid></ControlTemplate></Setter.Value></Setter></Style>Ellipse buttonTemplate definition<Button Style="{StaticResource EllipseButtonStyle}" />
  63. 63. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 5: Template & StyleDataTemplate• Define the way data should be display• Can be a combination of FrameworkElement
  64. 64. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsTIME FOR DEMO
  65. 65. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 6: MVVM PatternMotivation for the MVVM Pattern• It provides separation of concerns• A clean separation between application logic and the UI• It improves code re-use opportunities• It is a natural pattern for XAML platforms• Rich data binding stack and dependency properties• It enables a developer-designer workflow• It increases application testability
  66. 66. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 6: MVVM PatternMVVM PatternView :Responsible for definingthe structure, layout, andappearance of what theuser sees on the screen.Ideally, the view is definedpurely with XAML, with alimited code-behind thatdoes not contain businesslogic.Model :implementation of theapplications domain modelthat includes a data modelalong with business andvalidation logic. Examplesof model objects includerepositories, businessobjects, data transferobjects (DTOs), Plain OldCLR Objects (POCOs),and generated entity andproxy objectsViewModel :Interacts with the model by invoking methods in themodel classes. The view model then provides datafrom the model in a form that the view can easilyuse. Handle all the view commands.
  67. 67. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 6: MVVM PatternBenefits of MVVM• Developers and designers can work more independentlyand concurrently on their components• Developers can create unit tests for the view model and themodel without using the view• Easy to redesign the UI with no code change
  68. 68. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 6: MVVM PatternSample MVVM Resource• Josh Smith Advanced MVVM• MVVM Light Toolkit• MVVM Foundation• Developers Guide to Microsoft Prism
  69. 69. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 6: MVVM PatternTIME FOR DEMO
  70. 70. Microsoft PixelSense Development Partnerhttp://www.solays.comZac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.comWPFTrainingSurface SDK 2.0 ControlsModule 6: MVVM PatternTHANK YOU

×