Intro to Windows Presentation Foundation (WPF) by LearnNowOnline

Windows Presentation Foundation Intro Foundation Intro

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Objectives • Introduce Windows Presentation Foundation (WPF) • Investigate XAML and the XAML designer in Visual Studio 2010 • Learn about XAML controls, properties, and events • Work with container controls, dependency properties, and the Grid control Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Agenda • Introducing Windows Presentation Foundation (WPF) • Introducing XAML and the WPF Designer • Investigating XAML • Introducing Content and Grid Controls

Do We Need Another UI Paradigm? • Applications created using Windows Forms don’t show off well • Applications require a new way to present information, rather than rectangular forms, charts, and graphics

What’s Wrong with What We Have? • Existing Windows graphics techniques make creating visually appealing applications difficult • Up until recently, graphics hardware not powerful enough, in general,

for more than Windows Forms

• Could create “movie-style” interfaces, but it’s difficult, and each requires its own set of tools • 3D graphics extremely difficult without external libraries • Standard Windows GDI and USER libraries extremely limited

• Windows Presentation Foundation provides a new medium • Takes advantage of hardware power • Provides consistent, powerful graphics platform

WPF to the Rescue • Integrated, vector-based composition engine • Utilizing the power of the PC

throughout the graphics stack • Resolution independence

• Unified approach to UI, documents, and media • Integration as part of development

experience

WPF to the Rescue • Declarative programming • Brings designers directly into application

development • Allows for separation of design and code

• Ease of deployment • Allowing administrators to deploy and manage

applications securely

Graphics and Composition • Includes modern graphics capabilities • 2D and 3D graphics • Image effects and multiple codecs • Hardware-accelerated sub-pixel ClearType • Full video and audio support

Important Questions, Part I • Does WPF allow me to do something I couldn’t do before? • No: It’s all about the amount of work you want to

put into achieving the results

• Should I use WPF instead of DirectX? • That depends—for “hard core” games, DirectX

Important Questions, Part II • Should I drop Windows Forms and use WPF instead? • Debatable, for ordinary business applications • Visual Studio provides similar sets of controls for each • WPF makes it far easier to create rich media-centric applications • If you need Windows 98 support, Windows Forms are the only choice

• Should I use WPF instead of Adobe Flash? • For Web-based applications, Flash is currently standard for media • Silverlight provides small WPF runtime that supports XAML and

JavaScript

• Perfect for rich browser-based applications

WPF Reference Application • Family.Show

Family.Show • Available for download at http://www.codeplex.com/familyshow • Includes full source code and documentation on its design • Includes family tree (truncated) for British royal family • Can easily create your own family tree • Provides rich visual representation, difficult to create without WPF • Investigate zooming and panning features • Different views of information

WPF vs. Silverlight • Microsoft provides two technologies for clientside applications: WPF and Silverlight • Both allow you to create client applications • Both use XAML to design the interface

• WPF has entire .NET Framework behind it • Silverlight works with a small subset of Framework

WPF vs. Silverlight • WPF: • Ships as part of .NET Framework (3.0 and later) • Runs as a Windows application • Or as Web Browser application (XBAP) • XBAPs run only in Internet Explorer with .NET 3.0 and IE and Firefox with .NET 3.5 and later • Runs only on Windows machines (starting with Windows

XP) • Provides richest functionality • Full support for 3D graphics

WPF vs. Silverlight • Silverlight: • Ships independently; isn’t part of .NET Framework • Can be hosted by Web browsers only • Internet Explorer, Firefox, Safari • Runs on Windows, Mac, Linux clients • Functionality is a subset of WPF’s feature set • Uses only small subset of .NET Framework

• Which do you use? • Depends on target audience, technological needs,

preferred deployment

An Inconvenient Truth (or Two) • Far more difficult to create a decent-looking application in XAML • Because the bar is so much lower in other environments • Developers creating applications in XAML generally create

ugly applications • Good XAML applications require graphic designers

• On the other hand… • Far easier to create great-looking application • Because Windows and Web forms are so limited

