Your SlideShare is downloading. ×
Wpf training & surface sdk 2.0  controls
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Wpf training & surface sdk 2.0 controls

1,475

Published on

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×