The Windows Presentation Foundation is Microsoft’s next generation UI framework to create applications with a rich user experience. It is part of the .NET framework 3.0 and higher.
WPF combines application UIs, 2D graphics, 3D graphics, documents and multimedia into one single framework. Its vector based rendering engine uses hardware acceleration of modern graphic cards. This makes the UI faster, scalable and resolution independent.
Separation of Appearance and Behavior
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.
Controls in WPF are extremely composable. You can define almost any type of controls as content of another. Although this flexibility sounds horrible to designers, it’s a very powerful feature if you use it appropriate. Put an image into a button to create an image button, or put a list of videos into a combo box to choose a video file.
<Image Source="speaker.png" Stretch="Uniform"/>
<TextBlock Text="Play Sound" />
Because of the strict separation of appearance and behavior you can easily change the look of a control. The concept of styles let you skin controls almost like CSS in HTML. Templates let you replace the entire appearance of a control.
The following example shows a default WPF button and a customized button.
All measures in WPF are logical units - not pixels. A logical unit is a 1/96 of an inch. If you increase the resolution of your screen, the user interface stays the same size - if just gets crispier. Since WPF builds on a vector based rendering engine it's incredibly easy to build scalable user interfaces.
Introduction to XAMLXAML stands for Extensible Application Markup Language. It’s a simple language based on XML to create and initialize .NET objects with hierarchical relations. Although it was originally invented for WPF it can be used to create any kind of object trees.
Today XAML is used to create user interfaces in WPF, Silver light, declare workflows in WF and for electronic paper in the XPS standard.
Advantages of XAMLAll you can do in XAML can also be done in code. XAML is 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.
XAML vs. CodeAs an example we build a simple StackPanel with a textblock and a button in XAML and compare it to the same code in C#.
<TextBlock Margin="20">Welcome to the World of XAML</TextBlock>
<Button Margin="10" HorizontalAlignment="Right">OK</Button>
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";
// Create the Button
Button button = new Button ();
button.Margin= new Thickness (20);
button.Content = "OK";
As you can see is the XAML version much shorter and clearer to read. And that's the power of XAMLs expressiveness.
Properties as ElementsProperties are normally written inline as known from XML
<Button Content="OK" />. 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 child element.
<Image Source="Images/OK.png" Width="50" Height="50" />
Implicit Type conversionA very powerful construct of WPF are implicit type converters. They do their work silently in the background. When you declare a Border Brush, the word "Blue" is only a string. The implicit
Brush Convertermakes a
System.Windows.Media.Brushes.Blueout of it. The same regards to the border thickness that is being converted implicit into a
Thicknessobject. WPF includes a lot of type converters for built-in classes, but you can also write type converters for your own classes.