WPF and XAML • WPF and XAML: The same thing? XAML is XML-based grammar • Declaratively defines WPF applications •

• Windows Forms is a set of classes •

WPF, too, is a set of classes

• For Windows Forms application •

Must write code to generate the interface

• For WPF •

Can either write code, or can write XAML

• XAML <-> WPF is not one-to-one mapping •

Some names in XAML don’t match the same member names in WPF classes

Agenda • • • •

Introducing WPF Introducing XAML and the WPF Designer Investigating XAML Introducing Content and Grid Controls

WPF Project Templates • In Visual Studio 2010, several project templates for WPF: • WPF Application • WPF Browser Application • WPF Custom Control Library (allows you to use Windows Forms

controls) • WPF User Control Library (creates new WPF controls)

Investigating Routed Events • RoutedEventArgs parameter in event handler gives it away • Something’s different about WPF events

• Events bubble up to container • Code can alter the perception of the source object

• Code can always determine the original source • And the original event

Properties of RoutedEventArgs • • • •

Handled OriginalSource RoutedEvent Source

Agenda • Introducing Windows Presentation Foundation (WPF) • Introducing XAML and the WPF Designer • Investigating XAML • Introducing Content and Grid Controls

Investigating XAML • XAML is simple • But provides several different ways to set property

values

• • • •

Simple Properties/Type Converters Complex Properties Markup Extensions Attached Properties

Investigating XAML • DEMO

Simple Properties/Type Converters • Dragging Button control onto design surface creates several properties • Markup counts on Button class providing Content,

Height, HorizontalAlignment, Margin, Name, VerticalAlignment, and Width properties

• Some properties are simple strings • Content and Name properties

Type Converters • Height and Width properties? • Properties are numeric • Markup supplies values as strings • Along the line, some code must convert • Works because Integer class provides built-in conversion

from string

• Other properties even more complex: • HorizontalAlignment and VerticalAlignment? • Need to convert from string (Bottom, Center, Stretch, or Top; Center, Left, Right, Stretch) to enumerated values Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Type Converters • Margin adds own set of issues • Can supply a single value (all four sides) • Can supply two values (left/right and top/bottom) • Can supply four values (left, top, right, bottom)

• Margin property is a Thickness structure • Contains four integers • Setting property calls constructor for Thickness structure • Requires converter to read the comma-delimited string

and convert to a call to the constructor

Complex Properties • Type converters work well • Some properties can’t be represented by single value

• Want to specify background of a Grid control as a linear gradient? • Can’t represent the behavior with a single value

• Properties of elements that are themselves objects with properties require special care • Represent as nested elements • Named Parent.Property (Grid.Background)

DEMO • Complex properties

Markup Extensions • Usually, standard XAML markup provides functionality you need • Sometimes not possible to set property value at design time • Some properties must be set dynamically, at runtime • Need to use markup extension • Allows you to set property in non-standard way

• Can specify markup extension as nested element, or as attribute • As attribute, always surrounded with { } • Indicating value supplied at runtime

Markup Extensions • Declarative binding requires markup extension: Property= "{Binding ElementName=ObjectName, Path=PropertyName}"

• Can also express using child element: <Object.Property> <Binding ElementName="ObjectName", Path="PropertyName"/> </Object.Property> Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

DEMO • Markup extension/binding

Attached Properties • Nest a control within a Grid • Specify its row and column with Grid.Row and

Grid.Column properties • Where did these come from? • Child control doesn't supply!

• Grid adds these to all its child controls • In other words, they're attached properties • Properties appear as properties of the class • But they're defined in a different class (Grid, in this case)

Attached Properties • Specific syntax: • DefiningType.PropertyName • Grid.Row • Aren't actually properties • Converted to method calls by compiler • Defining class must provide GetPropertyName and

SetPropertyName methods

• Grid.GetRow and Grid.SetRow

• Technique hides what's really going on • Calling method in defining class? • Does Grid keep track of all its children's coordinates?

