Proposal: Allow the TabViewItem to be pinnable

[QuanticStorm]

Proposal: Allow the tabiewitem to be pinnable

Summary

It could be useful to have pinnable tabviewitem like Visual Studio 2019 feature.

Rationale

• If we have 10+ items in the tab and the most important is one of them, if we pin it, we will optimize our time to work.

Scope

Capability	Priority
public bool IsPinnable	Must
public static DependencyProperty IsPinnableProperty { get; } = Dependency.Registrer(nameof(IsPinnable), typeof(bool), typeof(TabViewItem), new PropertyMetadata(false));	Must

Important Notes

Like Close button, we will have a pin button but with two icon, an icon to pin and an icon to unpin if the item was pinned. This Pin button will only be visible if IsPinnable is set to true

[marcelwgn]

When would the pin button be visible? How would a pinned tab look like? Would it be in the same place or would it be moved the left? Would it have different compact width behavior?

This issue over that Terminal repository is also worth mentioning here.

[QuanticStorm]

If we set IsPinnable to true on a TabViewItem, the pin button will be visible at the left of the close button. If it is unpinned, the icon could show this glyph :

And if the tabitem is pinned could show this glyph :

If we pin the tabitem, it will "move" to the left. The most left if the pinned tabitem is alone or at the right side just before the last pinned item.

The pinned tabitem could be something like this :

In this image, the two first tabitems are pinned, the other not.

I haven't thought about compact mode :( I use the XAML Gallery to see what is compact mode.

When in compact mode, the background of the pinned tabitems need to be different from those who are not pinned. Maybe allow the developper to choose such background color (like CompactPinnedBackgroundBrush)

Maybe some idea like this could be useful...

[marcelwgn]

When should the pin/unpin button be visible? Should it always be visible or only on hover? Should it have an API like the CloseButtonOverlayMode API?

Another thing: Should pinned tabs render in compact mode regardless if `the TabView is in comact mode or not? Should pinned tabs always show the pinned icon?

[QuanticStorm]

If we are not in compact mode, when the item is pinned, pin/unpin button always visible. The way the pinbutton work will be the same like the CloseButtonOverlayMode. Maybe called PinButtonOverlayMode. Like this, when we use such features, we are not lost.

In compact mode, the non pinned TabViewItem won't show the pin button. But the pinned TabViewItem could show such thing :

If I understand the compact mode, if TabView is in compact mode, the pinned TabViewItems are in compact mode too. If the TabView is not in compact mode but the current application window is to small to render TabView correctly, the TabViewItems need to be shown as compact, otherwise we render then in no compact mode...

The pinned TabViewItem could be reorder but only on the 'pinned zone' to stay pinned. If we move it outside the 'pinned zone' it will be unpinned automatically.

If we drag a TabViewItem not pinned inside the 'pinned zone' it will be pinned automatically and take place where it dropped. If we drop a non pinned TabViewItem between Pinned1 and Pinned2, Pinned2 become Pinned3 and newly TabViewItem become Pinned2

The 'pinned zone' is the space taken by all pinned TabViewItem. The pinned zone only exists if there is at least one pinned TabViewItem.

[marcelwgn]

If we are not in compact mode, when the item is pinned, pin/unpin button always visible. The way the pinbutton work will be the same like the CloseButtonOverlayMode. Maybe called PinButtonOverlayMode. Like this, when we use such features, we are not lost.

I would disagree, there should be a way to only show them on hover, similiar to the close button.

If I understand the compact mode, if TabView is in compact mode, the pinned TabViewItems are in compact mode too.

Well we could also change that behavior, after all there are no pinned tabs yet.

If the TabView is not in compact mode but the current application window is to small to render TabView correctly, the TabViewItems need to be shown as compact, otherwise we render then in no compact mode...

If there is not enough space to render all items, we currently provide a scroll for the TabView items. Having an "automatic" mode with compact should probably be done in a new proposal.

If we drag a TabViewItem not pinned inside the 'pinned zone' it will be pinned automatically and take place where it dropped. If we drop a non pinned TabViewItem between Pinned1 and Pinned2, Pinned2 become Pinned3 and newly TabViewItem become Pinned2

I think it either should become pinned or we should block dropping the TabViewItem in that area.

The 'pinned zone' is the space taken by all pinned TabViewItem. The pinned zone only exists if there is at least one pinned TabViewItem.

Is it just semantically a thing or does it also have visual differences compared to the "normal" TabViewItem area?

[QuanticStorm]

The 'pinned zone' is the space taken by all pinned TabViewItem. The pinned zone only exists if there is at least one pinned TabViewItem.

Is it just semantically a thing or does it also have visual differences compared to the "normal" TabViewItem area?

For me, the idea of 'pinned zone' is just semantically, because if we provide two zones (one for pinned, one for not pinned), we will have two scrollviewers. It could be complex to manage two areas. I think to use the way Visual Studio 2019 manage pinned elements and non pinned elements. The use the same area.

If we drag a TabViewItem not pinned inside the 'pinned zone' it will be pinned automatically and take place where it dropped. If we drop a non pinned TabViewItem between Pinned1 and Pinned2, Pinned2 become Pinned3 and newly TabViewItem become Pinned2

I think it either should become pinned or we should block dropping the TabViewItem in that area.

That's right. If we drop a non pinned item inside the zone where the pinned items are, it non pinned become pinned.

Maybe these images will help :

If we are not in compact mode, when the item is pinned, pin/unpin button always visible. The way the pinbutton work will be the same like the CloseButtonOverlayMode. Maybe called PinButtonOverlayMode. Like this, when we use such features, we are not lost.

I would disagree, there should be a way to only show them on hover, similar to the close button.

You right, but if a pinned TabViewItem only show its pin on hover, we need to have a visual difference between the pinned area and the non pinned area. Maybe two differents background brush or two different foreground brush.

But do this will render the concept more complex because we need to manage two areas. One for pinned and one for non pinned.

And these areas will have their own scroll viewer.

[marcelwgn]

For me, the idea of 'pinned zone' is just semantically, because if we provide two zones (one for pinned, one for not pinned), we will have two scrollviewers. It could be complex to manage two areas. I think to use the way Visual Studio 2019 manage pinned elements and non pinned elements. The use the same area.

Good point, two actual different areas would get quite complex to manage.

That's right. If we drop a non pinned item inside the zone where the pinned items are, it non pinned become pinned.

I am not sure if that is the best way to do this. Usually if you drag items in the same tabview you want to rearrange them. I wouldn't necessarily say that everybody expects your items pin status to change if you are trying to rearrange your items.

VS for example doesn't allow dragging unpinned tabs in the pinned area.

You right, but if a pinned TabViewItem only show its pin on hover, we need to have a visual difference between the pinned area and the non pinned area. Maybe two differents background brush or two different foreground brush.

Maybe it can show it's pin button always or on hove (like the close button) but always show the unpin button? Currently VS shows the pin button only on hover, but always shows the unpin button. Maybe we should also allow the button to always hide?

That way people can have their own customization without enforcing to show that button.

[shaheedmalik]

It should be done like Chromium Edge does it. Right click, pin, right click unpin.