In this article we will learn how to use Tab control in Silverlight 4 using Visual Studio 2010.
TabControl
The TabControl is used to Represents a control that contains multiple items that share the same space on the screen.
Properties - The TabControl has the following properties.
Figure 1.
Header - The Header property of TabControl represents the header text of the header.
Creating TabControl in XAML
<sdk:TabControl Height="280" HorizontalAlignment="Left" Margin="15,8,0,0" Name="TabControl1"
VerticalAlignment="Top" Width="451">
The Width and Height property represents the width and the height of the control. Name property represents name of the control. The Header property of TabControl represents the header text of the header.
Adding Tab Items
Select the TabControl and right click on the TabControl. The Header property of TabControl represents the header text of the header.
Figure 2.
Addding two TabControl one named is design and other is XAML code. In design Form we takes a Image control and XAML code tab we takes TextBlock controls.
<sdk:TabControl Height="280" HorizontalAlignment="Left" Margin="15,8,0,0" Name="TabControl1"
VerticalAlignment="Top" Width="451">
<sdk:TabControl Height="280" HorizontalAlignment="Left" Margin="15,8,0,0" Name="TabControl1"
VerticalAlignment="Top" Width="451">
<sdk:TabItem Header="Design" Name="TabItem1">
<Grid>
<Image Height="150" HorizontalAlignment="Left" Margin="19,15,0,0" Name="Image1"Stretch=
"Fill" VerticalAlignment="Top" Width="200"Source="/SilverlightApplication44;component/Images/flowers-image.jpg" />
</Grid>
</sdk:TabItem>
<sdk:TabItem Header="XAML code" Name="TabItem3">
<Grid Width="440">
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,10,0,0"Name="TextBlock1" Text=
"<Image Height="150" HorizontalAlignment="Left"" VerticalAlignment="Top" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,43,0,0"Name=
"TextBlock2" Text="Margin="19,15,0,0" Name="Image1""VerticalAlignment="Top" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="10,76,0,0"Name="TextBlock3" Text=
"Stretch="Fill" VerticalAlignment="Top" Width="200"" VerticalAlignment="Top" />
<TextBlock Height="23" HorizontalAlignment="Left" Margin="-2,109,0,0"Name=
"TextBlock4" Text="Source="/SilverlightApplication44;component/Images/flowers-image.jpg" />" VerticalAlignment="Top" />
</Grid>
</sdk:TabItem>
</sdk:TabControl>
Now run the application, the Design tab shows a image looks like this.
Figure 3.
Now click on the XAML code Tab.
Figure 4.