Windows Presentation Foundation (WPF) is one of the major extensions of .NET Framework 3.0 WPF is a new library to create the Ul for smart client applications, While the Windows Forms controls are native Windows controls that use Window handles that are based on screen pixels, WPF is based on DirectX, The application does not use Window handles. It is easy to resize the Ul, and it supports sound and video.
The main topics of this chapter are, as follows:
- An overview of WPF
- Shapes as the base drawing elements
- Scaling, rotating, and skewing with transformations
- Different kind of-brushes to fill elements
- WPF controls and their features
- How to define a layout with WPF panels
- The WPF event-handling mechanism
- Styles, templates, and resources
One of the big features of WPF is that work can be easily separated between designers and developers. The outcome from the designer’s work can directly be used by the developer, To make this possible, you need to understand XAML. The first topic of this chapter gives you an overview of WPF,including enough information to understand the principles of XAML. It also covers information on how designers and developers can cooperate. WPF consists of several assemblies containing thousands of classes. So that you can navigate within this vast number of classes and find what you need, the overview explains the class hierarchy and namespaces in WPF.
XML for Applications Markup Language (XAML) is an XML syntax used to define the hierarchical structure of the user interface. In the following line, you can see the declaration of a button named buttonl with the content Click Me!. The <Button> element specifies the use of the Butt on class:
<Button Name=”buttonl”>Click Me!</Button>
There’s always a .NET class behind an XAML element. With attributes and child elements, you set the value of properties and define handler methods for events.
To test simple XAML code, you can start the utility XAMLPad.exe (see Figure 34-1) and enter the XAML code in the edit field. You can write the <Button> element within the <Page> and <Grid> elements that are already prepared from XAMLPad. With XAMLPad, you can see the XAML outcome immediately.
XAML code can be interpreted by the WPF runtime, but it can also be compiled to BAML (Binary Application Markup Language), which is done by default by Visual Studio WPF projects. BAML is added as a resource to the executable.
Instead of writing XAML, you can also create a button with C# code. You can create a normal C# console application, add references to the assemblies Windows Base, Presentation Core, and Presentation Framework, and write the following code. In the Main () method, a window object from the namespace System. Windows is created, and the property Title is set. Then a Button object from the namespace System. Windows . Controls is created, the Content is set, and the Content of the window is set to the button. The Run () method of the Application class is responsible for processing Windows messages:
The Application class can also be defined by using XAML. With a Visual Studio WPF project, open . the file App. xaml that includes the properties and StartupUri of the Application class.
Running the application, you get a Window containing the button, as shown in Figure 34-2.
As you can see, programming WPF is very similar to Windows Forms programming – with the small difference that the Button has a Content instead of a Text property. However, compared to creating the VI forms with code, XAMLhas some great advantages. With XAML,the designer and developer can cooperate much better. The designer can work on the XAMLcode and design a stylish VI, while the developer adds functionality from the code behind using C#. It’s much easier to separate the VI from the functionality by using XAML.
You can directly interact with the elements that are defined with XAML from the C# code using code behind and XAML.You just need to define a name for the element and use the same name as a variable to change properties and invoke methods.
The button has a Content property instead of a Text property because the button can show anything, You can add text to the content, but also a graphic, a list box, a video – whatever you can think of.
Properties as Attributes
Before working with XAML, you need to know important characteristics of the XAML syntax. You can use XML attributes to specify the properties of classes, The example shows the setting of the Content and Background properties of the Button class:
<Button Content=”Click Me!” Background=”LightGreen” />
Properties as Elements
Instead of using XML attributes, the properties can also be specified as child elements. The value for the content can be directly set by specifying the child elements of the But ton element, For all other properties of the But ton, the name of the child element is defined by the name of the outer element, followed by the property name:
In the previous example, it is not necessary to use child elements.By using XML attributes, the same result was achieved, However, using attributes is no longer possible if the value is more complex than string. For example, the background can be set to not only a simple color but also to a brush, For example, you can define the following linear gradient brush:
When programming WPF, you often come across the term dependency property. WPF elements are classes with methods, properties, and events. Nearly every property of a WPF element is a dependency property, What does this mean? A dependency property can be dependent on other inputs; for example, themes and user preferences. Dependency properties are used with data binding, animation, resources, and styles.
From the programinatic viewpoint, a dependency property can be read and written not only by invoking the strongly typed property but also by methods passing a dependency property object.
Only a class that derives from the base class DependencyObject can include dependency properties, The following class, MyDependencyObject, defines the dependency property SomeState, SomeStateProperty is a static field of type DependencyProperty that backs the dependency property, The dependency property is registered with the WPF dependency property system using the Register () method, The register () method gets the name of the dependency property, the type of the dependency property, and the owner type, You can set the value of the dependency property by using the SetValue () method of the DependencyObject base class, and get the value by using the method GetValue (), Dependency properties usually have a strongly typed access as well, Instead of using the methods of the Dependency Object base class, the class MyDependencyObject includes the property SomeState, which invokes the methods of the base class from the implementation of the set and get accessors, You shouldn’t do something else in the implementation of the set and get accessors as these property accessors might not be invoked.
With WPF, the class Dependency object is very high in the hierarchy. Every WPF element is derived from this base class.
A WPF element can also get features from the parent element. For example, if the Button element is located inside a Canvas element, the button has Top and Left properties that are prefixed with the parent element’s name. Such a property is known as attached property:
<Button Canvas.Top=’30’ Canvas.Left=’40’>
Writing the same functionality from the code behind is a bit different because the Button class doesn’t have a Canvas. Top Canvas, Left property, even if it is contained within the Canvas class, There is a naming pattern for setting attached properties that is common with all classes. The class supporting attached properties has static methods with the names Set<Property> and Get<Property>, where the first parameter is the object that the property value is applied to. The Canvas class defines the static methods SetLeft () and SetTop () to get the same result as in the XAML code shown earlier.
All attached property can be implemented as a object, The method DependencyProperty .RegisterAttached () register: an attached property.
When setting values for elements, you can set the value directly, However sometimes markup extensions are very helpful, Markup extensions consist of curly brackets followed by a string token that defines the type of the markup extension. Here is an example of a StaticResource markup extension:
<-Button Name=”buttonl” Style=” (StaticResource key}” Content=”Click Me” />
Instead of using the markup extension, you can write the same thing using child elements:
<StaticResource ResourceKey=”key” />
Markup extensions. are mainly used ‘for accessing resources and for data binding.
Cooperation of Designers and Developers
Very often, developers not only implement Windows applications, but are also responsible for the design, This is especially true if the application was built just for in-house use, If someone with UI design skills was hired to design the UI usually the developer is given a JPG file of the designer’s vision of how the UI should look, The developer then has the problem of trying to match the designer’s plans, Even simple changes by the designer, such as a different look for list boxes or buttons, can lead to a huge investment using owner-drawn controls, As a result, the UI done by the developer looks very different from the VI that was originally designed.
With WPF, this changes. The designer and developer can work on the same XAMl code, The designer can use a tool such as Expression Blend, while the developer uses Visual Studio 2008, Both can work using the same project files, In the typical progression of this cooperative process, the designer starts a project with Expression Blend, using the same project files as in Visual Studio, Then the developer takes over to work on the code behind. while the designer enhances the UI, As the developer enhances the functionality, the designer can also add new UI features that take advantage of the functionality provided by the developer.
Of course, it is also possible to start the application with Visual Studio and enhance the UI later With Expression Blend, You just need to be careful not to do a UI as you used to do with Windows Forms because this doesn’t take full advantage of WPF.
Figure 34-3 shows Expression Blend that was created by using WPF.
Comparing Expression Blend to Visual Studio extensions, the Expression Blend has great features for defining styles, creating animations, using graphics, and the like. To work cooperation, the Expression Blend can use code-behind classes done by the developer, and the designer can specify the data binding from the WPF elements to the .NET classes. The designer can also test the complete application by starting it from Expression Blend, Because Expression Blend uses the same MS-Build files as Visual Studio do the code-behind C# code is compiled to run the application.
WPF consists of thousands of classes with a deep hierarchy To help in understanding the relationship among the classes, Figure 34·4 shows some of the WPF classes in a class diagram, Some classes and their functionality are described in the following table.
As you can see, WPF classes have a really deep hierarchy. In this and the next chapter, you will see classes of the core functionality but it is not possible to cover all the features of WPF.
Classes from Windows Forms and WPF can easily be confused, The Windows Forms classes are located in the namespace System Windows Forms, while the WPF classes are located inside the namespace System Windows and subnamespaces thereof, with the exception of System Windows Forms The Button class for Windows Forms has the full name System. Windows Forms Button, and the Button class for WPF has the full name System. Windows.Controls. Button.
Namespaces and their functionality with WPF are described in the following table.