TabPanel: Handles the layout of items on a TabControl.

ToolbarPanel: Handles the layout of items in a Toolbar.

ToolbarOverflowPanel: Handles the layout of the controls that overflow from a Toolbar.

VirtualizingStackPanel: Used for large amounts of data binding scenarios. Renders only the visible items in the data collection.

InkCanvas: Canvas panel that accepts digital ink input. Used for scenarios like collection of signatures with Tablet PCs.

Image: The Image control display images (of type .bmp, .gif, .ico, .jpg, .png, .wdp, and .tiff). To preserve the image's aspect ratio, set the Width or Height, but not both. Additionally, the DecodePixelWidth should be set to the same size as the Width. This will cause the rendering engine to scale the image appropriately, potentially saving a significant amount of memory.

Listing 2-13 shows the XAML to load an image that shows a color wheel. Only the Width and DecodePixelWidth are set. The resulting Window is shown in Figure 2-14.

<Image Grid.Row="0" Grid.Column="0" Width="256" >
    <Image.Source>
        <BitmapImage DecodePixelWidth="256" UriSource="/
   Images/1460_PaintPalette_256x256.png"/>
    </Image.Source>
</Image>

Figure 2-14. Image control.

TextBlock and Label: Both the TextBlock and the Label controls are designed to provide text or other content to the user with a few distinctions. The TextBlock control is designed to be the light-weight "little brother" to the Label, deriving directly from UIElement.

The Label control provides access modifier capability and also derives from ContentControl, which opens up additional possibilities. Placing an underscore (_) before a letter enables the access modifiers. To provide an underscore in the Label, use a double underscore. In XAML, since it is essentially XML, the underscore is used because an ampersand would break the XAML. The Target attribute specifies the control to receive focus when the access modifier is keyed. You have to use a Binding expression, which is covered in Chapter 3.

Both the TextBlock and Label controls are illustrated in Listing 2-14 and Figure 2-15.

<TextBlock Grid.Row="0" Grid.Column="0" Margin="5,0"
   HorizontalAlignment="Right" Text="Text_Block:"/>
<TextBox Grid.Row="0" Grid.Column="1" Margin="5,0"
   HorizontalAlignment="Stretch"/>
<Label Grid.Row="1" Grid.Column="0" Margin="5,0"
   HorizontalAlignment="Stretch"
       HorizontalContentAlignment="Right" Content="_Label__
   Content:" Target="{Binding ElementName=SampleTextBox}"/>
<TextBox Name="SampleTextBox" Grid.Row="1" Grid.Column="1"
   Margin="5,0" HorizontalAlignment="Stretch" />

In the sample, the "L" in the Label content is the access modifier and the double underscore adds an underscore character to the rendered output.

Figure 2-15. TextBlock and Label controls.

ProgressBar: The final display-only control is the Progress Bar. Although technically a descendant of the RangeBase class, it does not enable user input like the Slider (see the next section). Figure 2-16 shows a progress bar sample. To have the bar in perpetual motion, set the IsIndeterminate property to True (although in Visual Studio 2010 Beta 2, this is not functioning properly — I'm sure it will be fixed by the final release of Visual Studio 2010 and .NET 4).

Figure 2-16. Progress Bar at 50 percent.

TextBox and PasswordBox: The TextBox and PasswordBox both allow for the input of standard text into the Window. The PasswordBox obfuscates the characters typed (using either the default system password character or a developer-specified character) and is used for collection of sensitive information. The TextBox exposes its contents through the Text property, the PasswordBox through the Password property.

<TextBox Text="Some Text"/>

<PasswordBox PasswordChar="X" Password="Some Text"/>

CheckBox: Check boxes represent Boolean values through the IsChecked property. The IsChecked property is nullable, which provides for three-state display (True, False, Unknown).

<CheckBox IsChecked="True" Content="True"/>
<CheckBox IsChecked="False" Content="False"/>
<CheckBox IsChecked="{x:Null}" Content="Null"/>

RadioButton: Radio buttons allow for a single selection within a range of choices. The choices are determined by the GroupName property. After one of the radio buttons is selected, the group can only be entirely unselected programmatically.

<RadioButton GroupName="RBSample" IsChecked="True" Content="Red"/>
<RadioButton GroupName="RBSample" Content="White"/>
<RadioButton GroupName="RBSample" Content="Blue"/>

Slider: The slider control is a ranged input control. Similar to the ProgressBar, the control takes Minimum, Maximum, and Interval values. Additionally, you can specify to show Ticks, the location, and the Tick frequency. Ticks? Those are the value lines that show on sliders.

<Slider Interval="1" Minimum="1" Maximum="10" IsSnapToTickEnabled="True"
    TickPlacement="BottomRight" TickFrequency="1"/>

DatePicker: New in Visual Studio 2010, the DatePicker control provides a concise method for getting (or displaying) date information by combining a TextBox with a Calendar control. Included in the many options is the capability to select multiple dates for a range of dates.

<DatePicker />

Calendar: Also new in Visual Studio 2010 is the Calendar Control. The difference between the Calendar and the DatePicker is the Calendar control is always in full display mode whereas the DatePicker's default look is similar to a text box.

<Calendar />

Button: Okay, you caught me. The Button control doesn't really fit in with the other controls in this section, because it's more of an action control. Buttons respond to a user's click. The following code shows the Button implemented with an event handler in the Window's code-behind file. In Chapter 4, you find out how to use Commands to gain much more control of Buttons, but for now clicking the button merely displays "Hello World."

<Button Content="Click Me" Click="Button_Click"/>
private void Button_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello World");
}

