poshgui.com

  • Home
  • Pricing
  • Documentation
    • Features | Roadmap
    • Changelog
    • Docs
    • Video Tutorials
  • Contact
  • About
  • Login
  • Home
  • Pricing
  • Documentation
    • Features | Roadmap
    • Changelog
    • Docs
    • Video Tutorials
  • Contact
  • About
  • Login

Docs

In-depth how-to’s on PoshGUI features

Popular Search textboxbuttonimagecombopicture

WPF

  • Starting New Project
  • Adding controls
  • Changing properties
  • Layout
  • Adding Events and Logic
  • DataContext
  • Exporting your project
  • Multithreading
  • Multipage Applications
  • Custom Lists
  • Controls
    • Tab Control
    • Grid
    • Border
    • StackPanel
    • ProgressBar

WinForms

  • Exporting your project
  • Starting New project
  • Adding controls
  • Changing Properties
  • Adding Events and logic

General

  • Cross-platform support
  • Code editors Keyboard Shortcuts
  • Why the UI on the site looks different than in runtime
  • Privacy Policy
  • Terms & Conditions
View Categories
  • Home
  • Docs
  • WPF
  • Controls
  • Tab Control

Tab Control

In this section, we are going to explore more about the effective tool of TabControl along with its functionalities, and methods.

TabControl allows you to have multiple pages on the same area and you can have different controls within each of the TabItem as well. We will be covering the following topics:

Setting Up TabControl #

Setting up TabControl is quite easy and simple. The steps are as follows:

Go to the TOOLBOX and select TabControl. Drag it to the WPF form.

To make it fit on the page, simply right-click the TabControl and select Fill Parent from the drop-down.

Changing the headers of TabItem #

You can change the headers of TabItems directly in the XAML Panel. For that, go to the designer tab and change the name in the field of Header as per your choice.

Adding new TabItems #

You can add new TabItems in the XAML panel by adding additional TabItem controls within the TabControl, like this:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="800" Height="400">
<Grid>
<TabControl>
<TabItem Header="Tab1">
<Grid Background="#FFE5E5E5"></Grid>
</TabItem>
<TabItem Header="Tab2">
<Grid Background="#FFE5E5E5"></Grid>
</TabItem>
<TabItem Header="Tab3"> <!-- Add a <TabITem> tag to add a new page -->
<Grid Background="#FFE5E5E5"> <!-- Add a Grid to be able to insert multiple new controls -->
</Grid>
</TabItem>
</TabControl>
</Grid>
</Window>
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="800" Height="400"> <Grid> <TabControl> <TabItem Header="Tab1"> <Grid Background="#FFE5E5E5"></Grid> </TabItem> <TabItem Header="Tab2"> <Grid Background="#FFE5E5E5"></Grid> </TabItem> <TabItem Header="Tab3"> <!-- Add a <TabITem> tag to add a new page --> <Grid Background="#FFE5E5E5"> <!-- Add a Grid to be able to insert multiple new controls --> </Grid> </TabItem> </TabControl> </Grid> </Window>
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="800" Height="400">
  <Grid>
    <TabControl>
        
      <TabItem Header="Tab1">
        <Grid Background="#FFE5E5E5"></Grid>
      </TabItem>
      
      <TabItem Header="Tab2">
        <Grid Background="#FFE5E5E5"></Grid>
      </TabItem>
      
        <TabItem Header="Tab3"> <!-- Add a <TabITem> tag to add a new page -->
        <Grid Background="#FFE5E5E5"> <!-- Add a Grid to be able to insert multiple new controls -->
            
        </Grid>
      </TabItem>
      
      
    </TabControl>
  </Grid>
</Window>

Switching Tabs during the design #

You can witness that, by default, the selected TabItem is the first one and you cannot change it by simply clicking. However, you can change the initial selected TabItem in two ways that are described below:

Changing the SelectedIndex in properties panel #

Go to the Common under the PROPERTIES of TabControl.

Find the option of SelectedIndex which is by default set at -1.

SelectedIndex property is zero-based meaning setting this value to 0 will select the first tab, setting to 1 the second one, etc.

You can add controls into each of the TabItems by dragging and dropping.

Note: You can keep on incrementing these numbers as per the total number of TabItems and your choice.

Changing the SelectedIndex of TabControl by DataContext #

To set the selected TabItem from the DataContext, the steps are as follows:

Go to the DATACONTEXT tab from the left sidebar.

Enter the initial index in any variable in JSON format. We have, for instance, set the value as 0 and stored it in ‘index’.

Under the PROPERTIES of TabControl, and select Common.

To the right of SelectedIndex, find the binding icon.

Click on it and select the property of ‘index’ (your created property in DataContext) from the dropdown.

It will automatically set that value as the selected TabItem. Also, it’s the initial value, you can always modify it when the application is running.

Properties, Methods and Events #

All of the properties, methods, and events can be found in Microsoft’s documentation at:

https://docs.microsoft.com/en-us/dotnet/api/system.windows.controls.tabcontrol?view=windowsdesktop-6.0

Still stuck? How can we help?

How can we help?

Updated on February 7, 2022
Table of Contents
  • Setting Up TabControl
    • Changing the headers of TabItem
  • Adding new TabItems
  • Switching Tabs during the design
    • Changing the SelectedIndex in properties panel
    • Changing the SelectedIndex of TabControl by DataContext
  • Properties, Methods and Events
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies.
Do not sell my personal information.
Cookie settingsACCEPT
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the ...
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT