An introduction to windows presentation foundation

This can be installed over the web , or you can download an ISO image. Of course, it should really go without saying that these are beta products, and you should therefore be aware of the disclaimers and limitations before you install the software on any machines. These affect the deployment and the style of the application. In keeping with all ClickOnce deployed applications, you have some choices to make with regards to the type of application that you develop.

WPF supports two types of applications: Express and Installed. The key differences and benefits of each type are summarised below: Express applications These are hosted by the browser; to run an Express application, the user clicks a link on a web page and the code for the application is downloaded and cached on their machine. You can navigate between pages, but only within a single on-screen window. Similarly, you cannot touch the file system except through the Isolated Storage mechanism built into the.

The most notable of these is the lack of support for the DocumentViewer control, and thus the flexible display of documents is somewhat restricted. Figure 2: Downloading an Express Application Installed applications These, on the other hand, are downloaded and installed onto the user machine. Navigation applications typically consist of one or more pages within the application, in much the same way that a web application might have multiple.

The user typically navigates through the application by clicking buttons or links, with each page containing its own UI. Note that Express applications must be Navigation applications. Window applications follow a model similar to a Windows Forms application.

A Window application can display secondary pop-up windows. These applications will typically have quite a lot of procedural code associated with them to respond to user actions. Document applications, on the other hand, will have no procedural code. Instead, the application is merely presenting information to a user, in much the same way that users read PDF content. This is certainly not the case, but there are considerable advantages to creating UIs declaratively using structured XML.

For a start, the object model for a WPF application is hierarchical in nature, with a single window element that has a single root panel element, which is used to control the layout of the controls that it contains.

In comparison, whereas XAML directly maps onto this model, programmatic code C , Visual Basic, etc has to explicitly add items and create the tree structure. Windows; using System. Controls; using System. Wheat, Colors. White, Center; tb.

XAML comes into its own when you move away from the trivial single element hierarchy that we had in the previous example.

Of course, individual controls can override these default settings. This styling and resource mechanism can be used at different levels of the hierarchy, so for example all of the Buttons in a single Grid can be styled using a.

Resources block for that specific Grid. By now it should be easy to see that XAML is the preferred choice for designing the UI content for your WPF applications, primarily due to the ease with which you can set properties and styles for the visual elements, and the natural mapping of the object model onto the XAML elements.

XAML is also extensible to support your own custom elements, so you are not constrained in the same way that, say, an HTML developer is to a predefined set of visual elements.

However, user interfaces rarely consist of trees. The object model for WPF incorporates elements that are specifically designed to help you lay out your UI, using containers that are derived from the base Panel class. Table 1 lists the most common layout elements and describes their typical usage. DockPanel A panel that is used to enforce docking of its child elements to an edge or area of a page. Grid A grid combines features from both the Canvas and the Table. The Grid is ideal for designing dialog boxes.

StackPanel This control is used to build stacks of elements, much like stacking boxes one on top of the other or next to each other if the orientation is horizontal. Figure 5: Layout with a GridPanel Note that the red lines are there for you to see the different Grid cells, and are not seen by the user. Working with events Whether it is updating the state of a control as the user enters text, or simply responding to the click of a Button, most applications are interactive.

However, you must remember that WPF is purely a client-side technology, and all events are handled wherever the application is running. Interacting with controls is easy in code. Simply name the control, as has been done here with the TextBlock, and you can access it programmatically. This is because events in WPF are bubbled up through the object tree, enabling them to be handled at a higher level. However, this requires more information about the originating control and the event to be propagated.

The answer to this is a resounding yes! With the advent of Visual Studio , the compilers now support partial classes. The primary motivation for partial classes is to allow designers human or electronic to write a part of the class in one language, and let developers write the programmatic parts in another language.

The only downside to using XAML today is that there is no visual designer support inside Visual Studio , but this is obviously something that will be remedied over the coming months.

There are two deployment strategies, Express and Installed applications; with three styles of application: Navigation, Window and Document. The programming model available is either purely declarative using XAML, programmatic with a. NET language of your choice, or a mixture of the two using partial classes.

NET and other Microsoft development technologies. You might also like Comments About the author Dave Wheeler Dave Wheeler is a freelance instructor and consultant who specialises in.

NET application development. NET and Silverlight forums and is a regular speaker at Interested in writing for us? Find out more. WPF provides a comprehensive set of application-development features that include Extensible Application Markup Language XAML , controls, data binding, layout, 2D and 3D graphics, animation, styles, templates, documents, media, text, and typography.

WPF is part of. NET, so you can build applications that incorporate other elements of the. The Desktop Guide documentation for.

NET 6 and. NET 5 including. NET Core 3. NET 5 or higher including. NET Framework 4 is a Windows-only version of. This version of WPF is distributed with. NET Framework. For more information about the. This overview is intended for newcomers and covers the key capabilities and concepts of WPF. WPF for. NET 5. To learn how to migrate an app, see How to migrate a WPF desktop app to. WPF exists as a subset of. NET types that are, mostly located in the System. Windows namespace.

