TabControl use in WPF

In this article, We will see how to use tab control in WPF.The Tab Control is easier in Windows Presentation Foundation. The Tab Control is the very easy control. The tab control like the two element <TabControl> and <TabItem>. The Tab control is a common UI element that has been around for some time. It makes a convenient way to organize your window when there is more than could realistically fit and still be comprehensible. 

Example:-

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="500">
    <Grid>
        <TabControl>
            <TabItem Header="Rose Flower">
                <Image Source="Image\Rose.jpeg" Width="200" Height="200" />
            </TabItem>
            <TabItem Header="Hydrangea Flower">
                <Image Source="Image\Hydrangea.jpeg" Width="200" Height="200" />
            </TabItem>
            <TabItem Header="Carnation Flower">
                <Image Source="Image\Carnation(Pink).jpg" Width="200"
Height="200"></Image>
            </TabItem>
        </TabControl>
    </Grid>
</Window>

Output:-Like most other WPF controls, the contents of a TabItem can be most any other WPF control. Let's look at a tab with an image set as the content.

Example:- We will use 'TabControl', 'TabItem','TabItem.Header','StackPanel','Image' and 'TextBlock' in this example. We will put an image in each of the tabs.

<Window x:Class="Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="300" Width="500">
    <Grid>
        <TabControl>
            <TabItem>
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Height="25"
Source="Image\Rose.jpeg"></Image>                       
                        <TextBlock Text="Rose Flower" Margin="2,0,0,0"
VerticalAlignment="Center" />
                    </StackPanel>
                </TabItem.Header>
            </TabItem>
            <TabItem>
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Height="25" Source="Image\Hydrangea.jpeg"></Image>
                        <TextBlock Text="Hydrangea Flower" Margin="2,0,0,0"
VerticalAlignment="Center" />
                    </StackPanel>
                </TabItem.Header>
            </TabItem>
            <TabItem>
                <TabItem.Header>
                    <StackPanel Orientation="Horizontal">
                        <Image Height="25" Source="Image\Carnation(Pink
.jpg"></Image>
                        <TextBlock Text="Carnation Flower" Margin="2,0,0,0"
VerticalAlignment="Center" />
                    </StackPanel>
                </TabItem.Header>
            </TabItem>           
        </TabControl>       
    </Grid>
</Window>

Output:-