Data Binding in GUI Application DevelopmentPatrick O’Brien

Why use WPF?

•Design patterns

•Superiority to Windows Forms

•Collaboration with designers▫Expression Blend▫XAML

What is WPF?

•GUI development API released with .NET 3.0

• Immediate predecessor is Windows Forms

•Built on top of DirectX

WPF Deployment

•Standalone XAML

•Typical - .exe

•XBAP▫Browser based

XAML (pronounced zammel)

•Extensible Application Markup Language▫XML based

•Can be compiled or interpreted

Basic XAML

Basic XAML

XAML vs. WinForms

•Problem: Implement a ComboBox with CheckBoxes as options in it

•Windows Forms: 600+ SLOC▫http://www.codeproject.com/Articles/

21085/CheckBox-ComboBox-Extending-the-ComboBox-Class-and

XAML vs. WinForms

Windows Forms Controls Properties

VS.

VS.

Problems:Easy to get unorganized / inconsistentNumber of lines requirements

Solution: XAML Styles

•Similar to CSS

•Keeps controls consistent without reusing code

XAML Styles

To use this:

XAML Layouts

•Encourage dynamic layouts

•Several options▫DockPanel▫Grid▫StackPanel▫Canvas (not recommended)

XAML Layouts

WPF Events

DockPanel

Grid

Button

Data Binding

•Bindings are inserted into XAML using extensions (curly braces)

•Can set bindings OneWay, TwoWay, OneTime

•DataContext provides a “starting point” for binding

•Path tells property what data to use

Data Binding

•Simple Example: Bind a Slider’s value to a TextBlock’s font size

Data Binding

•Bind fonts installed on a computer to a ListBox

DataContext=“{x:Static Fonts.SystemFontFamilies}”Gets the fonts installed and sets them as the context for the ListBox

Text=“{Binding Path=Count, Mode=OneTime}”Sets the tooltip for the list box to display the number of fonts installed

Advanced Data Binding

•Converting phone numbers in TextBoxes

PhoneConverter : IValueConverter

ContactListView

Design Patterns

•MVC – Model View Controller▫Unfit for WPF

•MVP – Model View Presenter▫Model – Data (Contact, Address, etc.)▫View – Seen by the user▫Presenter – Handles communication

between Model and View

MVP

•Each View will have a corresponding Presenter

•ApplicationPresenter represents the application as a whole▫Individual Presenters use an instance of

ApplicationPresenter to interact with controls

ContactListView.xaml.cs

ContactListPresenter.cs

Questions?