Wpf training & surface sdk 2.0 controls

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
&
Training

Zac du Larry –Marin , 74200 Thonon les Bains - France @ : serge.calderara@Solatys.com
WPF
Training
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

WPF
Training
Introduction
Tools
VS2010 and above Microsoft Blend
Adobe Illustrator Adobe Photoshop

WPF
Training
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

WPF
Training
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

WPF
Training
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

WPF
Training
Properties as Elements
Implicit Type conversion

WPF
Training
Markup Extension
• Dynamic placeholders for attribute values in
XAML.
• Resolve the value of a property at runtime
?

WPF
Training
Namespaces
Standard WPF window
Surface WPF window
Referring a CLR Type
xmlns:local="clr-namespace:MyTestApp.Controls;assembly =TestApp.Controls"
Organizing your own namespace

WPF
Training
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

WPF
Training
Accessing Visual Tree Parent and Child

WPF
Training
Routed Event
Window
ContentPresenter AdornerLayer
Grid
Label Button
Border
AdornerDecorator
Tunneling Bubbling
Direct
Preview…..

WPF
Training
Routed Event Sample
Root Element
Event handler
Yes No Cancel
What is the route ?

WPF
Training
Sample scenario
Root Element
Event handler
What is happening if WPF do not provide Routed Event ?

WPF
Training
Routed Events Implementation
RoutedEvent class Event name
Register name
Rounting strategy
Event handler definition
Routing event registration
Handling condition

WPF
Training
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

WPF
Training
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

WPF
Training
EventSetters & EventTriggers
Applied only from
style

WPF
Training
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()

WPF
Training
TIME FOR DEMO

WPF
Training
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

WPF
Training
Sizing – Positioning - Transforming
HorizontalAlignement
VerticalAlignement
Height
Width
Element
Margin
Padding
Content
FlowDirection
LayoutTransform
RenderTransform
Main child layout properties

WPF
Training
Visibility

WPF
Training
Alignment

WPF
Training
Applying Tranform
Layout Tranform
Render Tranform
Transform can be combine
using TransformGroup
Sample
RotateTransform
• RotationTransform
• ScaleTransform
• SkewTransform
• TranslateTransform

WPF
Training
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

WPF
Training
Layout with Panels
Grid

WPF
Training
Content Overflow
Clipping

WPF
Training
Content Scrolling
Scrollviewer
ViewBox (remove all wrapping)
Content Overflow

WPF
Training
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

WPF
Training
Specific Surface SDK control : ScatterView
Scatter View Control
ScatterViewItems
Custom shape
ScatterViewItem

WPF
Training
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

WPF
Training
Specific Surface SDK control : Library Containers
Library Bar View
Switching View Mode
Filter Control

WPF
Training
Specific Surface SDK control : Library Containers
Library Stack View
Switching View Mode
Filter Control

WPF
Training
Specific Surface SDK control : Element Menu
MenuItems
Element Menu
• ElementMenu can contain up to 8 Menu Items
• Can be used on any control

WPF
Training
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

WPF
Training
WPF vs Surface Application Entry
Standard Wpf application
App.xaml
Microsoft Surface application

WPF
Training
WPF vs Surface Application Entry
SurfaceWindow.xaml
Inherit from Surface
Window
New handler based
on Application State

WPF
Training
Module 3: Resources
• Binary Resources
• Logical Resources

WPF
Training
Module 3: Resources
Binary Resources
Resources file
Build Action
Use Resource or Content as a Build Action for WPF

WPF
Training
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

WPF
Training
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

WPF
Training
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

WPF
Training
Module 4: Data Binding
• Concept
• DataContext
• String Formatting
• Value Converters
• DataProviders
• Customizing the data flow

WPF
Training
Concept
Source Object
INotifyPropertyChanged
Target Object
.NET Property Dependency propertyBinding
StringFormat DataTemplate ValueConverter
Concept

WPF
Training
Data Context
Framework Element
Controls
(DataContext)
<Window x:Name=“_mainWindow” DataContext="{Binding ClasseA}" >

<StackPanel>


<Label Content="{Binding Name}" />

<StackPanel DataContext="{Binding ClassB}">

<Label Content="{Binding Name}" />

<Label Content="{Binding ElementName=_mainWindow, Path=DataContext.Name}" />
</StackPanel>
</StackPanel>
</Window>
Inheritance
Classe A
Name
ClasseB
Classe B

WPF
Training
String Formatting
<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

WPF
Training
ValueConverter
• Used for bridging incompatible data type
• Customizing data display
• Converter class must implement IValueConverter or IMultiValueConverter

WPF
Training
ValueConverter
Class definition
Xaml implementation

WPF
Training
ValueConverter
Class definition
Xaml Implementation

WPF
Training
DataProviders : XMLDataProviders
In line XML Data
XML Data Feed
Binding to the XML
External xml file

WPF
Training
DataProviders : ObjectDataProviders
• 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>

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

WPF
Training
Customizing Data Flow
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

WPF
Training
Module 5: Template & Style
• Style
• DataTemplate
• ControlTemplate

WPF
Training
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

WPF
Training
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>

WPF
Training
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

WPF
Training
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>

WPF
Training
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}" />

WPF
Training
DataTemplate
• Define the way data should be display
• Can be a combination of FrameworkElement

WPF
Training
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

WPF
Training
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.

WPF
Training
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

WPF
Training
Sample MVVM Resource
• Josh Smith Advanced MVVM
• MVVM Light Toolkit
• MVVM Foundation
• Developer's Guide to Microsoft Prism

WPF
Training
TIME FOR DEMO

WPF
Training
THANK YOU

Wpf training & surface sdk 2.0 controls

More Related Content

Similar to Wpf training & surface sdk 2.0 controls (20)

Recently uploaded (20)

Wpf training & surface sdk 2.0 controls