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

[hermitdave]

I would like thoughts on whether its worth pursuing and what behaviours are expected out of a Tab control

[ScottIsAFool]

The tab control is a tough one (in my mind) given that the pivot control can be used as tab control now (albeit only if the header items don't take up more space than is available). I wonder whether the tab control should maybe extend the pivot? if we can find a way to force tab mode in pivot, then that would be ideal.

[hermitdave]

Pivot also has content area and there's a very specific transition behaviour while looked great in WP7 is dated and not always wanted.

I'd personally stay clear of Pivot just for that reason

[ScottIsAFool]

I disagree with that. Even built in apps in Win10 are still using tabs with transitions. Just look at Alarms & Clocks. That doesn't look out of place or "dated". Plus those transitions are enabled via storyboards in the template, they can be removed if we really didn't want it.

[hermitdave]

One thing that Windows 8 taught many was that just because a stock templates and often stock apps do that doesn't mean it has to be done everywhere..

And most stock apps use Hamburger.. maybe we should just suggest that to everyone

[ScottIsAFool]

Ignore Windows 8, that was just... well, everything about it was wrong. I don't believe it should be us that makes the tab control behave differently from stock controls, but we should build it so other devs can do if they want.

[hermitdave]

I am talking to Islandwood team and they have an equivalent of UISegmentedControl so maybe iOS ported apps will have one design and rest will have different ?

[ScottIsAFool]

Unless you're suggesting incorporating the Islandwood control into this toolkit, I'm not really sure what your point is with that.

[hermitdave]

We should have equivalent control and one that can be identically templated.

[ScottIsAFool]

I've not said we shouldn't...

[hermitdave]

I am trying to get to the bottom on islandwood control behaviour but I doubt they went about templating pivot

[ScottIsAFool]

Isn't all their stuff on github anyway?

[deltakosh]

@hermitdave has a valid point. to me this control is a list of buttons. The pivot has a client area that we do not want here (do we?)

[ScottIsAFool]

@deltakosh then what would be happening when you select one of those tabs?

[deltakosh]

Like on iOS, you receive an event and you do what you want with it

[ScottIsAFool]

Fair enough. Pivot doesn't have to have content though, right? If we subclassed pivot and changed the template to not include content, would that work? Im just thinking we could borrow a lot from pivot.

[deltakosh]

This is worth a try I would say

[hermitdave]

I'm happy to be shown that Pivot and PivotItem are better suited. ToggleButton has both events and properties that PivotItem doesn't

[deltakosh]

(I'm not convinced as well but it is worth trying)

[ScottIsAFool]

What properties and events do you need?

[ScottIsAFool]

And how will togglebutton support multiple items :)

[hermitdave]

I mentioned PivotItem.. ToggleButton is used to derive TabItem.. Creating a container is easy.

Tapped, Click, Command, CommandParameter, a lot of UI behaviours among a few. Please do give it a go. Play with iOS segemented control.

[hermitdave]

Also container has to be constrained to the view bounds.. Items don't scroll and definitely no cycling

[ScottIsAFool]

I know the container needs to be constrained, that's why I mentioned that right at the beginning of this thread! :P

[timheuer]

Is this of material value without content? Sure you could say that UITabStrip doesn't have a content model, but when used those toggle buttons DO navigate to different content areas, so I'd have to ask from an end user experience why Pivot doesn't meet these needs. As @ScottIsAFool points out you can style the pivot headers to make them look like what you want.

[deltakosh]

Regarding navigating to content: I would have seen this control more like a list view. We should not force the dev to navigate to a different content when clicking one of the options

[hermitdave]

I agree.. Having content pane forces different content model. Pivot and FlipView to an extent already provide that. Having yet another control that behaves in same fashion is pointless

[hermitdave]

And @timheuer by the same token, we should consider retemplating Pivot and deriving FlipView from that (no header and no content transitions) would have made life simpler 👍

[timheuer]

I guess my thought is you mentioned the SegmentedControl -- and the title of this issue is "Tab" control :-) -- show me a tab UI experience that doesn't have content. I'm not saying 'navigate' in the sense of a different page, but when you invoke a different tab there is different content. This is true of tab experiences across any OS experience. One could say, as @deltakosh has, that these are really 'filter' buttons to a list, but if you recall the WinPhone mail experience, it used pivot as well for the same experience (All, Unread, Important)

[deltakosh]

One of the question we need to answer as well is: Does the community want this control. Is there a need?

[hermitdave]

