Example Title with Registration Microsoft

1
.NET Database Technologies Introduction to WPF
and Entity Framework DataBinding
2
WPF rationale

• UI layout and design separated from functionality
• XML-based Markup language (XAML) for design,
  programming language (C, VB, etc) for
  functionality
• Designers and developers can use separate
  specialised tools to work on the same project
• Expression Blend for designers
• Visual Studio for developers

3
WPF rationale

• Similar technology, based on XAML and C/VB, can
  be used for different interface types
• Windows (WPF)
• Web (Silverlight)
• Phone (Silverlight)
• Basic idea of building interface using markup and
  code is similar to other web development
  technologies, e.g.
• HTML JavaScript
• ASP.NET C

4
XAML controls

• Layout controls
• containers for other controls to position them in
  the interface
• ltFramegt, ltGridgt, ltStackPanelgt, etc.
• Interactive controls
• ltButtongt, ltComboBoxgt,ltSlidergt, etc.
• Display controls
• ltLabelgt,ltListBoxgt, ltImagegt, etc
• Data controls
• ltDataGridgt, ltListViewgt, etc.
• Application controls
• ltMenugt, ltToolBargt, etc.

5
A simple WPF example
text box user can type a question here
button user clicks this to get advice
text box answer is shown here
6
XAML window

• Window defined in a XAML file
• Grid control as a container

Grid has 3 rows, middle row sized to fit
contents, others expand to fill available space
other controls are defined here, inside ltGridgt
control
7
Adding controls to a window

• Controls defined inside ltGridgt element

name of method to handle click event
Grid.Row attribute specifies which row of grid
the control is displayed in
Attributes control appearance of controls (fonts,
margins, etc)
8
Code-behind file

• Contains a C class which is derived from Window
  library class

constructor
event handler method
event handler method uses a model class
AdviceGenerator and sets Text property of the
text box named txtAnswer
9
Applications and windows

• App.xaml is the startup file for a WPF project
• Code-behind contains an empty constructor by
  default
• So where is the Main method?
• In autogenerated code in file App.g.cs in obj
  folder
• Additional windows defined as separate XAML files
• Can create an instance of code-behind class and
  call its Show method to open a new window
• Can also design applications using a page-based
  model

window to open at startup
10
Code and visual designers

• WPF windows can be designed using visual design
  tools in Visual Studio and Expression Blend
• Important to understand XAML code to get fine
  control over design
• Plan out layout using capabilities of layout
  controls rather than dragging controls from
  designer toolbox and positioning visually
• Makes it easy to provide layouts which adjust
  elegantly when window is resized

11
Layout controls

• Grid
• arranges its child controls in a tabular
  structure
• Stack Panel, Wrap Panel
• stacks child elements below or beside each other,
  Wrap Panel wraps to new line if no space
• Dock Panel
• docks elements to left, right, top, bottom or
  centre
• Canvas
• Elements positioned by coordinates, mainly used
  for 2D drawing

12
Alignment
13
Margin and padding

• The Margin is the extra space around the control
• The Padding is extra space inside the control
• The Padding of an outer control is the Margin of
  an inner control

14
Laying out a grid

• Row and column definitions
• Sizes
• Fixed Fixed size)
• Auto Takes as much space as needed by the
  contained control
• Star () Takes as much space as available
• Position each control in grid with properties
  Grid.Column and Grid.Row
• Merge grid cells with Grid.ColumnSpan and
  Grid.RowSpan
• These are WPF attached properties

15
WPF properties

• Normal .NET properties
• Value read directly from member field in class
• Dependency properties
• Resolved dynamically, e.g. by binding, allowing
• Change notification
• Inheritance from parent elements
• Reduced memory footprint only store non-default
  values
• Many XAML control properties are dependency
  properties
• Attached properties
• Allow you to attach a value to an object that
  does not know anything about this value
• A child element can store a value associated with
  a property defined on an parent element 

16
Layout example
17
Layout example - Grid
4 rows, 3 columns
18
Layout example - controls
can miss out Column0
19
XAML routed events

• A typical WPF application contains many elements.
  
• Elements exist in an element tree relationship to
  each other
• A routed event is a type of event that can invoke
  handlers on multiple listeners in an element
  tree, rather than just on the object that raised
  the event
• The event route generally travels from the source
  element and then "bubbles" upward through the
  element tree until it reaches the element tree
  root (typically a page or a window)
• Control composition and encapsulation
• Singular handler attachment points

20
XAML routed events

• This example has Button click handlers attached
  at different levels in the tree

21
Handling routed events
other button events bubble up to Grid and are
handled here
this will not happen as Cancel button event
already handled
handles Cancel button and sets Handled to true so
that event does not bubble up
22
Types of event

• Actually, its a bit more complicated than
  that...
• There are three types of routed event
• Direct events
• Like ordinary .NET events, originate in one
  element and do not pass to any other
• Bubbling events
• Travel up the containment hierarchy
• Tunnelling events
• Travel down the containment hierarchy
• Give you the chance to preview and possibly stop
  an event before it reaches the appropriate
  control
• Usually named as Preview...