If you have previously built applications with. WPF includes more programming constructs that enhance properties and events: dependency properties and routed events.

WPF lets you develop an application using both markup and code-behind , an experience with which ASP. NET developers should be familiar. You generally use XAML markup to implement the appearance of an application while using managed programming languages code-behind to implement its behavior.

This separation of appearance and behavior has the following benefits:. Development and maintenance costs are reduced because appearance-specific markup isn't tightly coupled with behavior-specific code. Development is more efficient because designers can implement an application's appearance simultaneously with developers who are implementing the application's behavior.

Globalization and localization for WPF applications is simplified. You typically use it to define windows, dialog boxes, pages, and user controls, and to fill them with controls, shapes, and graphics. The following example uses XAML to implement the appearance of a window that contains a single button:. Each element is configured with attributes, such as the Window element's Title attribute to specify the window's title-bar text.

For example, the Window element is converted to an instance of the Window class whose Title property is the value of the Title attribute. The element tree provides a logical and intuitive way to create and manage UIs.

The main behavior of an application is to implement the functionality that responds to user interactions. For example clicking a menu or button, and calling business logic and data access logic in response. In WPF, this behavior is implemented in code that is associated with markup.

This type of code is known as code-behind. The following example shows the updated markup from the previous example and the code-behind:. The updated markup defines the xmlns:x namespace and maps it to the schema that adds support for the code-behind types. InitializeComponent is called from the code-behind class's constructor to merge the UI that is defined in markup with the code-behind class.

InitializeComponent is generated for you when your application is built, which is why you don't need to implement it manually. The combination of x:Class and InitializeComponent ensure that your implementation is correctly initialized whenever it's created. When the button is clicked, the event handler is invoked and a message box is displayed by calling the System.

Show method. Controls most often detect and respond to user input. The WPF input system uses both direct and routed events to support text input, focus management, and mouse positioning.

Applications often have complex input requirements. WPF provides a command system that separates user-input actions from the code that responds to those actions. The command system allows for multiple sources to invoke the same command logic.

For example, take the common editing operations used by different applications: Copy , Cut , and Paste. These operations can be invoked by using different user actions if they're implemented by using commands. The user experiences that are delivered by the application model are constructed controls. In WPF, control is an umbrella term that applies to a category of WPF classes that have the following characteristics:.

For more information, see Controls. Buttons : Button and RepeatButton. When you create a user interface, you arrange your controls by location and size to form a layout. A key requirement of any layout is to adapt to changes in window size and display settings. Rather than forcing you to write the code to adapt a layout in these circumstances, WPF provides a first-class, extensible layout system for you.

The cornerstone of the layout system is relative positioning, which increases the ability to adapt to changing window and display conditions.

The layout system also manages the negotiation between controls to determine the layout. The negotiation is a two-step process: first, a control tells its parent what location and size it requires. Second, the parent tells the control what space it can have. The layout system is exposed to child controls through base WPF classes.

For common layouts such as grids, stacking, and docking, WPF includes several layout controls:. Canvas : Child controls provide their own layout. DockPanel : Child controls are aligned to the edges of the panel. Grid : Child controls are positioned by rows and columns. StackPanel : Child controls are stacked either vertically or horizontally.

VirtualizingStackPanel : Child controls are virtualized and arranged on a single line that is either horizontally or vertically oriented. WrapPanel : Child controls are positioned in left-to-right order and wrapped to the next line when there isn't enough space. The following example uses a DockPanel to lay out several TextBox controls:. The DockPanel allows the child TextBox controls to tell it how to arrange them.

To do this, the DockPanel implements a Dock attached property that is exposed to the child controls to allow each of them to specify a dock style. A property that's implemented by a parent control for use by child controls is a WPF construct called an attached property. Most applications are created to provide users with the means to view and edit data. For WPF applications, the work of storing and accessing data is already provided for by many different.

After the data is accessed and loaded into an application's managed objects, the hard work for WPF applications begins. Essentially, this involves two things:. Copying the data from the managed objects into controls, where the data can be displayed and edited. To simplify application development, WPF provides a powerful data binding engine to automatically handle these steps.

The core unit of the data binding engine is the Binding class, whose job is to bind a control the binding target to a data object the binding source. This relationship is illustrated by the following figure:. This assumes there's a data object set to the DataContext property of the Window with a Name property. The WPF data binding engine provides more than just binding, it provides validation, sorting, filtering, and grouping. Furthermore, data binding supports the use of data templates to create custom user interface for bound data.

For more information, see Data binding overview. WPF provides an extensive and flexible set of graphics features that have the following benefits:. Resolution-independent and device-independent graphics. Each device-independent pixel automatically scales to match the dots-per-inch dpi setting of the system it renders on.

Improved precision. The WPF coordinate system is measured with double-precision floating-point numbers rather than single-precision.