Apple Pages TabBar Control

Hello everyone,

i really like Apples Property-Panel in Pages, Numbers and Keynotes and i would love to have it on my own Apps.

I thought about:
-the TabBar (Canvas) should be linked to a PagePanel
-TabBar draws Tab-Array
-each Tab (Control) should have a Index-Property to navigate within the PagePanel (but not in logical Order, means Tab 1 could have Index 0 and Tab 2 Index 4)
-Index/Caption-Property of each Tab can be update everytime (refresh TabBar)

[h]Tab Color[/h]
Active State
-Background: &c4399FA
-Border (Left, Right, Bottom): &c367AC7
-Font: &cFFFFFF

Normal State
-Background: &cF7F7F7
-Border (Left, Right): &D6D9DC
-Border (Bottom): &cC0C4C9
-Font: &c8A8E91

Does anyone of you started such a Control before? Is there someone who wants to create it with me together? Need some Input.

You should be able to use my Trixi’s Tabsheets (see as starting point. Instead of using the artwork that comes with this control you need to do the drawing yourself. But the logic is the same.

So i played a bit around with Trixi’s Tabsheets. Look at the Project-File.

There are some things not working/i don’t know how to do:
-MouseUp, MouseDown to change the selected Tab (don’t know, how to do that)
-TabWidth is calculated by AppleTabSheets TabPanelWidth, but sometimes (logical :wink: ) there will be a small Margin at the right side between the control and the Windows right side. How to fix it?
-if there is only one Tab, it should draw the AppleTabs NormalPic
-Usually a Tab has a left and a right Border. But if Tab(0) is selected i only need a right Border (if TabCount = 0, don’t need left/right Border). If Tab is UBound(TabSheets) i only need the left Border. If a Tab is selected between 2 other Tabs, the Tab before shouldn’t have a right and the Tab after shouldn’t have a left Border. How to realize?

Hope for some Input of you and maybe there will be some things to optimize?

Best regards an thank you


updated my Project-File.

Now it is possible to navigate between the Tabs, the Margin on the right side is fixed.

Please have a look to


'works fine
'Me.AppendTab(“Xojo”, 0)
'Me.AppendTab(“Swift”, 1)
'Me.AppendTab(“VB”, 2)
'Me.AppendTab(“PHP”, 3)
'Me.AppendTab(“Delphi”, 4)

'incorrect! WHY
Me.AppendTab(“Xojo”, 4)
Me.AppendTab(“Swift”, 3)
Me.AppendTab(“VB”, 1)
Me.AppendTab(“PHP”, 2)
Me.AppendTab(“Delphi”, 0)


Each AppleTab has a AssociatedTabPanelIndex, so you can navigate to different Panels within a Tabpanel. At this Point, my Control only works, if append AppleTabs in Order e.g. 0, 1, 2, 3, 4. But if i add several AppleTabs with different AssociatedTabPanelIndex order e.g. 2, 0, 4, 3, 1 the navigation fails. Why, i can’t find the Bug!

it does not open the Tab you clicked.

click on Xojo selects Delphi
click on VB selects Swift …

Yes, thats the Error i mean, if you try the commented code, it works fine! Only want to be free of the PageIndex, thats why every AppleTab became a own AssociatedTabPanelIndex.

I think if you add the first tab, tabpanelindex = 0
tabpanelindex 4 does not exist until you add the last tab

Hmm, i changed the MakeTabsheetActive Value, because you are right, but TabPanelIndex is not linked to the PagePanel, when i add via AppendTab…don’t look like the Error. And the PagePanels will setup before Runtime…

[code]Dim tempTab As New AppleTab(Text, Me.Height, TabPanelIndex)


MakeTabsheetActive(0) 'MakeTabsheetActive(TabPanelIndex)[/code]

Will have a look. But earliest tomorrow.

Looks fine for me.

  1. I don’t think that adding tabs with reverse numbering is going to work because I don’t see how you convert the 2 indices. Why would you want to add tabs in this way?
  2. I’m not seeing any gaps at the end.

Hi Beatrix,

Thanks for your Feedback.

[quote=235170:@Beatrix Willius]1. I don’t think that adding tabs with reverse numbering is going to work because I don’t see how you convert the 2 indices. Why would you want to add tabs in this way?
2. I’m not seeing any gaps at the end.[/quote]

  1. OK, i have one PagePanel with all possible Property-Panels on the right side. At the left side on the Window is a Listbox with different Rows (Collection of e.g. Person-Properties). Only Want to Show the properties fort the selected Row.
    -Gender (Tab “Details”, PagePanel.Value = 1)
    -Name (Tabs: “Details”, “Notes”, “Sources”, PagePanels: 2, 3, 4)
    -Events (Tabs: “Details”, “Notes”, “Sources”, “Media”, PagePanels: 6, 3, 4, 5)

If ListIndex > -1 Then // get Object-Type of selected Row AppleTabBar.DeleteAllTabs // create AppleTabBar Else AppleTabBar1.DeleteAllTabs AppleTabBar1.AppendTab("Person", 0) 'nothing selected End If
By MouseDown i’ll get the AppleTab under the Mouse plus the Tabs PanelIndex Value and seit PagePanels Value.
That’s why i need it in this was :slight_smile:
2. Fixed it before,