Forms & Reports:
Tab Control

Title: Jan's Illustrated Computer Literacy 101
Did you want: Working with Databases: Access 2007/2010/2013


When you have a large number of controls to show, you can use a tab control to put your controls on separate pages.  You can tuck a large number of controls into a small space with this kind of control. In the illustration below, each page in the tab control holds one or more controls.

Student Address Phone #s Class Info Notes Form with tab control

Icon: Left Mouse Click Click on each tab to see the controls on each page.


Where you are:
JegsWorks > Lessons > Databases

Before you start...

Project 1: Intro

Project 2: Access Basics

Project 3: Tables & Queries

Project 4: Forms & Reports Arrow: subtopic open
    Import/Export/LinkTo subtopics
    Designing Forms Arrow: subtopic open
    Icon: StepForm Wizard
    Icon: StepControls
    Icon: StepCreate Form Manually
    Icon: StepFormat Form
    Icon: StepTab Control
    Icon: StepForm View
        Images in Forms & Reports
    Icon: StepForm Images
    Icon: StepRecord Images
    Icon: StepPrintable Form
    Designing ReportsTo subtopics
    Special Forms & ReportsTo subtopics
    Summary
    Quiz
    ExercisesTo subtopics


Search  
Glossary
  
Appendix



About the Tab Control

Form with tab control, labeledCreate:
Use the Tab Control button Button: Tab Control from the Toolbox bar to create a new control. The background can be transparent or Normal (that is, gray).

Parts of a tab control:
The default tab control has two tabs. The area that holds the controls is called a page. The tab for the current page appears raised. Current tab appears raised.
 

Tab Page selected, with its Properties dialogTab Control selected, with its Properties dialogSelecting a tab control:
Click the edge of the control. The handles show at the corners and middle of each edge.
If you miss the edge, either nothing will be selected or perhaps the tab page will be selected (if you click in just the right spot).

The Move handle of the control at the upper left will move the whole control.

Selecting a tab page:
Click the tab. Handles appear inside the tab control and the tab gets a dotted box around the text.

If you click on the page itself, nothing happens unless you happen to click where a page handle would appear. This selects the page but it takes a good eye since you cannot see what you need to click on!

Form Design View: tab control is above other controls. Clicking in the page area may select a control underneath.Also, if there is a control underneath the tab control, its handles will show if you click in the page area over the control. Of course you do not normally want to have controls that are hidden by a tab control. This situation can occur while you are revising your form.

 

Name Property:
The tab control will be named something like TabCtl24, where the number depends on how many other controls have already been created.

The default labels for the tabs are page numbers. If the tab control itself is named TabCtl24, then the two tabs will be named Page25 and Page26.

Change page name (what shows on the tab itself):
Use the Properties dialog. Surprisingly, you cannot edit the label on the tab itself.

Tab control with icon images on some tabsTab icons:
In the tab page's Picture property, you can click the ellipsis button Button: Ellipsis to open a wizard, Picture Builder, and choose an image for the tab. If you do not want any text along with the image, put a space in the Caption property.
 

Form Design View: icons on tabs, Picture Builder dialog, Properties dialog
 

Tab control with transparent background. Tabs are still in gray.Tab Control Background:
You can make the page part of the tab control transparent but you cannot change its color or use an image background. The tabs themselves remain in the default gray.
Form View: Multi Row = Yes for tab controlTabs in Rows:
Your tabs can be in more than one row. This is handy if the label text is long or if you have a large number of tabs. The tab control has a property called Multi Row, which you set to Yes to get this effect.

Form Design View: Multi Row tabs


Form Design View: Adding Controls to a Tab Page

Form Design View: tab control highlighted when dragging field from field listNew controls:
Select the tab page and use the normal tools to create a new control. If you are dragging from the Field List, be sure that the page area is highlighted when you drop. If it is not, you are dropping onto the form instead of onto the tab page.

Move existing controls to a tab page:
You must use copy-and-paste to move existing controls to a tab page. Select the controls and copy or cut them. Select the tab page (not the tab control!) and paste. If you copied, go back to the form and delete the controls.

WarningNo drag-and-drop to move existing controls.
If you drag and drop an existing control onto a tab page, the control goes onto the form, underneath the tab control instead of onto the tab page.


Form Design View: Managing Tab Pages

Menu: Insert | Tab Control PageRight Click Menu: Insert PageAdd a tab page to a tab control:

  • Right click on the tab control and select  Insert Page  
      OR
  • From the menu, select  Insert | Tab Control Page  to add a new page

Remove a tab page from a tab control:

  • In Form Design View, right click on the tab control and select  Delete Page .
      OR
  • Select the page and press the Delete key.
     

Dialog: Page OrderChange order of pages in the tab control:

Right click on the control and choose Page Order from the menu. The Page Order dialog appears. Select a page name and use the Move Up and Move Down buttons to change the order of the pages.

