Tab control

[hermitdave]

We need a control similar to Tab control. iOS has UISegmentedControl as shown below

The control should expose the following properties UseTabSeparator : determins whether Tab Items are visually separated or not SeparatorWidth : the distance between 2 tabs in pixels Items: User supplied list of TabItem SelectedIndex: Gets or set index position of currently selected TabItem (default 0) SelectedItem: Gets the item currently selected, zeroth item by default.

Based on above I have done some preliminary work and create Tab and TabItem controls. TabItem derives from ToggleButton and exposes all ToggleButton properties.

UserVoice: https://wpdev.uservoice.com/forums/110705-universal-windows-platform/suggestions/17983933-tab-control-like-in-microsoft-edge

[ghost]

Thanks for clarifying, I was just asking a possible implementation 😉

[JustinXinLiu]

Just want to throw in my 2 cents since my Tab control got mentioned here (thanks @10Dev). :)

The main issue that I have with the Pivot is that when I am dragging it across, I cannot preview the next content available, the whole area shows up empty until I let go my finger. My Tab control is basically a horizontally-scrollable ScrollViewer which allows me to preview the next content.

Also, it's just cooler than the Pivot. The width of the underline (or whatever you want to have as a selected visual) changes dynamically based on the width of the current & next header items and where my finger is at, all thanks to the powerful ExpressionAnimation in Composition.

[deltakosh]

I like it a lot. And it seems pretty smooth

[skendrot]

Wow. Long thread! Seems the idea is not to create a "TabControl" but more to replicate the segmented control on iOS. Maybe I'm missing something, but isn't the segmented control just a group of radio buttons? Displaying content based on which item is selected is already possible today by using radio buttons. You can easily style the buttons to look exactly like the do on iOS as well.

[deltakosh]

Which is also my point but some people suggested using a style on top of Pivot. I'm more for a list of radiobuttons because mostly I do not want this control to be a Panel

[deltakosh]

To definitely close on this one I suggest creating an Uservoice :)

[mdtauk]

Maybe the XAML team could re-engineer the Pivot control, so the Pivot Header is a discreet control, that can be used outside of a Pivot. Then the event triggered by this PivotHeader could control the PivotItem transitions and changes.

Project Neon is a good opportunity to re-think the Microsoft controls which are distinctly Windows, and make them generic for use with Xbox, iOS, Android, etc

[Vijay-Nirmal]

@hermitdave It would be nice to have a Tab control like OneNote

If we add a close option then it can be used as a Tab control in Microsoft Edge #894

[skendrot]

About 99% sure that's a restyled Pivot control

[hermitdave]

yes that most certainly is a Pivot control

[mdtauk]

@skendrot Not so sure, unless the pivot control lets you specify the forwards and backwards navigation transitions. Pivot will transition from left to right as you tap on a "next" pivot heading. And transitions right to left, as you click on "previous" pivot headings.

[Vijay-Nirmal]

@skendrot What about the close option? I think it can't be done by restyled Pivot control (It won't be easy)

[skendrot]

@Vijay-Nirmal closing isn't demonstrated in the gif you posted. But any element can be collapsed

[Vijay-Nirmal]

@skendrot I mention it below the GIF. My idea is to create a Tab Control that can be used like Tabs in OneNote or Tabs in Edge #894. Single Control multiple use cases.

[JohnnyWestlake]

Office team actually built their own Ribbon implementation for that, no relation to any pivot. Their layout panels are custom (all RenderTransform based rather than standard arranging, etc). those guys like building stuff :P Not that I'd try and build a Tab control specifically to use as a ribbon.

Either way I think not building upon pivot is the way to go, it's not an especially complicated control.

[hermitdave]

I think we all just need to agree on

1. What sort of Tab control we need
2. Should the data model be per tab

Control itself is simple enough

[hermitdave]

@JustinXinLiu I just saw your comment and I see that its disappeared after I tapped back button on edge a couple of times. Did you remove it or did I delete it without realising it ?

[Vijay-Nirmal]

@hermitdave I too saw it. In my opinion, it was awesome. It completely goes with Fluent Desyin System.

[hermitdave]

here it is either way.. https://twitter.com/justinxinliu/status/811149814826078208?s=09

[JustinXinLiu]

Ahh sorry @hermitdave I deleted right after 'cause I thought I should have published a Style like that before showing anything. :P I will see if I can create a new Style for it this weekend.

[JustinXinLiu]

So I just updated the design for the Tab control. Feel free to check it out. :)

[mdtauk]

I think by default the Tab control's design should match the existing UWP tab UI, all be it with some fluent design animation of the current tab selector underline. And perhaps include some alternate styles along with the control, for Edge Tabs (with closing x) and the iconless versions as used by Office.

[timheuer]

@mdtauk what is the 'existing UWL tab UI'? I would use @JustinXinLiu's version in a heartbeat

[hermitdave]

Agreed.. We don't have existing control and this looks great

[hermitdave]

@JustinXinLiu we will discuss features for v2.0 release soon.. Would you be in a position to make a PR once inclusion has been agreed?

[mdtauk]

I do really like @JustinXinLiu 's design. But UWP does have a version of tabs (restyled pivot) and Windows 10 has enough inconsistency as it is. Personally I'd like Justin's version to be the default throughout the OS!

