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

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.

Previous Page