You cannot drag the tabs to reorder them.
 


Form View: Navigating Between Pages in a Tab Control

  • Mouse: Click on the tab of the page that you want.
  • Keyboard:
       CTRL + TAB moves to the next tab page to the right.
       CTRL + SHIFT + TAB moves to the next tab page to the left.
       Left and right arrow keys move focus to the next tab page IF the focus is on the tab label - dotted box around the label for the tab Tab with dotted selection box around label.

Form View: Navigating Controls on Tab Pages

To move through all of the controls on a form by using the TAB key can be a bit tricky when the form has a tab control. Only the controls on the first tab page are in the tab order!

What happens:

  • Pressing the TAB key moves you from control to control on the form until you get to the tab control.
  • Once you the focus is on the tab control, the TAB key takes you through each control on the first page.
  • But... from the last control on the first tab page, the TAB key takes you out to the next control on the form or to the next record. The TAB key alone will not get you to another tab page.

Solution: You must use CTRL + TAB to change to the next tab page. Confusing for sure!!

Tab order for a tab page: Each tab page has its own tab order which you can see in Form Design View when the tab page is selected. (View | Tab Order)


Icon: Step-by-Step 

Step-by-Step: Tab Control

 Icon: Step-by-Step

What you will learn:

to create a tab control
to rename tabs
to format tab text
to add new tab pages
to create multiple rows of tabs
to change order of tab pages
to create controls on pages in a tab control

Start with:  Class diskresource files, worldtravel.mdb from the previous lesson


Create Tab Control

You have so many controls on the Staff form that even with a logical arrangement it is rather hard to read the data. Plus, if the photo control were larger, then you could use Clip instead of Zoom and all of the photos would show without getting jagged. It's worth revising!

  1. Form Design View: Staff, from previous lessonOpen the form Staff-formatted from the previous lesson in Form Design View.

    How could you group these controls onto several tab pages? Are there natural groupings? There are many "right" answers to this question!
     
    Because there are already controls on the form, it will be a bit messy to change to a tab control.
     
  2. Click on the Tab Control button Button: Tab Control on the Toolbox.
     
  3. Form Design View: Tab Control tool selected, ready to drag to create controlClick in the blank area below the Country control to create a tab control with the default properties. The page numbers on your tabs may be different from the illustration.

    Form Design View: default tab control

    Icon: TroubleProblem: Tab Control background is transparent.
    The Background Style property for the control remembers the last change you made to this type of control. Change the property value from Transparent to Normal.
     


Rename Tabs

Like many other controls, tab pages have both a Name property and a Caption property. These are not the same! Captions can be duplicated, but a value for a Name property cannot.

For example, if a form contains controls for a mailing address and a physical address, you might have two labels that show "City". But the controls must be named differently, like MCity and PCity.

  1. Form Design View: changing captions on tabs in Properties dialogClick on the first tab to select it.
    (Handles are inside the control.)
     
  2. In the Properties dialog, change the Caption property to Name.
    (Be sure that the dialog shows a page name and not the tab control itself.)
     
  3.  Similarly, change the second tab to read Mailing Address.
     

Format Tab Captions

The font used in the underlying style is not particularly attractive or readable! You can change it.

  1. Form Design View: Formatting captions on tab pagesClick on the edge of the tab control to select the whole control.
     (Handles are on the edge of the control.)
     
  2. In the Properties dialog, change the following properties:
       Font Name = Tahoma
       Font Size = 10
     

Add and Configure Tab Pages

  1. Right Click Menu: Insert PageRight click on the tab control and select  Insert Page  from the menu that appears.
    A new tab appears with a boring default caption.
     
  2. Change the caption to read Phone #'s.
     
  3. Form Design View: multiple tab pages, navigation arrows in tab controlSimilarly, create tabs that have the following captions:
    Company Info
    Personal Info
    Emergency
    Notes
     
    When the tab control runs out of space for the tabs, scroll arrows appear. That's nice, but will be quite awkward to use.

    Icon: TroubleProblem: Error when naming tabs
    You cannot use the same name for a tab page and another control. You have a control named Notes, so the tab name cannot be Notes. The tab's Caption property, however, can be Notes! That is what you are supposed to change.
     
  4. Multi Row:
    • Form Design View: Multi Row property = Yes, creates rows of tabsSelect the whole tab control.
       
    • In the Properties dialog, change the property Multi Row to Yes.
      The tabs arrange themselves onto as many rows as needed to show the caption text.
       
  5. Dialog: Page OrderReorder tabs:
    • Right click on the tab control.
    • From the menu that appears, select Page Order...
       The Page Order dialog appears.
    • Click on Phone #'s to select it.
    • Click on the button Move Up.
      The Phone #'s entry shifts up one line.
       
    • Form Design View: tab control with pages in new orderClick on OK.
      The dialog closes and the design shows the new order for the tab pages.
  6. Icon: Experiment Experiment by clicking on the various tabs. They show the same behavior as tabs in other programs. The current row moves to the bottom.
     