[JustinXinLiu]

@hermitdave I am more than happy to. I haven't done one yet so it's gonna be fun. ;)

I will see if I can make it flexible so you can restyle it like the official one too! @mdtauk

[hermitdave]

@JustinXinLiu will ping back as soon as possible. looking forward to adding it to the tookit

[mdtauk]

@JustinXinLiu :) You could have TabTemplate, TabBarTemplate, and TabIndicatorBrush etc

[Vijay-Nirmal]

@JustinXinLiu Also add Drag and Drop support to reorder Tabs

[mdtauk]

@Vijay-Nirmal @JustinXinLiu Here are some ideas for creating a flexible and powerful TabControl/TabBarControl

TabsCanClose | True, False

TabsFixedSize | True, False
(Determines if all tabs are a fixed size, or if they resize to fit the content)

TabDragMode | Disabled, ReArrange, WindowSplit (WindowSplit allows "ripping tabs from the bar for docking or creating a new window)

TabBarOrientation | Horizontal, Vertical (Vertical tabs would look like the NavigationView items, when using the existing UWP tab design)

TabItemTemplate (The style and template for the individual tab itself, with close button and optional icon.)

TabBarTemplate (The style and content panel that contains the tabs. Could use an Acrylic brush as a background)

[Vijay-Nirmal]

@JustinXinLiu In addition to @mdtauk points

• Close Button won't be easy to tap in touch screen it would be nice if we integrate some gestures control to control the tabs like swipe up to close etc
• + Button to add Tabs
• In addition to having TabItemTemplate have TabSelectedItemTemplate

[skendrot]

Let's not focus on "extras" like closing or moving tabs. Getting the core functionality first and then adding anything extra at a later time

[avknaidu]

@skendrot I was just about to say the same thing, and saw your comment.

[hermitdave]

All.. agree with @skendrot V1 should be MVP.. bells and whistles come later.

[mdtauk]

@hermitdave @skendrot I agree also, but keeping things in mind for V2, V3 etc, should be in the back of minds so the control can be made in a way that allows it to be updated without a need to re-factor too much, or lead to breaking changes.

And I know it shouldn't need saying, but THANK YOU @JustinXinLiu for contributing, and giving us all a voice here!

[JustinXinLiu]

Thanks @mdtauk those screenshots are very helpful and I will try to use them as a guide on what the control will need to support. @Vijay-Nirmal drag-and-drop will be a big task so it will likely come at a later time. ;)

[nmetulev]

Thanks for taking this on @JustinXinLiu. Before starting the work, we need to define what core functionality will be built for V1 and come to a consensus. The screenshot above remind me a lot of pivot, and we should avoid creating just another pivot (even though it might be prettier :) )

[Odonno]

Thanks @mdtauk for this description. I think we have all the desired controls in a single message.

I have the same opinion that @nmetulev, we should not create another Pivot control so we should focus on the "must-have" for this new control.

If I go back to my issue #894, the main features would be to add a new tab (the + button), to order them and to close them (the X button). And that is pretty much what it is suppose to do. I know this control is useful for PCs, not really usable for tablets and clearly not adapted for mobile but we made the Menu control and it does not care about the device/screen size. Developers will handle when and how to use it. But they have this control on their palette and I think it's the most important.

IMO, we should replicate the MS Edge Tab control for V1 and then like @skendrot said, plan more features if needed for V2.

[mdtauk]

@Odonno There could be a TabButton control style included, and the ability to add a button/content to the left and right of the tabs. Like the left and right content areas on the Pivot Control.

[IbraheemOsama]

Here are Tab Control V1 features 1) ItemsControl 3) Select single item at a time 4) When items reach the width of the control the items panel will reduce the width of all items until a threshold then start to add after the control width with ability to scroll to be able to move between items (if the user wants items to wrap they can use wrap panel) 5) Option to drag drop and reorder items 6) Supporting multiple states ex how control should behave in a narrow screen.

I see MS Edge tab behavior is good to be followed :) If you need to add something to the features or change something feel free to do but just keep in mind that we don't want to replicate the Pivot and this is V1 and we can add other features in future releases.

@JustinXinLiu are you ready for this control champ ? :)

[skendrot]

Why is the ability to drag-n-drop/reorder tabs a must?

[nmetulev]

IMO, it's a big enough feature that separates it from controls such as pivot that can also be used for tab type scenarios.

[nmetulev]

After a discussion with @JustinXinLiu, we agreed that his control does not fit in well with the current requirements, it would require starting from scratch. Therefore opening this up for anyone to pick up.

[windowstoolkitbot]

This issue seems inactive. Do you need help to complete this issue?

[hermitdave]

All good here.

[r2d2rigo]

Is this being worked on? Recently I made a barebones tab control by using a ListView as its base control:

Maybe this could be used as a starting point?

[hermitdave]

@r2d2rigo That is precisely what I have started with 2 weeks ago. I have a PoC, need to fine tune the properties

[hermitdave]

@r2d2rigo let's sync up on this

[michael-hawker]

@hermitdave @r2d2rigo we're trying to get some redlines for the tab styling. I'm also creating a tab style for the Pivot control #1672. I'll keep you posted as we get more info.

Also, @nmetulev and I are going to try and sync again with the tabbed shell folks to see how we can align more moving forward as well for the future.