23
Event tunnelling
using Snoop (http//snoopwpf.codeplex.com/)

• When an event (e.g. MouseDown) occurs in an
  element, a Preview event (PreviewMouseDown)
  starts at the root element and tunnels down to
  source
• If it is not marked as handled, then the actual
  event starts at the source and bubbles up towards
  the root in search of a handler
• See http//msdn.microsoft.com/en-gb/magazine/cc785
  480.aspxid0190003

in this case Button handles MouseDown event and
raises its own Click event, which then bubbles up
to element with handler attached
24
WPF command model

• May want the same action to be triggered in
  several different ways
• e.g. Print menu item, Print button, CtrlP
• Need to add event handlers wherever they are
  needed
• What if we need to disable printing at some point
• Need to disable controls and ignore shortcut at
  the right time
• Can be difficult to manage and debug
• WPF command model makes this easier to manage
• Delegates events to appropriate commands
• Can attach the same command to multiple controls
• Keeps enabled state of controls synchronised to
  command state

25
Command model concepts

• Command - implements ICommand
• Execute and CanExecute properties,
  CanExecuteChanged event
• Represents a command, but does not contain code
  that performs the task
• The Command Library is a basic library of common
  commands, like New, Save, Print, Copy, Paste
• Can create custom commands
• Command Source implements ICommandSource
• Command, CommandTarget and CommandParameter
  properties
• Button, MenuItem, etc are command sources

26
Command model concepts

• CommandBinding
• Command property, Executed and CanExecute events
• Links a command to the related application logic
  (event handler)
• Command target
• Element on which the command is being performed
• e.g. a Paste command might insert text in a
  TextBox
• The command source can explicitly set the command
  target
• If the command target is not defined, the element
  with keyboard focus will be used as the command
  target
• Some controls can handle command events on their
  own
• e.g. TextBox handles Cut, Paste and Copy
• Dont need to write event handlers explicitly for
  these

27
Command example

• Setting Command property of command sources,
  using library commands

TextBox will be command target when it has focus
28
Command example

• Setting command bindings in XAML
• Dont need to set bindings for Cut, Paste, Copy
  as TextBox has event handlers for these built in
• Cut and Copy will be enabled when text is
  highlighted

29
Command example

• Event handlers for commands

flag to indicate whether text box contains
unsaved text
TextChanged event on target (Text Box) will cause
CanExecute event on command binding to be fired,
which is used here to update CanExecute property
of Command
30
Binding

• Properties of controls can be automatically
  updated by properties of other controls or model
  objects
• Updates can be one-way or two way

31
Binding controls
Content property of Label (target) bound to Text
property of TextBox (source)
Text property of TextBox (target) bound to Value
property of Slider (source)
Binding mode changes cause updates both ways
32
Binding modes

• One time
• Source property updates target property once and
  only once
• One way
• Source property always updates target property
• Two way
• Source and target properties update each other
  change one and the other changes
• One way to source
• Target property always updates source property

33
Binding to an object

• Model class simple Employee class

extra code to notify changes in property values
for binding (details not shown)
34
Binding to an object

• XAML TextBox is bound to Name property, as
  specified by binding Path
• Dont specify source here it will be the data
  context of the window
• Code-behind create model object and set it as
  data context for window

35
Binding to an object

• For two-way binding of objects to UI control,
  objects must implement INotifyPropertyChanged
• Properties must raise PropertyChanged event
• Collections should be of type ObservableCollection
  , which implements INotifyPropertyChanged and
  INotifyCollectionChanged
• This can introduce UI concerns into classes...

36
Binding to data sources

• Source object for binding can be a data source,
  e.g
• Objects
• Entity data
• XML
• There are several ways of specifying binding
  source for an element
• Using the DataContext property on a parent
  element
• Useful when you are binding multiple properties
  to the same source
• Specify the binding Source property on individual
  binding declarations
• Specify the binding ElementName property to bind
  to another control

37
Visual Studio and EF data sources

• Visual Studio allows you to drag-and-drop object
  data sources or EF entity sets onto the WPF
  designer
• Sets up Resources element to define data sources
  in XAML
• Generates code-behind to retrieve data from
  underlying data source
• Elements can bind to source as a StaticResource
• EF generated classes support WPF binding

38
MVVM pattern

• Model-View-ViewModel
• WPF/Silverlight equivalent to the MVC
  (Model-View-Controller) and MVP
  (Model-View-Presenter) patterns used in ASP.NET
• Suitable for separation of concerns in rich,
  highly interactive user interfaces
• Fits well with WPF binding, command and
  templating infrastructure

39
MVVM pattern

• Model
• Domain class(es)
• View
• XAML which contains elements to display data
  and/or react to user input
• ViewModel
• Class which contains
• Properties which correspond to the content or
  state required for UI elements
• Commands which correspond to the actions required
  to handle user input from UI elements
• Commands will typically use domain objects to
  perform business logic and update UI content or
  state

40
MVVM binding

• MVVM works particularly well in WPF/Silverlight
  because of its powerful binding mechanism
• View elements bind to properties and/or commands
  defined in ViewModel
• ViewModel does not need to know explicitly about
  the corresponding View
• ViewModel defines UI state/behaviour, but does
  not have any dependency on a specific UI
• UI logic in ViewModel can be unit tested
• WPF templating allows detailed control over how
  the View displays the properties of the ViewModel

41
MVVM binding

• ViewModel class is set as DataContext for View

ItemSource is bound to the Persons property of
ViewModel, which is a collection of Person domain
objects
ItemTemplate defines how properties of each item,
of type Person, in ListBox should be displayed
here FirstName and LastName properties are
displayed as text blocks in a stack panel
42
Further reading

• Drag Drop Databinding with the Entity Framework
  and WPF
• Julie Lerman
• http//msdn.microsoft.com/en-us/data/gg610409
• Chapter 9 Programming Entity Framework
• Julie Lerman (again!)
• Pro WPF in C 2010
• Matthew MacDonald
• Apress