TreeView
The TreeView displays hierarchical data in a tree-like format similar to the one used by Windows Explorer. The TreeView should hold TreeViewItems with
Header properties set to the data that you want to display. For simple textual data, you can set the
Header property to the text you want displayed. To display something more complicated, you can create the
Header property as an attribute element.
To make a branch within the data hierarchy, simply place a TreeViewItem inside another TreeViewItem.
The following code shows how program
ControlSamples makes the
Physics branch of its TreeView. The
Physics item contains two sub-items. The first simply says "Falling." The second displays a horizontal StackPanel containing a TextBlock and an Image.
<TreeViewItem Header="Physics" IsExpanded="True">
<TreeViewItem Header="Falling"/>
<TreeViewItem>
<TreeViewItem.Header>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Quantum Stuff"/>
<Image Margin="10,0,0,0" Height="30"
Source="Confusion.jpg" Stretch="Uniform"/>
</StackPanel>
</TreeViewItem.Header>
</TreeViewItem>
</TreeViewItem>
WPF also allows you to bind a TreeView to a data source so it can build its display on the fly. That's more complicated, so I'll defer it to a later article.
UniformGrid
The UniformGrid arranges its children in a grid where every cell has the same height and width. It places its children in the cells in the order in which they are added to the grid, so you don't need to specify each child's row and column.
You don't need to specify the row heights or column widths either. You simply set the control's
Rows and
Columns properties to tell it how many rows and columns to make and it divides its area up accordingly.
ControlSamples' UniformGrid is orange and in the upper right corner.
Viewbox
The Viewbox displays a single child control resized and stretched in various ways. The control's
Stretch property (which can take the values
None,
Fill,
Uniform, and
UniformToFill) determines how the child is stretched. See the section earlier on the Image control for information about these values.
The
ControlSamples program uses the following code to display a Label that's stretched vertically.
<Viewbox Stretch="Fill" Height="50">
<Label Content="I'm Stretched!"
BorderBrush="Black" BorderThickness="1"/>
</Viewbox>
WindowsFormsHost
The WindowsFormsHost can hold Windows Forms controls. For example, you could use one to display a DateTimePicker, which has no WPF equivalent.
Unfortunately using the WindowsFormsHost isn't completely trivial. You need to perform three steps before you can use the control.
First, add a reference to the WindowsFormsIntegration library. In Visual Studio, you'll find it in the .NET references tab. In Expression Blend, you'll have to browse to find it. On my system it's here:
C:\Program Files\Reference Assemblies\
Microsoft\Framework\v3.0\
WindowsFormsIntegration.dll.
Second, add a reference to the
System.Windows.Forms.dll library. Again Visual Studio lists it on the .NET references tab and you have to browse to find it in Expression Blend. On my system it's installed here:
C:\Windows\Microsoft.NET\Framework\
v2.0.50727\System.Windows.Forms.dll.
Third, add a namespace similar to the following at the top of the XAML file.
xmlns:wf="clr-namespace:
System.Windows.Forms;assembly=System.Windows.Forms"
Now you can display the control using XAML code similar to the following.
<WindowsFormsHost Margin="0,5,0,0">
<WindowsFormsHost.Child>
<wf:DateTimePicker x:Name="dtpAppt"
Format="Short" Value="4/1/2010"/>
</WindowsFormsHost.Child>
</WindowsFormsHost>
Note that neither Expression Blend nor Visual Studio do a great job of crossing the WPF/Windows Forms boundary at design time. They tend not to display the Windows Forms control inside the host and they may not calculate the host's size correctly if it depends on the size of its contents.
WrapPanel
The WrapPanel lays out its children in a row or column much as a StackPanel does but with one main difference. When a StackPanel runs out of room, it stops displaying its children: all "overflow" children are clipped. When a WrapPanel runs out of room, it starts a new row or column and keeps going.
The WrapPanel on the right of
Figure 2 displays five Labels with various widths and heights. It places the first three on one row, runs out of room, so it creates a new row to hold the last two Labels.
Control Your Destiny
As you've seen, WPF provides a lot of controls, some that should seem familiar from Windows Forms and some that are completely new. This article contains enough information to let you know what each control does and how to get started using it, at least in straightforward ways.
You'll still probably need some practice using the controls to get the hang of them. It takes a while to figure out which combination of Grids, StackPanels, and other controls you prefer for building user interfaces.
There are also plenty of properties, methods, and events that this article doesn't even mention. Even the simplest controls have dozens of properties that you'll need to learn to use.
For more information about the WPF controls, check the
WPF Control Library web page. Meanwhile, download the examples and take a look at the code for yourself.