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

Border

The Border control draws a border around its single child control. If you want to put more than one control inside the Border, make the child a container such as a Grid and put the other controls inside that.

The control's CornerRadius property determines the radius of curvature for the Border's corners. Set CornerRadius to 0 to get square corners.

BulletDecorator

The BulletDecorator displays an item in a bulleted list. The control's Bullet property is an object that represents the bullet to display. Next to the bullet, the control displays a single child, normally a Label or TextBlock.

The following XAML code shows how program ControlSamples draws the first item in the bulleted list shown in Figure 2.

   <BulletDecorator>
      <BulletDecorator.Bullet>
         <Polygon Points="0,5 5,0 10,5 5,10"
          Stroke="Black" Fill="Yellow" />
      </BulletDecorator.Bullet>
      <Label Content="Choice 1"/>
   </BulletDecorator>

Button

The Button control behaves much like its Windows Forms counterpart. When the user clicks it, the Button raises its Click event.

The only interesting thing to note here is that the Button can only contain a single child, but you can make that child a container such as a Grid or StackPanel so it's not much of a restriction. The big Button shown in Figure 1 contains a Grid that holds a bunch of other controls.

Canvas

A Canvas is a container control that lets you explicitly position its child controls by setting their properties. The Canvas provides attached Top, Left, Bottom, and Right properties that determine a child's position. You set the control's Height and Width, together with either Canvas.Left or Canvas.Right and Canvas.Top or Canvas.Bottom.

For example, the following code shows how program ControlSamples creates the yellow Canvas control and its two Rectangles on the left in Figure 2.

   <Canvas Background="Yellow" 
     Height="50" Margin="0,10,0,0">
     <Rectangle Fill="Orange" Stroke="Black"
       Canvas.Top="10" Canvas.Left="10" 
       Width="40" Height="20"/>
     <Rectangle Fill="Green" Stroke="Black"
       Canvas.Right="5" Canvas.Bottom="5" 
       Width="40" Height="20"/>
   </Canvas>

The first Rectangle's Canvas.Top and Canvas.Left properties position the control 10 pixels down and to the right of the Canvas's upper left corner. The second Rectangle's Canvas.Right and Canvas.Bottom properties position it five pixels left and up from the Canvas's lower right corner.

CheckBox

The CheckBox behaves much as the Windows Forms version does, with as few properties renamed. Instead of Checked, this version uses IsChecked to determine whether the box is checked. Similarly, it uses IsThreeState rather than ThreeState to determine whether the control allows three states: checked, unchecked, and indeterminate.

Instead of a CheckChanged event, the control fires separate Checked and Unchecked events when users check or uncheck it.

ComboBox

Like its Windows Forms counterpart, the ComboBox displays a dropdown list of items that the user can select. The control provides SelectedIndex, SelectedItem, and SelectedValue properties to let you get or set the current selection.

The ComboBox contains a set of ComboBoxItem controls that hold the choices. Each ComboBoxItem can display a simple text value or hold a child control—possibly a container that holds other controls.

The following code shows how the ControlSamples program defines its ComboBox. (It's on the left below the CheckBoxes displaying the confused face and the text "Confusion.") The first and last items display simple text while the middle item displays a StackPanel containing an Image and a Label. The second item is selected in Figure 2 so you can see the result.

   <ComboBox Margin="5" Width="150" SelectedIndex="1">
      <ComboBoxItem Content="Mind"/>
      <ComboBoxItem>
         <StackPanel Orientation="Horizontal">
            <Image Source="Confusion.jpg" Height="30"/>
            <Label Content="Confusion"/>
         </StackPanel>
      </ComboBoxItem>
      <ComboBoxItem Content="Denial"/>
   </ComboBox>

ContextMenu

The ContextMenu displays a popup menu for another control. The control should have a ContextMenu attached element attribute that contains a ContextMenu element, which in turn should contain MenuItems that provide the commands users see in the menu.

The following code builds a Label that contains a ContextMenu.

   <Label Content="Right-Click Me"
    BorderBrush="Black" BorderThickness="1">
      <Label.ContextMenu>
         <ContextMenu>
            <MenuItem Name="mnuShowMessage" Header="Show Message"/>
            <MenuItem Name="mnuReformat" Header="Reformat Drive"/>
         </ContextMenu>
      </Label.ContextMenu>
   </Label>

DockPanel

The DockPanel is a container control that can attach its children to its edges. The child controls can use the attached DockPanel.Dock property to indicate the edge to which they should dock.

The sequence in which you add children to the DockPanel determines their attachment order. Each time it reaches a new child, the DockPanel attaches it to whatever portion of the control is left unclaimed by previous children.

The following code shows how ControlSamples defines its DockPanel and the Labels it contains. For simplicity, the following code by omits the Labels' BorderBrush and BorderThickness properties that give them the outlines shown in Figure 2:

   <DockPanel Margin="0,10,0,0" Width="150" Height="100"
    Background="Pink" LastChildFill="True">
      <Label Content="Top" DockPanel.Dock="Top"/>
      <Label Content="Left" DockPanel.Dock="Left"/>
      <Label Content="Bottom" DockPanel.Dock="Bottom"/>
      <Label Content="Right" DockPanel.Dock="Right"/>
      <Label Content="Fill"/>
   </DockPanel>

When the DockPanel's LastChildFill property is true (which it is by default), the control fills any remaining space with its last child.

DocumentViewer

Figure 3. Determined Document: The DocumentViewer displays fixed documents much as Adobe Acrobat displays PDF files.

The DocumentViewer displays fixed content, much like Adobe Acrobat displays PDF files. The UseDocumentViewer program shown in Figure 3 contains a DocumentViewer displaying a fixed document. If you resize the window, the DocumentViewer resizes, too, but the document remains unchanged. The text still appears at exactly the positions shown in Figure 3.

Unfortunately, the structure of a fixed document is too complex to cover in detail, but briefly, it contains a FixedDocument, which contains one or more PageContent objects. Each of those contains a FixedPage object that contains the document's interesting content: StackPanels, Labels, TextBlocks, and so forth.

Download the UseDocumentViewer program and look at its XAML code to see how this works.

Note that neither Expression Blend nor Visual Studio understand fixed documents very well, so their designers display error messages instead of content when you work with these controls, although the program still runs. If you need to work with FixedDocuments, use the sample program as a starting point and try to ignore the errors as you build your own programs.

Previous Page

Next Page