Tab Control Using WPF

Tab Control Using WPF Window Based

Each TabControl can contain Multiple collection of TabItem elements. TabItem has two specific attributes. 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. Bassically only one tab can be selected at a time otherwise the first tab in list will be selected.

Two elements play main roles in Creating a tab control: TabControl and TabItem. TabControl is the container of one or more TabItem elements.

Syntax of TabControl:

  <TabControl Margin="41,46,0,0" Name="tabControl1" Height="100"  VerticalAlignment="Top"  

HorizontalAlignment="Left" Width="200" />

In the following tag I create the TabControl in which Height is height of the TabContr, Name is the name of the 

TabControl, The Background and Foreground properties represent the background and foreground colors of a 

TabControl. The following code  sets the name, height, and width of a RadioButton control. The code also sets 

horizontal alignment to left and vertical alignment to top

<TabControl>
    <TabItem Header="Tab 1">Home</TabItem>
    <TabItem Header="Tab 2">Services</TabItem>

    <TabItem Header="Tab 3">Help</TabItem>
    <TabItem Header="Tab 4">Contact Us</TabItem>
</TabControl>

XAML Code for Tab Control-

<Window x:Class="WpfApplication7.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Window1" Height="370" Width="417">
    <Grid>
        <TabControl Margin="19,21,0,0" Name="tabControl1" Height="267" VerticalAlignment="Top" 
HorizontalAlignment="Left" Width="256" IsTabStop="True">
            <TabItem Header="Home" IsSelected="True" IsTabStop="False">
                <Image  ></Image>                
            </TabItem>
            <TabItem Header="Courses" IsSelected="True" Background="Goldenrod">
                <TextBlock Background="Gray">
           </TextBlock>
            </TabItem>
            <TabItem Header="Contact Us" IsSelected="True">                
            </TabItem>
        </TabControl>    
    </Grid>
</Window>