Microsoft-ui-xaml: [TabView] Compact sizing does not apply to newly-added items

Created on 19 Jun 2020  路  4Comments  路  Source: microsoft/microsoft-ui-xaml

For a TabView in Compact tab sizing mode, newly-added items are not compacted.

Steps to reproduce the bug

  1. Add a TabViewItem to a TabView after setting the TabWidthMode to Compact

Expected behavior

Everything is compact.

Screenshots

tabview_compact

Even when this happens, I would expect navigating off the broken tab and back onto it to resolve the issue.

It does not.

Version Info

  • [x] 2.5.0-prerelease.200609001
  • [x] 2.4.2
  • [x] 2.4.0

| Windows 10 version | Saw the problem? |
| :--------------------------------- | :-------------------- |
| Insider Build (xxxxx) | |
| May 2020 Update (19041) | Yes |
| November 2019 Update (18363) | |
| May 2019 Update (18362) | |
| October 2018 Update (17763) | |
| April 2018 Update (17134) | |
| Fall Creators Update (16299) | |
| Creators Update (15063) | |

| Device form factor | Saw the problem? |
| :----------------- | :--------------- |
| Desktop | Yes |
| Xbox | |
| Surface Hub | |
| IoT | |

Context, Linking

https://github.com/microsoft/terminal/issues/6570

area-TabView help wanted team-Controls

All 4 comments

The issue is that the TabViewItem, that are added after the tab view width mode changed, do not know if they are in compact mode or not. Since the TabViewItems take care of hiding the label themselves (and not the TabView), clicking an item does not fix the behavior as the items still think they are in non compact.

In the mean time, as a workaround, you can add the following code:

if(_tabView.TabWidthMode == winrt::TabViewWidthMode::Compact)
{
    _tabView.UpdateLayout();
    _tabView.TabWidthMode(winrt::TabViewWidthMode::Compact);
}

somewhere after this line. What that essentially does is "reapply" compact mode to the TabView and as a result tell the new TabViewItem that it is in compact mode, resulting in correct rendering.

@ranjeshj @stmoy Unless someone else is already looking into this, would you be fine with me fixing this issue? Especially given that I was the one that overlooked this scenario.

Thanks @chingucoding. Go for it!

Thanks for the workaround, as well! :smile:

Was this page helpful?
0 / 5 - 0 ratings