VB.NET Tab Control in WPF

In this article you will see how to built tab control in WPF.
  • 2043
You can easily build a tab control from the scratch with markup codes. There are two elements TabControl and TabItem which plays main roles in building a tab control. TabControl is the container of one or more TabItem elements.

Each TabControl can contain a collection of TabItem elements.  TabItem has two specific attributes. Header and IsSelected where Header is the string value that you see on top of each tab and IsSelected is a Boolean value that specifies if a tab is selected.  Apparently only one tab can be selected at a time. Below is an example of a TabControl with three TabItem.

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="UseTabControl" Height="300" Width="300">
    <Grid>
        <TabControl Name="TabControl1" SelectedIndex="0">
            <TabItem Name="tabName" Header="Name">
                <StackPanel Margin="20,20,0,0">
                    <StackPanel Height="Auto" Width="Auto" Orientation="Horizontal">
                        <Label Height="25.96" Width="84">First Name</Label>
                        <TextBox Height="25" Width="147" />
                    </StackPanel>
                    <StackPanel Height="Auto" Width="Auto" Orientation="Horizontal">
                        <TextBox Height="25" Width="147" />
                    </StackPanel>
                </StackPanel>
            </TabItem>
            <TabItem Name="tabAddress" Header="Address">
                <StackPanel Margin="20,20,0,0" >
                    <StackPanel Height="Auto" Width="Auto" Orientation="Horizontal">
                        <Label Height="25.96" Width="84">Full Address</Label>
                        <TextBox Height="25" Width="147" />
                    </StackPanel>
                </StackPanel>
            </TabItem>
            <TabItem Name="tabPicture" Header="Picture">
                <Image Margin="50,66,67,50" Name="Image1" Source="c:\Image.jpeg" Stretch="Uniform" StretchDirection="DownOnly" />
        </TabControl>
    </Grid>
</Window>

OUTPUT

Result after click on Tab1

tabcontrol1.gif

Tab2

tabcontrol2.gif

Tab3

tabcontrol3.gif

CONCLUSION

I hope this will help you to understand TabControl in WPF Application.

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.