Silverlight - TabControl

A container that places items into separate tabs and allows the user to view just one tab at a time. It allows the user to select from a number of different views by clicking on the tab headers. This control illustrates yet another variation on the content model. You can put anything you like as the content of a tab item. Normally you put a layout. Elements such as the stack panel.

Given below are the commonly used properties of TabControl.

Sr. No. Property & Description


Gets or sets a value indicating whether the control can accept data that the user drags onto it (Inherited from Control).



This API supports the product infrastructure and is not intended to be used directly from your code. This member is not meaningful for this control (Overrides Control.BackgroundImage).



Gets or sets which control borders are docked to its parent control and determines how a control is resized with its parent (Inherited from Control).



Gets or sets the height of the control (Inherited from Control).



Gets or sets the name of the control (Inherited from Control).



Gets or sets the width of the control (Inherited from Control). 6

Let us have a look at a simple example of TabControl, which contains two tabs.

   xmlns = "" 
   xmlns:x = "" 
   xmlns:d = "" 
   xmlns:mc = "" 
   xmlns:sdk = "" 
   x:Class = "TabControl.MainPage" 
   mc:Ignorable = "d" 
   d:DesignHeight = "300" d:DesignWidth = "400"> 
   <Grid x:Name = "LayoutRoot" Background = "White">
      <sdk:TabControl x:Name = "tabControl" HorizontalAlignment = "Left" Height = "172" 
         Margin = "80,77,0,0" VerticalAlignment = "Top" Width = "273">
         <sdk:TabItem Header = "First Tab">
            <Grid Background = "#FFE5E5E5">
                  <TextBlock Text = "First tab content" Margin = "0,0,0,20" /> 
                  <Rectangle Fill = "Aqua" RadiusX = "10" RadiusY = "10" Width = "100" 
                     Height = "40" /> 
         <sdk:TabItem Header = "Second Tab"> 
            <Grid Background = "#FFE5E5E5">
                  <TextBlock Text = "Second tab content" Margin = "0,0,0,20" /> 
                  <Ellipse Fill = "Azure" Width = "100" Height = "40" Margin = "10" /> 
                  <Button x:Name = "button" Content = "Button" 
                     HorizontalAlignment = "Left"Margin = "10" VerticalAlignment = "Top" 
                     Width = "75" RenderTransformOrigin = "0.494,1.715"/> 

When the above code is compiled and executed, you will see the content in the first tab.

TabControl First Tabe

When you click the second tab, you will see the content of second tab.

TabControl Second Tabe