@deltakosh @timheuer @ScottIsAFool my 2p is that if Islandwood has one we need one too.. anything even a template pivot :) otherwise it would lead to parity issues

[deltakosh]

Fair!

[lemoinea]

On a UWP app for a business client, we had need a true tab control, to reproduce the nice effect of iOS.

We started with toggleButtons, but it wasn't optimized. So we restarted from a pivot and the result was better (thanks to the pivot capacities with the pivotItems). But it's not easy to correctly custom the pivot header.

[10Dev]

There is a tab control in this project that might be interesting to examine:

https://github.com/JustinXinLiu/Continuity

[10Dev]

Juggling the ideas of "Islandwood" and "parity" in my head leads to mild stomach indigestion.

Xaml has a nuclear weapon available that lights up in Anniversary.

Scroll down to examples of some of the controls here:

https://github.com/ratishphilip/CompositionProToolkit

I mentioned elsewhere #248 the idea of a "Toolkit Labs" section. You could relax your 586 requirement for controls in "Labs" and see what sort of user feedback you get?

[deltakosh]

I'm not sure about the labs. The toolkit is here to help developers. We could want to create a separate project with experiments though

[10Dev]

FWIW, from my perspective, I would not see a control or library feature that takes a dependency on Anniversary as "experimental" but instead a potentially useful item I would cheerfully use today since I don't have any pre-Anniversary machines to worry about.

So creating a Labs tree in the source permits helping developers today in a very real way if the downsides of the code is not an issue for them. In the case of Anniversary dependent code, it can sit there and be improved/fixed and is instantly available when you eventually move the target criteria forward.

There could be other cases, for example a control that is targeted at a specific device profile etc.

The idea is just to pull in things that you want to add because it is a nice fit for the Toolkit but just has some "glitch" right now and needs "incubation"

Being part of the "main" project, would increase the chance that "incubated" code gets attention.

There is a tradition behind the concept such as "Google Labs" and "Apache Incubator" but I don't honestly know how those efforts worked out.

[deltakosh]

Don't get me wrong. I'm all for anniversary update features (we already have two: blur and dropshadow)

But I do not want "labs" features in the toolkit. We guarantee backwards compatibility and this is incompatible with experimental code

[10Dev]

Sorry about that. I think my use of the word "labs" led down a pathway I did not intend to suggest. My attempt to explain further whatever idea is gelling around in the back of my head just made it worse, not better, and hence only distracts from the discussion. So lets drop that idea whatever it was.

I think I was trying to suggest that win composition has the potential to make a tab control that is visually compelling and would bring much more to the table than an Apple clone. Otherwise, you end up with something that is just Alternate-Pivot?

[deltakosh]

No need for apologies. I do appreciate the feedback. And I agree with you: we need to come up with something really different and not provide Yet Another Pivot :)

[tibitoth]

Please don't include style only modifications to this library. The referenced tab control is only a special Pivot Style/Template. No new functionality.

[deltakosh]

It depends. If the style really helps developer and simplifies a complex task, I'm for it

[hermitdave]

Ideally we'd expose a control.. Could be as simple as derived class that sets a style at the very least.. Not something I had in mind but it depends on general consensus. Maybe we should have poll at the top

[ghost]

A control like the iOS equivalent looks nice IMO. However I'm unsure about the implementation. If it should behave like a real "tab control", retemplating the Pivot header seems to be the better approach. A new control would be only necessary, if it's just used as a "filter" to reduce the clutter in the rendered XAML tree. The implementation shouldn't be that hard, I'm thinking of a Grid with x columns, where x is the number of items. And each item is represented by a RadioButton, styled like a ToggleButton.

[deltakosh]

Agree. my understanding is this control should not be a tab because it is then compelx to reproduce the "filter" behavior (look how the phone app works on ios)

[hermitdave]

@jlnostr that is precisely what i have.. A grid with x number of toggle buttons.. Maybe we should call it something else. I have to try the one in iOS bridge and then I'll post a gif or something

[Depechie]

Just my 2 cents, as a Xamarin dev we always use the segmented control with different content. So not just for filtering...

[ghost]

@Depechie Does it contain something like an ItemsSource property or do you just react to selection changes?

[hermitdave]

@jlnostr segmented control allows manual creation of segments and exposes value chanced event. Whether toy use different data model or same is left to the dev https://developer.xamarin.com/recipes/ios/standard_controls/segmented_button_control/

[hermitdave]

We have pivot and FlipView which force different content model.. We could do with simpler one