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 http://www.mothsoftware.com/content/xojo/) 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

Hi,

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
[h]Window1.AppleTabSheet1.Open[/h]

[code]Me.AttachPanel(PagePanel1)

'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)

Me.MakeTabsheetActive(3)[/code]

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…
[h]AppleTabSheet.AppendTab[/h]

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

TabSheets.Append(tempTab)

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.
    [h]Sample[/h]
    -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)
    [h]Pseudocode[/h]

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,