ComboBox and ListBox: The ListBox and the ComboBox in the sample below use a DataTemplate to create the display for the contained Items. The main difference between the two controls is that the ComboBox displays a single item with a drop-down selector (see Figure 2-18) and the ListBox shows the entire list of items up to the allowed space and scrolls the rest (see Figure 2-19). The ComboBox can be set up to enable selecting items that are NOT in the list, as well as editing the items in the list.

Both the ComboBox and ListBox shown in Figures 2-18 and 2-19 use the exact same XAML between the DataTemplate tags, so only the ComboBox XAML is shown in Listing 2-15.

<ComboBox Margin="5,0" HorizontalAlignment="Stretch" Hori
   zontalContentAlignment="Stretch" ItemsSource="{Binding
   Path=People}">
  <ComboBox.ItemTemplate>
    <DataTemplate>
      <Border HorizontalAlignment="Stretch"
   BorderBrush="AliceBlue" BorderThickness="1">
        <Grid HorizontalAlignment="Stretch">
          <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="Auto"/>
            <ColumnDefinition Width="*"/>
          </Grid.ColumnDefinitions>
          <TextBlock Grid.Row="0" Grid.Column="0" Grid.
   ColumnSpan="3" Margin="5,0" Text="{Binding Name}"/>
          <TextBlock Grid.Row="1" Grid.Column="0" Grid.
   ColumnSpan="3" Margin="5,0" Text="{Binding Address}"/>
          <TextBlock Grid.Row="2" Grid.Column="0"
   Margin="5,0" Text="{Binding City}"/>
          <TextBlock Grid.Row="2" Grid.Column="1"
   Margin="5,0" Text="{Binding State}"/>
          <TextBlock Grid.Row="2" Grid.Column="2"
   Margin="5,0" Text="{Binding Zip}"/>
       </Grid>
      </Border>
    </DataTemplate>
  </ComboBox.ItemTemplate>
</ComboBox>

Figure 2-18. The ComboBox.

Figure 2-19. The ListBox.

TreeView: The TreeView is a hierarchical ItemsControl much like Windows Explorer. The nodes (or branches) can be expanded or contracted, giving a nice user interface into any multilevel data. (See Figure 2-20.)

The sample shown in Listing 2-16 (taken from MSDN) uses hard-coded data, but with a simple hierarchical template tree views can be bound just like any other control.

<TreeView Name="myTreeViewEvent" >
    <TreeViewItem Header="Employee1" IsSelected="True">
        <TreeViewItem Header="Jesper Aaberg"/>
        <TreeViewItem Header="Employee Number">
            <TreeViewItem Header="12345"/>
        </TreeViewItem>
        <TreeViewItem Header="Work Days">
            <TreeViewItem Header="Monday"/>
            <TreeViewItem Header="Tuesday"/>
            <TreeViewItem Header="Thursday"/>
        </TreeViewItem>
    </TreeViewItem>
    <TreeViewItem Header="Employee2">
        <TreeViewItem Header="Dominik Paiha"/>
        <TreeViewItem Header="Employee Number">
            <TreeViewItem Header="98765"/>
        </TreeViewItem>
        <TreeViewItem Header="Work Days">
            <TreeViewItem Header="Tuesday"/>
            <TreeViewItem Header="Wednesday"/>
            <TreeViewItem Header="Friday"/>
        </TreeViewItem>
    </TreeViewItem>
</TreeView>

Figure 2-20. The TreeView.

DataGrid: Also new in the .NET 4 (along with the DatePicker and Calendar controls) is the DataGrid. (See Figure 2-21.) Conspicuously absent from the earlier versions of WPF, this control was part of the WPF Toolkit, an out-of-band release available from www.codeplex.com/wpf (still a great resource for WPF information).

The DataGrid has five base columns:

The DataGrid can be set to AutoGenerate the columns based on the data it is bound to (as in the sample). It then uses reflection to determine the best column type based on the data.

<DataGrid HorizontalAlignment="Stretch"
   VerticalAlignment="Stretch"
   AutoGenerateColumns="True" ItemsSource="{Binding
   People}">
</DataGrid>

Figure 2-21. A simple Data Grid.