Attached Properties • Of course, Grid doesn't keep track of all its children's coordinates • Child controls all inherit from DependencyObject • Defined to maintain an unlimited number of dependency

properties

• Parent (Grid) maintains a single instance of a field for each property • Grid.RowProperty for Grid.Row, for example • Child maintains its own value for that property

Attached Properties • Calling parent control's GetPropertyName and SetPropertyName methods equivalent to calling GetValue and SetValue methods of child object • To retrieve Grid.Row property of TextBox named DemoTextBox, use expression like: DemoTextBox.GetValue(Grid.RowProperty)

Agenda • • • •

Introducing WPF Introducing XAML and the WPF Designer Investigating XAML Introducing Content and Grid Controls

Content and Grid Controls • Many controls inherit from ContentControl (including Button) and can contain other controls • Button with image and text? • No problem! • ListBox containing a bunch of TextBox controls? • No problem!

Working with Layout Controls • Several controls useful for laying out other controls • DockPanel • Allocates an edge for each child control • Useful for defining rough layout

• StackPanel • Stacks children horizontally or vertically • Useful internal to other controls (Button, for example)

Working with Layout Controls • Grid • Arranges children in a grid • No need for fixed sizes or positions • Rescales when resized

• Canvas • No layout logic • Manually control each aspect of layout

List Box as Container • DEMO

Working with the Grid Control • DEMO

Dependency Properties • In standard .NET code, property is defined using two procedures • “setter” and “getter”

• More complex mechanism here • Workflow uses same mechanism

• Dependency properties allow for: • Styling • Automatic data binding • Animation • Change notification • and more… Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

DependencyObject Class • DependencyProperty class acts as base for the properties • DependencyObject is base for classes that can consume and expose dependency properties • XAML classes expose far more properties than the corresponding prior classes • Need some internal plumbing to handle

Investigating DependencyProperty • .NET maintains internal dictionary of classes and the properties they expose • DependencyProperty instance defined as a static/shared member of a class • In constructor, code registers property, its type, and hosting class with .NET • Can optionally create standard .NET property that wraps up the dependency property Learn More @ http://www.learnnowonline.com Copyright © by Application Developers Training Company

Declaring the Property VB: Public Shared IsAvailableProperty As DependencyProperty

C#: public static DependencyProperty IsAvailableProperty;

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

In Constructor [Visual Basic] MyClass.IsAvailableProperty = _ DependencyProperty.Register("IsAvailable", _ GetType(Boolean), GetType(MyClass)) [C#] MyClass.IsAvailableProperty = DependencyProperty.Register("IsAvailable", typeof(bool), typeof(MyClass))

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Property Wrapper [Visual Basic] Public Property IsAvailable() As Boolean Get Return _ CType(GetValue(MyClass.IsAvailableProperty), Boolean) End Get Set(ByVal value As Boolean) SetValue(MyClass.IsAvailableProperty, value) End Set End Property

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Property Wrapper [C#] public bool IsAvailable { get { return (bool) GetValue(MyClass.IsAvailableProperty); } set { SetValue(MyClass.IsAvailableProperty, value) } }

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Using Attached Properties • Button control doesn’t expose Grid.Column or Grid.Row • Yet these attributes exist in the XAML markup

• These are attached properties • Properties added by container, when hosted • Retrieve and set using DependencyObject.GetValue

and DependencyObject.SetValue

Working with Attached Properties [Visual Basic] Dim row As Integer = CType(DemoButton.GetValue(Grid.RowProperty), Integer) DemoButton.SetValue(Grid.RowProperty, row + 1) [C#] int row = (int)DemoButton.GetValue(Grid.RowProperty); DemoButton.SetValue(Grid.RowProperty, row + 1);

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Interacting with the Grid â&#x20AC;˘ Add code to move button to new row

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company

Learn More! â&#x20AC;˘ This is an excerpt from a larger course. Visit www.learnnowonline.com for the full details!

Learn More @ http://www.learnnowonline.com Copyright ÂŠ by Application Developers Training Company