TabControl

Intertech Tutorials

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

Copyright (c) 2008-2013. 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.