08448380779 Call Girls In Civil Lines Women Seeking Men
Wpf training & surface sdk 2.0 controls
1. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France
WPF
Training
Surface SDK 2.0 Controls
@ : serge.calderara@Solatys.com
Windows Presentation Foundation
&
Surface SDK 2.0 Controls
Training
2. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Training 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 Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Introduction
Tools
VS2010 and above Microsoft Blend
Adobe Illustrator Adobe Photoshop
4. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Introduction
Development Workflow
Customer
Engineer
Designer
Developer
Tester
1
2
3
5
2
1 Elicit requirement
2 Create and validate UI prototype
3 Implement Business Logic and
Create Raw-User interface
2 Integrate Graphical Design
5 Unit test plan and integration test
5. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 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 Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 1: WPF Concept & Fundamentals
Advantages of XAML
• Code is short and clear to read
• Isolation of designer code and
logic
• Graphical design tools like
Expression Blend require XAML as
source.
• Isolation of XAML and UI logic
allows it to clearly separate the
roles of designer and developer
XAML
Code
7. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 1: WPF Concept & Fundamentals
Properties as Elements
Implicit Type conversion
8. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Markup Extension
• Dynamic placeholders for attribute values in
XAML.
• Resolve the value of a property at runtime
?
Module 1: WPF Concept & Fundamentals
9. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Namespaces
Standard WPF window
Surface WPF window
Referring a CLR Type
xmlns:local="clr-namespace:MyTestApp.Controls;assembly =TestApp.Controls"
Organizing your own namespace
Module 1: WPF Concept & Fundamentals
10. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 1: WPF Concept & Fundamentals
Logical and Visual Tree
Logical Tree
Visual Tree
Window
ContentPresenter AdornerLayer
Grid
Label Button
Border
ContentPresenter
Image
Border
ContentPresenter
TextBlock
Element Template
Describes the relations between elements of the
user interface.
Responsible for:
• Inherit DependencyProperty values
• Resolving DynamicResources references
• Looking up element names for bindings
• Forwarding RoutedEvents
Responsible for:
• Rendering visual elements
• Propagate element opacity
• Propagate Layout- and
RenderTransforms
• Propagate the IsEnabled
property.
• Do Hit-Testing
• RelativeSource( FindAncestor )
Border
AdornerDecorator
11. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Accessing Visual Tree Parent and Child
Module 1: WPF Concept & Fundamentals
12. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Routed Event
Window
ContentPresenter AdornerLayer
Grid
Label Button
Border
AdornerDecorator
Tunneling Bubbling
Direct
Preview…..
Module 1: WPF Concept & Fundamentals
13. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 1: WPF Concept & Fundamentals
Routed Event Sample
Root Element
Event handler
Yes No Cancel
What is the route ?
14. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 1: WPF Concept & Fundamentals
Sample scenario
Root Element
Event handler
What is happening if WPF do not provide Routed Event ?
15. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 1: WPF Concept & Fundamentals
Routed Events Implementation
RoutedEvent class Event name
Register name
Rounting strategy
Event handler definition
Routing event registration
Handling condition
16. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 1: WPF Concept & Fundamentals
WPF Input Events
PreviewTouchDown
TouchDown
1. PreviewTouchDown (tunnel) on root element
2. PreviewTouchDown (tunnel) on intermediate element #1
3. PreviewTouchDown (tunnel) on source element #2
4. TouchDown (bubble) on source element #2
5. TouchDown (bubble) on intermediate element #1
6. TouchDown (bubble) on root element #1
17. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 1: WPF Concept & Fundamentals
WPF Input Events : Promoting Touch Event to mouse events
Q: How an application not design for touch can still respond to
mouse event ?
A: Primary Touch point is the key
• The first detected touch input is
defined as the primary touch device
• A new primary touch device is
allocated only if all touch input has
been released from screen
A native WPF button responds to touch. The touch events are unhandled, so WPF
promotes the events to mouse events. The button responds to the mouse event
and triggers a click action
18. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 1: WPF Concept & Fundamentals
EventSetters & EventTriggers
Applied only from
style
19. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 1: WPF Concept & Fundamentals
DependencyProperty resolution strategy
• Resolved dynamically when
calling the GetValue()
• Value inheritance through
resolution strategy
• Implement notification
mechanism
Binding expression
Local value
Custom style trigger
Custom template trigger
Custom style trigger
Default style trigger
Default style setter
Inherited value
Default value
Animation
Local value
GetValue()
SetValue()
20. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
TIME FOR DEMO
21. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 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 Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
Sizing – Positioning - Transforming
HorizontalAlignement
VerticalAlignement
Height
Width
Element
Margin
Padding
Content
FlowDirection
LayoutTransform
RenderTransform
Main child layout properties
23. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
Sizing – Positioning - Transforming
Visibility
24. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
Sizing – Positioning - Transforming
Alignment
25. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
Sizing – Positioning - Transforming
Applying Tranform
Layout Tranform
Render Tranform
Transform can be combine
using TransformGroup
Sample
RotateTransform
• RotationTransform
• ScaleTransform
• SkewTransform
• TranslateTransform
26. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
Layout with Panels
(0,0)
Button position using Canvas.Top, Canvas.Bottom,
Canvas.Left, Canvas.Right properties
Canvas
Buttons using both orientation
StackPanel
Buttons automatically arranged
WrapPanel
Buttons arranged Docked
DockPanel
27. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
Layout with Panels
Grid
28. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
Content Overflow
Clipping
29. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
Content Scrolling
Scrollviewer
ViewBox (remove all wrapping)
Content Overflow
30. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
WPF & Surface SDK 2.0 Control
SurfaceButton
SurfaceToggleButton
SurfaceRadioButton
SurfaceCheckBox
SurfaceListBox
SurfaceSlider
SurfaceScrollViewer
SurfaceInkCanvas
SurfaceTextBox
SurfacePasswordBox
Button
ToggleButton
RadioButton
CheckBox
ListBox
Slider
Scroll Viewer
InkCanvas
Textbox
Password Box
Surface SDK WPF
31. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
WPF & Surface SDK 2.0 Control
Specific Surface SDK control : ScatterView
Scatter View Control
ScatterViewItems
Custom shape
ScatterViewItem
32. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
WPF & Surface SDK 2.0 Control
Specific Surface SDK control : Library Controls
LibraryBar
LibraryStack
• 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 Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
WPF & Surface SDK 2.0 Control
Specific Surface SDK control : Library Containers
Library Bar View
Switching View Mode
Filter Control
34. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
WPF & Surface SDK 2.0 Control
Specific Surface SDK control : Library Containers
Library Stack View
Switching View Mode
Filter Control
35. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
WPF & Surface SDK 2.0 Control
Specific Surface SDK control : Element Menu
MenuItems
Element Menu
• ElementMenu can contain up to 8 Menu Items
• Build in Drag & Drop gesture
• Can be used on any control
36. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 2: Building a WPF application
WPF & Surface SDK 2.0 Control
Q :Where is the ComboBox Control ???
A :There is no ComboBox Control for Surface
Bleu
Orange
Green
Yellow
Red
Surface Garage ModeSelector Control
http://blogs.msdn.com/b/pix
elsense/archive/2012/04/25/
modeselector.aspx
37. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
WPF vs Surface Application Entry
Standard Wpf application
App.xaml
Microsoft Surface application
Module 2: Building a WPF application
38. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
WPF vs Surface Application Entry
SurfaceWindow.xaml
Inherit from Surface
Window
New handler based
on Application State
Module 2: Building a WPF application
39. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
TIME FOR DEMO
40. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 3: Resources
• Binary Resources
• Logical Resources
41. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 3: Resources
Binary Resources
Resources file
Build Action
Use Resource or Content as a Build Action for WPF
42. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 3: Resources
Binary Resources
Uri for accessing Binary Resources from Xaml
pack://application:,,,/Subfolder/ResourceFile.xaml
pack://application:,,,/ReferencedAssembly;component/ResourceFile.xaml
pack://siteoforigin:,,,/SomeAssembly;component/ResourceFile.xaml
http://msdn.microsoft.com/en-us/library/aa970069.aspx
43. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 3: Resources
Logical 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 control
Visual Element Level
Application Level
44. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 3: Resources
Logical Resources
StaticResource vs. DynamicResource
Resources
StaticResource DynamicResource
Applied only once at
the time it is
requested
Applied every time it
changes
Load immediately Load when needed
Can only be
used to set
dependency
property values
45. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
TIME FOR DEMO
46. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 4: Data Binding
• Concept
• DataContext
• String Formatting
• Value Converters
• DataProviders
• Customizing the data flow
47. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Concept
Module 4: Data Binding
Source Object
INotifyPropertyChanged
Target Object
.NET Property Dependency propertyBinding
StringFormat DataTemplate ValueConverter
Concept
48. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Data Context
Module 4: Data Binding
Framework Element
Controls
(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 Window's
DataContext.Name which is ClassA.Name -->
<Label Content="{Binding ElementName=_mainWindow, Path=DataContext.Name}" />
</StackPanel>
</StackPanel>
</Window>
Inheritance
Classe A
Name
ClasseB
Classe B
49. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
String Formatting
Module 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 Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
ValueConverter
Module 4: Data Binding
• Used for bridging incompatible data type
• Customizing data display
• Converter class must implement IValueConverter or IMultiValueConverter
51. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
ValueConverter
Module 4: Data Binding
Class definition
Xaml implementation
52. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
ValueConverter
Module 4: Data Binding
Class definition
Xaml Implementation
53. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
DataProviders : XMLDataProviders
Module 4: Data Binding
In line XML Data
XML Data Feed
Binding to the XML
External xml file
54. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
DataProviders : ObjectDataProviders
Module 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 Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Customizing Data Flow
Module 4: Data Binding
OneWay
TwoWay
OneWayToSource
OneTime
• 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 Source
PropertyChanged • Source is updated whenever Target property value changes
LostFocus • Source updated when Target lost focus
56. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
TIME FOR DEMO
57. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 5: Template & Style
• Style
• DataTemplate
• ControlTemplate
58. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 5: Template & Style
Style
Ok
Cancel
<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 Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 5: Template & Style
Style : 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 Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 5: Template & Style
Style : 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 Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 5: Template & Style
Style : 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 Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 5: Template & Style
ControlTemplate
• Define the visual apperance of a control
Standard 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 button
Template definition
<Button Style="{StaticResource EllipseButtonStyle}" />
63. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 5: Template & Style
DataTemplate
• Define the way data should be display
• Can be a combination of FrameworkElement
64. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
TIME FOR DEMO
65. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 6: MVVM Pattern
Motivation 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 Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 6: MVVM Pattern
MVVM Pattern
View :
Responsible for defining
the structure, layout, and
appearance of what the
user sees on the screen.
Ideally, the view is defined
purely with XAML, with a
limited code-behind that
does not contain business
logic.
Model :
implementation of the
application's domain model
that includes a data model
along with business and
validation logic. Examples
of model objects include
repositories, business
objects, data transfer
objects (DTOs), Plain Old
CLR Objects (POCOs),
and generated entity and
proxy objects
ViewModel :
Interacts with the model by invoking methods in the
model classes. The view model then provides data
from the model in a form that the view can easily
use. Handle all the view commands.
67. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 6: MVVM Pattern
Benefits of MVVM
• Developers and designers can work more independently
and concurrently on their components
• Developers can create unit tests for the view model and the
model without using the view
• Easy to redesign the UI with no code change
68. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 6: MVVM Pattern
Sample MVVM Resource
• Josh Smith Advanced MVVM
• MVVM Light Toolkit
• MVVM Foundation
• Developer's Guide to Microsoft Prism
69. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 6: MVVM Pattern
TIME FOR DEMO
70. Microsoft PixelSense Development Partner
http://www.solays.com
Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
Surface SDK 2.0 Controls
Module 6: MVVM Pattern
THANK YOU