Silverlight TabControl in VB.NET

In this article we will learn how to use Tab control in Silverlight 4 using Visual Studio 2010.
  • 2203

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.

t1.gif

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.


t2.gif 

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=

                 "&lt;Image Height=&quot;150&quot; HorizontalAlignment=&quot;Left&quot;" VerticalAlignment="Top" />

                  <TextBlock Height="23" HorizontalAlignment="Left" Margin="10,43,0,0"Name=

                   "TextBlock2" Text="Margin=&quot;19,15,0,0&quot; Name=&quot;Image1&quot;"VerticalAlignment="Top" />

                   <TextBlock Height="23" HorizontalAlignment="Left" Margin="10,76,0,0"Name="TextBlock3" Text=

                      "Stretch=&quot;Fill&quot; VerticalAlignment=&quot;Top&quot; Width=&quot;200&quot;" VerticalAlignment="Top" />

                    <TextBlock Height="23" HorizontalAlignment="Left" Margin="-2,109,0,0"Name=

                       "TextBlock4" Text="Source=&quot;/SilverlightApplication44;component/Images/flowers-image.jpg&quot;          /&gt;" VerticalAlignment="Top" />

                </Grid>

            </sdk:TabItem>

        </sdk:TabControl>

 

Now run the application, the Design tab shows a image looks like this.


t4.gif 

Figure 3.

 

Now click on the XAML code Tab.


t5.gif 
Figure 4.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.