Dragging Tabs between TabView can result in clipped Tab display with Drag animation

[michael-hawker]

I'm submitting a...

• Bug report

Current behavior

If you have two TabViews and drag between them, the space made for the new item in the 2nd TabView pushes the last tab off and it gets clipped rather than expanding the TabView header area.

Expected behavior

TabView area should expand to show all tabs and new spot for dragged tab.

Minimal reproduction of the problem with instructions

1. Clone https://github.com/michael-hawker/UWPCommunityToolkit/tree/mhawker/tabview-drag-repro
2. Run the sample app
3. Go to the TabView sample
4. Try dragging a tab from the top TabView to the bottom TabView
5. Note that when the animation expands a space for the new tab, the last tab on the 2nd TabView disappears. (The drop isn't coded to complete, but that's not the bug.) The header should expand to keep the last tab visible.

Environment

Nuget Package(s): Microsoft.Toolkit.Uwp.UI.Controls

Package Version(s): 5.0

Windows 10 Build Number:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [x] October 2018 Update (17763)
- [ ] Insider Build (build number: )

App min and target version:
- [ ] Fall Creators Update (16299)
- [ ] April 2018 Update (17134)
- [x] October 2018 Update (17763)
- [ ] Insider Build (xxxxx)

Device form factor:
- [x] Desktop
- [ ] Mobile
- [ ] Xbox
- [ ] Surface Hub
- [ ] IoT

Visual Studio 
- [x] 2017 (version: 15.8.5)
- [ ] 2017 Preview (version: )

[michael-hawker]

I've done some initial poking at this, the ListView doesn't seem to be firing any events during the drag where it indicates that it size changes for the animation which is very strange. I'm going to have to dig deeper and see if I can create a repro with just a ListView in a Grid Row/Column that exhibits this behavior.

[frankthvandeven]

The clipping is related to the StackPanel in the ItemsPanelTemplate in TabView.xaml.

The StackPanel doesn't use full width, but is as wide as the tab headers in it.

It seems the drop listener is attached to the stackpanel. In the attached screenshot you can see that dropping next to an existing tab is not possible. You can only drop by releasing the dragged tab onto an existing tab.

    <Setter Property="ItemsPanel">
        <Setter.Value>
            <ItemsPanelTemplate>
                <!--  Note: We have to use StackPanel here due to other issues using ItemsStackPanel or VirtualizingStackPanel  -->
                **<StackPanel Orientation="Horizontal" />**
            </ItemsPanelTemplate>
        </Setter.Value>
    </Setter>

[michael-hawker]

Thanks for the additional info @FrankVanDeVen, I think we probably need our own custom panel to handle these scenarios better. One that can have the padding behavior built-in (which would solve the drop-target issues as well.

[windowstoolkitbot]

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

[windowstoolkitbot]

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

[windowstoolkitbot]

This issue seems inactive. It will automatically be closed in 14 days if there is no activity.

[lukeblevins]

@michael-hawker Why is it that setting an ItemsStackPanel as the ItemsPanelTemplate currently causes a problem?
I have a bug where removing TabViewItem fails to remove seemingly anything from memory (even after forced GC). I was suspecting that this behavior is typical of the default StackPanel. Regardless, attempting to change it to an ItemsStackPanel gives me a very generic COM Exception: Unspecified Error, which seemed to contain a message stating the panel I was attempting is "not allowed."

[Kyaa-dost]

Closing this as WinUI already supports TabView control and will be removing this from the Windows Community Toolkit in 7.0 release.