Proposal: TabItem and TabGroup controls

[ghost]

Proposal: TabItem and TabGroup controls

Summary

I'm proposing new TabItem and TabGroup controls. They would basically be a lightweight, decoupled version of TabViewItem and TabStrip.

Rationale

• There is need for a slim control - #4555
  • apps like Visual Studio use a lot of tabs; they need to be performant
  • headers, footers, add button or extra styling aren't needed
  • if a user wants simple app navigation, they'll either use Pivot, which was un-deprecated recently, or the entire NavigationView
• Could fully replace pivot
• It could be used for other controls - #168
  • a lightweight control would be better than the entire NavigationView or TabView
• A user might want the functionality of TabView with the design of NavigationView or vice-versa
• Parity with WPF - #4555
• Could allow adding new features more easily:
  • grouping - microsoft/terminal#8267
  • different orientations - #2194

Scope

Capability	Priority
Adds a TabItem and TabGroup controls	Must
TabItem supports reordering	Should
TabGroup supports multiple rows	Should
TabView gets updated to support new controls	Should
TabGroup supports different orientations	Could
TabItem supports different styles	Could
TabItem supports closing by default	Won't

Important Notes

TabItem

• a minimal control - supports selecting, reordering, dragging out
• can host content
• doesn't support closing
• multiple styles available:
  • Minimal
  • for scenarios where you have a lot of tabs (like Visual Studio) and you need the best performance.
  • Selector
  • like NavigationView and Pivot - a lot of newer apps use a selector-like style for such controls (like the Office apps)
  • Tab
  • basically what TabViewItem looks like today

Ideally TabViewItem would be renamed into TabItem, because it's a more generic name. Alternatively TabViewItem could be wrapped around a TabItem, so that existing apps still work.

TabGroup

• a container for TabItem or other groups
• can have multiple rows (from WPF TabControl)
• different orientations/display modes: horizontal, vertical; top, left etc.

TabGroup would basically be a decoupled version of the TabView.TabStrip.

---

For v1, the controls would only support the minimal style.

The intention is to have them also used in TabView. The controls would have limited functionality by default, but TabView would retemplate them to add needed features (such as closing). Eventually, even NavigationView could use them.

For v2, the other styles and display modes can be added.

TabGroup should be able to completely replace the TabControl from WPF and Pivot.

---

This approach would allow TabView to get some functionality of NavigationView very easily:

• Footer items

  • a user would simply add a TabGroup inside TabStripFooter
  • you could also have header items this way

• Grouping

  • while TabGroup would allow nesting, it wouldn't have any special handling for it by default
  • TabView could have a custom template for TabGroup which adds support for collapsing groups, indenting items, group titles, overflow etc.
  • this however is out of scope for this proposal

Example usage

Creating a simple group:

<TabGroup>
  <TabItem Header="Date and Time" />
  <TabItem Header="Additional Clocks" />
  <TabItem Header="Internet Time" />
</TabGroup>

If TabView would implement support for handling groups:

<TabView Orientation="Left">
  <TabView.TabGroup>
    <TabGroup Header="Group 1" Color="Red">
      <TabItem Header="Tab1" />
      <TabItem Header="Tab2" />
    </TabGroup>
    <TabItem Header="Tab 3" />
  </TabView.TabGroup>
</TabView>

Open Questions

Are there other features missing from TabControl or from Pivot?

[robloo]

TabGroup is a very interesting, more powerful generalization of these 'tabbing' concepts. You also may have solved some concerns with naming.

You don't explicitly state, but is your intention for this TabGroup proposal to supersede TabControl? The assumption is yes, but if you confirm I'll modify #4555 pointing directly here.

Edit: Also the control needs to support collapsed TabItems correctly like in WPF. In Pivot, for example, this was never supported correctly and leads to issues. This is the only thing missing from WPF I can think of at the moment.

[ghost]

@robloo yes, it was meant to have full parity with TabControl and be a direct replacement. I'll update this proposal to make things more clear.

By collapsed you mean hiding tabs entirely? It should already work normally with TabViewItem, which TabItem would be based on.

[robloo]

yes, it was meant to have full parity with TabControl

Thanks for confirming, I just wanted to be absolutely clear.

By collapsed you mean hiding tabs entirely? It should already work normally with TabViewItem, which TabItem would be based on.

Yes, as in you can bind visibility and dynamically show/hide tabs entirely. I know it seems obvious but Pivot doesn't support this (#2952) so I want to make it absolutely clear as a spec requirement.