WPF Tutorial

  • View

  • Download

Embed Size (px)


WPF Tutorial

Text of WPF Tutorial

Concepts of WPF: Introduction to XAML XAML stands for Extensible Application Markup Language. Its a simple language based on XML to create and initialize .NET objects with hierarchical relations. Altough it was originally invented for WPF it can by used to create any kind of object trees. Today XAML is used to create user interfaces in WPF, Silverlight, declare workflows in WF and for electronic paper in the XPS standard. All classes in WPF have parameterless constructors and make excessive usage of properties. That is done to make it perfectly fit for XML languages like XAML.

Advantages of XAML All you can do in XAML can also be done in code. XAML ist just another way to create and initialize objects. You can use WPF without using XAML. It's up to you if you want to declare it in XAML or write it in code. Declare your UI in XAML has some advantages: XAML code is short and clear to read Separation of designer code and logic Graphical design tools like Expression Blend require XAML as source. The separation of XAML and UI logic allows it to clearly separate the roles of designer and developer.

y y y y

XAML vs. Code As an example we build a simple StackPanel with a textblock and a button in XAML and compare it to the same code in C#.

Welcome to the World of XAML OK

The same expressed in C# will look like this:

// Create the StackPanel StackPanel stackPanel = new StackPanel(); this.Content = stackPanel; // Create the TextBlock TextBlock textBlock = new TextBlock(); textBlock.Margin = new Thickness(10); textBlock.Text = "Welcome to the World of XAML"; stackPanel.Children.Add(textBlock); // Create the Button Button button = new Button(); button.Margin= new Thickness(20); button.Content = "OK"; stackPanel.Children.Add(button);

As you can see is the XAML version much shorter and clearer to read. And that's the power of XAMLs expressiveness.

Properties as Elements Properties are normally written inline as known from XML . But what if we want to put a more complex object as content like an image that has properties itself or maybe a whole grid panel? To do that we can use the property element syntax. This allows us to extract the property as an own chlild element.

Implicit Type conversion

A very powerful construct of WPF are implicit type converters. They do their work silently in the background. When you declare a BorderBrush, the word "Blue" is only a string. The implicit BrushConverter makes a System.Windows.Media.Brushes.Blue out of it. The same regards to the border thickness that is beeing converted implicit into a Thickness object. WPF includes a lot of type converters for built-in classes, but you can also write type converters for your own classses.

Markup Extensions Markup extensions are dynamic placeholders for attribute values in XAML. They resolve the value of a property at runtime. Markup extensions are surrouded by curly braces (Example: Background="{StaticResource NormalBackgroundBrush}"). WPF has some built-in markup extensions, but you can write your own, by deriving from MarkupExtension. These are the built-in markup extensions: Binding To bind the values of two properties together. y StaticResource One time lookup of a resource entry y DynamicResource Auto updating lookup of a resource entry y TemplateBinding To bind a property of a control template to a dependency property of the control y x:Static Resolve the value of a static property. y x:Null Return null The first identifier within a pair of curly braces is the name of the extension. All preciding identifiers are named parameters in the form of Property=Value. The following example shows a label whose Content is bound to the Text of the textbox. When you type a text into the text box, the text property changes and the binding markup extension automatically updates the content of the label.


Namespaces At the beginning of every XAML file you need to include two namespaces. The first is http://schemas.microsoft.com/winfx/2006/xaml/presentation. It is mapped to all wpf controls in System.Windows.Controls. The second is http://schemas.microsoft.com/winfx/2006/xaml it is mapped to System.Windows.Markup that defines the XAML keywords. The mapping between an XML namespace and a CLR namespace is done by the XmlnsDefinition attribute at assembly level. You can also directly include a CLR namespace in XAML by using the clr-namespace: prefix.

Logical- and Visual Tree

Introduction Elements of a WPF user interface are hierarchically related. This relation is called the LogicalTree. The template of one element consists of multiple visual elements. This tree is called the VisualTree. WPF differs between those two trees, because for some problems you only need the logical elements and for other problems you want all elements.

Why do we need two different kind of trees? A WPF control consists of multiple, more primitive controls. A button - for example consists of a border, a rectangle and a content presenter. These controls are visual children of the button.

When WPF renders the button, the element itself has no appearance, but it iterates through the visual tree and renders the visual children of it. This hierarchical relation can also be used to do hit-testing, layout etc. But sometimes you are not interested in the borders and rectangles of a controls' template. Particulary because the template can be replaced, and so you should not relate on the visual tree structure! Because of that you want a more robust tree that only contains the "real" controls - and not all the template parts. And that is the eligibility for the logical tree.

The Logical Tree The logical tree describes the relations between elements of the user interface. The logical tree is responsible for: Inherit DependencyProperty values Resolving DynamicResources references Looking up element names for bindings Forwaring RoutedEvents

y y y y

The Visual Tree The visual tree contains all logical elements including all visual elements of the template of each element.
target or target