Home | Contact Us

WPF, Windows Presentation Foundation: Examples

This C# page covers WPF, Windows Presentation Foundation. It provides example XAML, C# and screenshots.

WPF. Graphical interfaces are important. They make programs easier to use.

WPF is a framework for rendering Windows programs. With XAML, a special markup language, it provides stunning effects.

Window. First we show the Window control. Please open Visual Studio and create a new WPF project. In one pane, you will see XAML markup similar to this. The controls (and their attributes) are specified in this markup.

Here: I changed the "Title" of the window to be the name of this website. This could also be changed in a C# event handler.

Based on:

.NET 4.5

Example markup: XAML

<Window x:Class="WpfApplication1.MainWindow"
	Title="Dot Net Perls" Height="350" Width="525">


Example code: C#

using System.Windows;

namespace WpfApplication1
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
	public MainWindow()

DataGrid. A DataGrid is a useful control. It stores and displays tabular data. It can be used with object collections and databases. It supports visual formatting of data, and selecting and editing of cells by the user.


Tip: A DataGrid uses TextBox controls (described below) for the editing of its data. Please see the EditingElement property.

Button, CheckBox. Interactive elements are key to most WPF programs. The Button control allows the user to activate a command. And the CheckBox control stores up to three states: Checked, Unchecked and Indeterminate.


ComboBox: A ComboBox displays a pop-up menu when the user clicks on it. Several options are presented. Only one can be selected.


RadioButton: A RadioButton is just like a CheckBox, except it requires that only one element at a time is checked.


Tip: Controls are flexible, but choosing the one most closely matching your requirements makes development easier.

Text. Many controls store text in WPF. The TextBox can be directly edited by the program's user. The Label stores short text descriptions. And TextBlock is designed to store longer blocks of text.

TextBox: The TextBox is editable by the user. It offers selection, copy and paste, and typing support.


Label, TextBlock: These store text in a static way. They provide no editing support. They can be changed dynamically in C# code.


PasswordBox: Similar to a TextBox, a PasswordBox accepts user input. But this control obscures characters (usually with a bullet char).


Image. With the Image control, we render an image directly within a WPF application. No special code is needed to display a JPEG or PNG (or other common bitmap formats). Images can be scaled.


Also: We learn to use the BitmapImage type in System.Windows Media.Imaging. Some tricks are required.

Note: It took me some effort to figure out how to use images in WPF. The BeginInit and EndInit methods are needed.

Tree. Items often naturally appear in a hierarchy. Some are descendants of others. A tree structure can visually represent these items and their relations. We use the TreeView control in WPF.


Dates, numbers. With WPF, one goal is to make programs faster to develop. We use prebuilt widgets (controls) to piece together programs. And for dates and calendars, we can use the DatePicker and Calendar controls.


Slider: Sometimes we need to allow the user to select a number within a range. This is similar to a volume slider for sound.


ProgressBar: When a task takes time to be completed, we can display its progress with a ProgressBar. We manipulate its Value.


Layout. Some controls affect the visual layout of a WPF program. In a general sense, these are used to organize and make clear the purpose of other controls. They are not the focus of a program.

Border: The Border control draws a line around a rectangular area. We can nest other controls within one.


Canvas: With a Canvas, we position elements. We specify coordinates relative to the edges of the Canvas.


Grid: A grid helps you arrange controls in an area. Often other controls nest a grid to organize sub-controls.


Expander: An Expander displays an arrow. When the arrow is clicked, an area is expanded. This area can contain other controls.


GroupBox: A GroupBox displays a header and a rectangle around some sub-controls. We add a Grid or another layout control to it.


ScrollViewer: A ScrollViewer allows scrolling of its internal controls. It makes an interface able to accommodate many sub-controls.


TabControl: Tabs are a great metaphor. We use them in our daily lives to separate different things. A TabControl extends this metaphor.


Animation. WPF supports animation of elements natively with the DoubleAnimation element. In this example, a rectangle moves across its parent canvas. C# code is not required to support simple animation.


Storyboard: We use Storyboard elements, including BeginStoryboard, to specify an animation's nature. This sounds more complex than it is.

Panels are also a layout control. In them, we add sub-controls and the panel determines how those are arranged. This makes programs easier to develop, but also much neater and cleaner in design.

DockPanel: With a DockPanel, we anchor controls to the edges. We can even have the DockPanel stretch to fill the Window.


StackPanel: A StackPanel stacks things, one on top of another. We use it to display controls ordered in a column.


WrapPanel: A WrapPanel wraps things. We can nest controls, such as Buttons, within this panel and they will flow like text.


ToolBars. For programs with many buttons and options, a ToolBar is essential. And you cannot easily use a ToolBar alone—you need also a ToolBarPanel. These controls can be dragged and rearranged.


Bands: ToolBars are arranged into one or more "bands." On one band, one or more ToolBars can be placed.

Transforms, shapes. Unlike Windows Forms, WPF supports advanced graphical transforms of controls. We can scale, skew and rotate controls. Even complex controls, like DataGrid, can be transformed. Often these effects are not needed.


Ellipse: Shapes are easily added in WPF programs. They are rendered with anti-aliasing. We use the Ellipse to render a circle.


Rectangle: Rectangles are also available in WPF programs. We can round the corners of rectangles for a nice effect.


Viewbox: A Viewbox scales an internal control. It can scale the control in different ways.


Browser. Our applications can have an embedded web browser, one based on Internet Explorer. This is useful in many programs. Web pages can be loaded from the network, or locally from the disk.


So: You can browse useful Wikipedia articles (and not useful ones also) directly within a WPF program.

However: Wikipedia may make it difficult to return to coding without the excess passage of time.

Attributes. WPF programs connect the C# code to the XAML markup. One useful attribute is Name. When we specify this attribute in XAML, we can access the control from a property anywhere in the C# code.


ToolTip: With a ToolTip, a tiny window appears near the cursor when you hover over something. The ToolTip explains the UI.


HorizontalAlignment: This property, along with VerticalAlignment, enables a control to be aligned, centered, or stretched in one direction.


IsEnabled: The IsEnabled property allows you to make a control inaccessible. By default, controls are enabled.


ListView. A ListView is a container control. We nest within it another control, often GridView, and that control displays the data. But the ListView provides a unified way to interact with the inner control.


For Windows Forms developers, the ListView in WPF is not the same thing as the Windows Forms version. In Windows Forms, a ListView displays an icon-based view, similar to a file system. It is different.

However: Nothing in life stays the same. And often a ListView is not needed in WPF programs.

Windows Forms

Menu. A Menu provides commands but takes up little space. With the Menu control, and the MenuItem and Separator controls, we construct usable menu bars. The Click event handles interactions with the menu.


Also: A MenuItem has nested children. These represent sub-menus. So MenuItem serves more than one purpose.

Keys. We can test key presses in WPF with the KeyDown and KeyUp event handlers. Then when a key is pressed, we can test it with the Key property within the event handler. In our example, we check for the F5 key.


WindowsFormsHost. WPF is a replacement for Windows Forms. But with the WindowsFormsHost, a compatibility feature, you can use Windows Forms controls in WPF. We must specify a special namespace and use XAML.


Summary. The XML used in WPF applications (XAML) stores controls in a clear, intuitive way. This is a key advantage to Windows Presentation Foundation programs. It makes applications easier to understand and develop.