TheDeveloperBlog.com


WPF, Windows Presentation Foundation: Examples

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"
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	Title="Dot Net Perls" Height="350" Width="525">
    <Grid>

    </Grid>
</Window>

Example code: C#

using System.Windows;

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


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.

DataGrid

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.

ButtonCheckBox

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

ComboBox

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

RadioButton

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.

TextBox

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

LabelTextBlock

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

PasswordBox

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.

Image

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.

TreeView

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.

DatePickerCalendar

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

Slider

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

ProgressBar

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.

Border

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

Canvas

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

GridGridSplitter

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

Expander

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

GroupBox

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

ScrollViewer

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

TabControl

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.

DoubleAnimation

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.

DockPanel

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

StackPanel

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

WrapPanel

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.

ToolBar

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.

RenderTransform

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

Ellipse

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

Rectangle

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

Viewbox

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.

WebBrowser

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.

Name

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

ToolTip

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

HorizontalAlignment

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

IsEnabled

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.

ListView

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.

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.

KeyDown

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.

WindowsFormsHost

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.