TabControl in WPF using VB.NET

WPF control, TabControl, VB.NET, WPF
  • 4542

In this article we will learn how to use Tab control in WPF 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.

tab1.gif
 

Figure 1.

Header - The Header property of TabControl represents the header text of the header.

Creating TabControl in XAML

<TabControl Height="233" HorizontalAlignment="Left" Margin="10,10,0,0" Name="TabControl1"VerticalAlignment="Top"
 Width="333" Grid.ColumnSpan="2">
</TabControl>

 

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.


 

tab2.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.

 

<TabControl Height="233" HorizontalAlignment="Left" Margin="10,10,0,0" Name="TabControl1"VerticalAlignment="Top"
 Width="333" Grid.ColumnSpan="2">

</TabControl>

<Window x:Class="MainWindow"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Title="MainWindow" Height="350" Width="525">

    <Grid>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="501*" />

            <ColumnDefinition Width="2*" />

        </Grid.ColumnDefinitions>

        <TabControl Height="233" HorizontalAlignment="Left" Margin="10,10,0,0"Name="TabControl1" VerticalAlignment="Top" 
Width
="333" Grid.ColumnSpan="2">

            <TabItem Header="Cricket picture" Name="TabItem1">

                <Grid>

                    <Image Height="150" HorizontalAlignment="Left" Margin="10,10,0,0"Name="Image1" Stretch="Fill" VerticalAlignment="Top" 
Width
="200"Source="/WpfApplication9;component/Images/imagec26.jpg" />

                </Grid>

            </TabItem>

            <TabItem Header="XAML code" Name="TabItem2">

                <Grid>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="56*" />

                        <ColumnDefinition Width="148*" />

                        <ColumnDefinition Width="119*" />

                    </Grid.ColumnDefinitions>

                    <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" Grid.ColumnSpan="3" />

                    <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" Grid.ColumnSpan="2" />

                    <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" Grid.ColumnSpan="3" />

                    <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.ColumnSpan="3" />

                </Grid>

            </TabItem>

        </TabControl>

    </Grid>

    </Window>

 

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


 

tab3.gif
 

Figure 3.

 

Now click on the XAML code Tab.


 

tab4.gif
 

Figure 4.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.