Working with the TabControl

Silverlight also supplies a TabControl panel. You can define a set of tabs, each of which contains a set of
related controls. The TabControl is in the System.Windows.Controls.Extended namespace, therefore you
must reference the System.Windows.Controls.Extended.dll assembly.

The TabControl class is defined within the scope of a TabPanel control. TabPanel is defined within the
System.Windows.Controls.Primitives namespace, which is within the System.Windows.Controls.Extended.
dll assembly. This will require you to make a second xmlns/clr-namespace declaration. Given these points,
here is the initial declaration of a UserControl using a tabbing system.


<UserControl x:Class="FunWithSLControls.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ext=
"clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
xmlns:prim="clr-namespace:System.Windows.Controls.Primitives;
        assembly=System.Windows.Controls"
Width="400" Height="300">

<StackPanel Background="White">
<prim:TabPanel>
<ext:TabControl TabStripPlacement="Bottom" Height="200" Width="300">

</ext:TabControl>
</prim:TabPanel>
</StackPanel>

</UserControl>


The TabControl can contain any number of TabItems. The TabItem control represents 1 tab in the panel
system. The Header property allows you to establish the content shown on the tab. Within the scope of the
TabItem, you can place any collection of additional controls, typically wrapped in a nested panel type.

Consider the following tab panel system. Notice how the third tab has a more complex header, defined using
property-element syntax.


<prim:TabPanel>
<ext:TabControl TabStripPlacement="Bottom" Height="200" Width="300">
<ext:TabItem Header="First Tab">
  <Button Height="100" Width="100" Content="Tab 1"/>
</ext:TabItem>
<ext:TabItem Header="Second Tab">
  <Button Height="100" Width="100" Content="Tab 2"/>
</ext:TabItem>
<ext:TabItem>
  <ext:TabItem.Header>
    <StackPanel Orientation="Horizontal">
      <Ellipse Fill="Green" Height="40" Width="40"/>
      <TextBox Text="Three!" Height="20"/>
    </StackPanel>
  </ext:TabItem.Header>
  <Button Height="100" Width="100" Content="Tab 3"/>
</ext:TabItem>
</ext:TabControl>
</prim:TabPanel>
TabControl
Table of Contents
Copyright (c) 2008.  Intertech, Inc. All Rights Reserved.  This information is to be used exclusively as an
online learning aid.  Any attempts to copy, reproduce, or use for training is strictly prohibited.