Move Controls to Tab Pages

Now comes the trickiest part. To move the existing controls onto tab pages, you must use Copy and Paste. You cannot drag the controls and drop them onto a tab page. They drop onto the form underneath the tab control instead.

First you will try drag and drop anyway, just to see what it looks like. It's quite confusing when this happens to you unexpectedly!

Drag-and-Drop fails:

  1. Form Design View: Select fields for nameDrag on the form to select the controls for the staff member's name, from Prefix down the column through Nickname.
     
  2. Drag the selection to the tab control
    Outlines show the controls that you are dragging so you can see where they will drop.
     Form Design View: Dragging controls over tab control. Controls show as outlines.
     
  3.  Form Design View: pasted controls are underneath the tab controlDrop.
    Hmmm. No controls are showing on the tab page, Name.
    The handles that you do see show us that the controls are underneath the tab control.
     

Copy-and-Paste works:

  1. Form Design View: controls pasted onto form instead of onto tab pageClick on the edge of the tab control to select it.
     
  2. Move it up and to the left.
    Now you can see where those controls went. Not onto the tab page, but onto the form itself.
     
  3. Undo the move.
     
  4. Undo the paste.
     
  5. Select the controls again.
     
  6. Copy.
     
  7. Form Design View: Tab Control with page selectedClick on the Name tab to select that tab page.
     
  8. Form Design View: controls pasted onto tab pagePaste.
    The tab control automatically resizes to hold the pasted controls.
     
  9. Delete the original controls from the form.
     
  10. Similarly, cut and paste the following controls to specified tab page:
     
    Phone #'s: all 5 phone number controls
    Mailing Address: 6 controls in second column, from Address through Country
    Company Info: 4 controls - StaffID, Title, DivisionID, DateHired, Location ID
    Personal Info: 4 controls - EmailName, EmailExtension, Nationality, Hobbies
    Emergency: EmrgcyContact, EmrgcyPhone, Health Issues
    Notes: Notes
     
  11. Position and resize the controls as needed to match the illustrations:

Form Design View: Tab Control, page Name Form Design View: Tab Control, page Phone#'s Form Design View: Tab Control, page Mailing Address Form Design View: Tab Control, page Company Info Form Design View: Tab Control, page Personal Info Form Design View: Tab Control, page Emergency Form Design View: Tab Control, page Notes


 


Rearrange Form

Now that nearly all of the controls are on the tab control, you need to clean up the form layout. You will wind up with a smaller form.

  1. Form Design View: rearranged controls after most moved to tab pagesDrag the tab control to the upper left of the Detail section.
     
  2. Delete the label for the Photograph control and move it over next to the tab control.
     
  3. Move the Date Updated control up to be level with the bottom of the tab control.
     

Format Photo Control

Now that there is more space, you can change the Photo control to show the pictures better.

  1. Form Design View: form resized and Photograph control revisedChange the Size Mode property for the Photograph control to Clip.
     
  2. Resize the Photo control to about 2" square.
     
  3. Change Back Style to Transparent.
     
  4. Change Special Effect to Flat.
     
  5. Change Border Style to Transparent.
     
  6. Select the thin blue line at the bottom of the Detail section and drag it up to just under the tab control.
     
  7. Resize the line to 6" wide.
     
  8. Resize the form by dragging the edges until it is just large enough for the controls.
     
  9. Add a calculated control, named FullName, underneath the photo, to display the staff member's name so it will be visible no matter which tab page is showing. Use the expression:
    =[FirstName] & " " & [MiddleName] & " " & [LastName] & " " & [Suffix]
     
  10. Form Design View: new control, FullNameResize the new control to be as wide as the Photograph control and 0.5" in height.
     
  11. Set the following properties for the new control, FullName:
       Can Grow: Yes
       Special Effect: Flat
       Border Style: Transparent
       Font: Tahoma
       Font Size: 14
       Font Weight: Bold
       Text Align: Center
       Tab Stop: No
     
  12. Form View: Staff with tab controlSwitch to Form View.
    The border of the Photograph control and its background are now transparent. The actual photos show as different sizes so the gap between the photo and the name below varies from record to record.
     
  13. Resize the window to just hold the form.
     
  14. Navigate through the records and the tab pages.
    Remember that you need to use the key combo CTRL + TAB to switch tab pages, or else use the mouse to click on the page you want to see.
     
  15. Make any corrections needed, such as to alignments, control size, or tab order. The controls you moved should have kept the same tab order that you set earlier. Is that what you want? Check it out!
    Dialog: Tab Order
     
  16. Icon: Save Save the form as Staff-tabbed.