Windows Presentation Foundation (WPF) (#WPF, #WPFWindows)

Introduction: Windows Presentation Foundation (WPF) is a next-generation presentation system for building Windows client applications with visually stunning user experiences. With WPF, you can create a wide range of both standalone and browser-hosted applications.

The core of WPF is a resolution-independent and vector-based rendering engine that is built to take advantage of modern graphics hardware. WPF extends the core with a comprehensive set of application-development features that include Extensible Application Markup Language (XAML), controls, data binding, layout, 2-D and 3-D graphics, animation, styles, templates, documents, media, text, and typography. WPF is included in the Microsoft .NET Framework, so you can build applications that incorporate other elements of the .NET Framework class library.

WPF separates the appearance of a user interface from its behavior. The appearance is generally specified in the Extensible Application Markup Language (XAML), the behavior is implemented in a managed programming language like C# or Visual Basic. The two parts are tied together by data binding, events and commands.

The separation of appearance and behavior brings the following benefits:

• Appearance and behavior are loosely coupled.
• Designers and developers can work on separate models.
• Graphical design tools can work on simple XML documents instead of parsing code.

Markup & Code Behind: WPF offers additional programming enhancements for Windows client application development. One obvious enhancement is the ability to develop an application using both markup and code-behind.

Markup: XAML is an XML-based markup language that is used to implement an application’s appearance declaratively. It is typically used to create windows, dialog boxes, pages, and user controls, and to fill them with controls, shapes, and graphics.

 
 <Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    Title="Window with Button"
    Width="350" Height="200">
   <!-- Add button to window -->
   <Button Name="button">Click Me!</Button>

 </Window>

Code-Behind: The main behavior of an application is to implement the functionality that responds to user interactions, including handling events (for example, clicking a menu, tool bar, or button) and calling business logic and data access logic in response. In WPF, this behavior is generally implemented in code that is associated with markup. This type of code is known as code-behind. The following example shows the code-behind and updated markup from the previous example.

The XAML language includes language-level features that make it possible to associate code files with markup files, from the markup file side. Specifically, the XAML language defines the language features x:Class Directive, x:Subclass Directive, and x:ClassModifier Directive.

x:Code: It is a directive element defined in XAML. An x:Code directive element can contain inline programming code. The code that is defined inline can interact with the XAML on the same page. The following example illustrates inline C# code. Notice that the code is inside the x:Code element and that the code must be surrounded by <CDATA[…]]> to escape the contents for XML, so that a XAML processor (interpreting either the XAML schema or the WPF schema) will not try to interpret the contents literally as XML.

 <Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="MyNamespace.MyCanvasCodeInline">
   <Button Name="button1" Click="Clicked">Click Me! </Button>
   <x:Code><![CDATA[
     void Clicked(object sender, RoutedEventArgs e)
     {
        button1.Content = "Hello World";
     }
   ]]></x:Code>
 </Page>

Controls: 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 are hosted in either a window or a page, have a user interface (UI), and implement some behavior. Buttons, Menus, Navigation, Data display are some built-in WPF controls.

Layout: To arrange 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 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.
• Dock Panel : Child controls are aligned to the edges of the panel.
• Grid : Child controls are positioned by rows and columns.
• Stack Panel : Child controls are stacked either vertically or horizontally.
• Virtualizing Stack Panel : Child controls are virtualized and arranged on a single line that is either horizontally or vertically oriented.
• Wrap Panel : Child controls are positioned in left-to-right order and wrapped to the next line when there are more controls on the current line than space allows.

Difference between WPF Page & WPF Window

1. Window is a top-level container – similar to a Form in Windows Forms or a Window from any other UI platform whereas Page is a top-level element for hosted content. It may be hosted at the top-level within a Window, NavigationWindow, the browser, or a Frame. Page has the advantage of being agnostic to how it is hosted — e.g. you can host it in a NavigationWindow or the browser, and in either case there are certain properties that will propagate to its hosting container. These are WindowHeight, WindowWidth, and WindowTitle.
2. Pages can be used for XAML Browser Applications, you can also load them into your own application using the Frame control, or you can use a NavigationWindow and create the equivalent of a browser like application.
3. Pages are intended for use in Navigation applications (usually with Back and Forward buttons, e.g. Internet Explorer). Pages must be hosted in a NavigationWindow or a Frame whereas Windows are just normal WPF application Windows, but can host Pages via a frame container.
   Simply, Window is the root control that must be used to hold/host other controls (e.g. Button) as container whereas Page is a control which can be hosted in other container controls using NavigationWindow or a Frame. Note that NavigationWindow and Frame is another container controls. And Page control has its own goal to serve like other controls (e.g. Button). And the goal is to create browser like applications. So if you host Page in NavigationWindow, you will get the navigation implementation built-in.

Twitter Tag: #WPF, #WPFWindows