We can use tab control to organize window more efficiently and easily. Two elements play an important role while creating a tab control in WPF. One is TabControl and another one is TabItem. In XAML <TabControl /> element is used to create a TabControl while <TabItem /> element is used to create <TabElement /> control. In this demonstration I will show you how to use tab control in WPF

XAML code snippet to create a Tab control
<Grid>
        <TabControl>
            <TabItem Header="Name">
                <Label x:Name="lblName" Content="Hello Awadhendra" />
            </TabItem>
            <TabItem Header="Image" >
                <Image Source="C:\Users\Public\Pictures\Sample Pictures\Hydrangeas.jpg" />
            </TabItem>
            <TabItem Header="Contact Us" >
                <Canvas>
                    <Label x:Name="lblUserName" Content="User Name" Canvas.Left="30" Canvas.Top="30" />
                    <TextBox x:Name="txtUserName" Width="200" Height="30" Canvas.Right="90" Canvas.Top="30" />
                    <Label x:Name="lblUserEmaiId" Content="Email Id" Canvas.Left="30" Canvas.Top="70" />
                    <TextBox x:Name="txtUserEmailID" Width="200" Height="30" Canvas.Right="90" Canvas.Top="70" />
                    <Label x:Name="lblUserContactNumber" Content="Contact Number" Canvas.Left="30" Canvas.Top="110" />
                    <TextBox x:Name="txtUserContactNumber" Width="200" Canvas.Right="90" Height="30" Canvas.Top="110" />
                    <Button x:Name="btnSubmit" Content="Submit Information" Canvas.Left="155" Canvas.Top="150" />
                </Canvas>
            </TabItem>
        </TabControl>
</Grid>
Output of the following code snippet is as follows

Tab control in WPF

Tab control in WPF

Tab control in WPF

 

  Modified On Nov-24-2017 07:19:24 AM

Leave Comment