RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


WPF Wonders: An Alphabetical Compendium of WPF Controls : Page 5

Among many other changes, WPF brings a completely new set of controls. Learn which controls do what and pick up a few tips on getting the most out of them in your WPF applications.



The PasswordBox is a simple text box that hides the characters that it contains. The PasswordChar property determines what character is displayed instead of the characters that users type (by default it displays a dot). The Password property contains the password the users entered in the control.


The Path control draws a series of lines and curves. It can draw everything from a single line segment (in fact, Expression Blend's Line tool actually draws a Path that contains a line) to a complex Bezier curve.

The easiest way to use the Path control in XAML is to set its Data property to a series of commands written in the Path mini-language. Table 1 describes the language's commands very briefly. Note that many commands have both uppercase and lowercase versions; the uppercase version means the following points are in absolute coordinates, while the lowercase version means the points are relative to the previous points.

Table 1. Path Mini-Language: Because the Path control can draw complex filled or unfilled shapes, it has a special command language. .
Command Meaning
F0 Use odd/even fill rule so areas within a self-intersecting curve may not be filled.
F1 Use non-zero fill rule.
M or m Move.
L or l Draw lines.
H or h Draw a horizontal line.
V or v Draw a vertical line.
C or c Draw a cubic Bézier curve.
S or s Draw a smooth Bézier curve.
Q or q Draw a quadratic Bézier curve.
T or t Draw a smooth Bézier curve defined by a single point, using previous T commands to generate control points. The result is a smooth curve that passes through the points sent to consecutive T commands.
A or a Draws an elliptical arc.
Z or z Close the figure by connecting the current point to the first point.

The ControlSamples program uses the following code to draw its Path:

   <Path Stroke="Blue"
    Data="M10,10 T 30,30 70,20 100,20 80,30 40,10 10,30"/>
In Figure 2, small Rectangle objects show where the Path's control points are.

Author's Note: See the online help for more information on the Path mini-language.


The Polygon draws line segments connecting a series of points. It finishes by connecting the last point to the first.

To use the Polygon, set its Points property to the coordinates of the points that it should connect. The following code shows how program ControlSamples draws the yellow and red diamond.

   <Polygon Name="pgonDiamond"
    Margin="5" Points="20,0 40,20 20,40 0,20"
    Stroke="Red" Fill="Yellow"/>


The Polyline is similar to the Polygon except it doesn't automatically connect the first point to the last point. The following code shows how program ControlSamples draws the blue and red unclosed diamond.

   <Polyline Margin="5" Points="20,0 40,20 20,40 0,20"
    Stroke="Red" Fill="LightBlue"/>
Even if the first and last points have the same coordinates, the Polyline control doesn't produce exactly the same result as the Polygon. The Polygon treats that spot as a corner in the polygon, but the Polyline treats it as just the place where the first line starts and the last line ends. If the shapes' StrokeThickness values are very thick, you can see the difference.

Author's Note: Polyline and Polygon controls provide the same stroke and fill properties for determining color and line style that other drawing controls provide.


The Popup displays a floating area over the Window. Context menus, tool tips, and other floating features use the Popup to do their jobs and you can usually use those instead of using Popup directly. However, you can use a Popup to display a floating area programmatically at times when a ContextMenu or ToolTip isn't appropriate.

Author's Note: The Popup sits above all applications—not just yours—and it doesn't move when a user moves your application. That can produce some unexpected and confusing results, so use this control carefully.

The following list summarizes key Popup properties that control its behavior and appearance.

  • IsOpen: Determines whether the Popup is visible.
  • PlacementTarget: The object relative to which the Popup is positioned.
  • Placement: Determines where the Popup is relative to the PlacementTarget. This can take values such as Top, Bottom, Left, Right, and Mouse. For more information, see the online help.
  • HorizontalOffset: A horizontal offset for the Popup's placement.
  • VerticalOffset: A vertical offset for the Popup's placement.
The following code shows how the ControlSamples program displays a Popup below the yellow and red diamond.

   <Popup IsOpen="True" Placement="Bottom"
    PlacementTarget="{Binding ElementName=pgonDiamond}">
      <Border BorderBrush="Green" BorderThickness="1">
         <Label Content="I'm a Popup!"
          Background="White" Foreground="Green"/>


The ProgressBar displays progress information in much the same way as its Windows Forms counterpart.

The control's most important properties are Minimum (the smallest amount the bar displays), Maximum (the largest amount it displays), and Value (the current value).


The RadioButton displays an exclusive choice. If the user selects one RadioButton in a group, all others in the group automatically deselect.

Note that, in WPF, any container defines a RadioButton group. If you put two sets of RadioButtons in different containers (DockPanels, Canvases, or whatever), then selecting a RadioButton in one group won't affect the RadioButtons in the other group.


The Rectangle control draws a simple rectangle. Use the Margin property to determine the control's position, and the Width and Height properties to determine its size.

Rectangle provides the same stroke and fill properties for determining color and line style as other drawing controls.


Like the Windows Forms version, the RepeatButton acts as a button but fires repeated Click events if the user holds it down.

The control's most important properties are Delay (the number of milliseconds between the mouse press and the first repeat Click) and Interval (the number of milliseconds between subsequently fired Click events). By default, Delay is 500 and Interval is 33. When a user presses the button, it raises a Click event. Half a second later, it generates the second Click event. It then fires another Click event every 33 milliseconds after that until the user releases the button (the timing may not be exact).


The RichTextBox is similar to the Windows Forms version to the extent that they can both display Rich Text Format (RTF) content; however that's about as far as the similarity extends. The WPF version uses different properties and methods to format its contents.

The RichTextBox provides a plethora of advanced features, including formatting (bold, italic, bulleted list, numbered list, fonts, colors), undo and redo, and automatic spell checking with a suggestions popup. It even provides a set of editing commands with keyboard shortcuts that let users apply many formatting commands without you having to include any extra code in your program. You can find a list of the editing commands on MSDN.

You can also use the editing commands from code. For example, the following C# code toggles whether the currently selected text is part of a numbered list in the RichTextBox named rchBody.

   EditingCommands.ToggleNumbering.Execute(null, rchBody);
The RichTextBox is quite complicated so there isn't room to cover it in depth here. For more information, see the online help.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date