TabDroppedOutside event never fires in C# UWP app using TabView using Microsoft.UI.Xaml.Controls

Question

I'm developing an app. The main page is mainly a tab control similar to Google Chrome. I want to allow the user to drag a tab out of the current window and create a new window for the tab that has been removed. I've read the documentation for the TabDroppedOutside event which seems very clear and straightforward and even provides an example for exactly what I want to do but the event never triggers for me. Is there something I am missing?

This is a UWP app. My main page references Microsoft.UI.Xaml.Controls like this:

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

The main page contains the tab view like this:

<muxc:TabView 
    Margin="0"
    Padding="0"
    x:Name="TabView"
    IsRightTapEnabled="True"
    TabDroppedOutside="TabView_TabDroppedOutside"
    AddTabButtonClick="TabView_AddTabButtonClick" 
    SelectionChanged="TabView_SelectionChanged" 
    TabCloseRequested="TabView_TabCloseRequested">
    <muxc:TabView.TabStripHeader>
        <Grid x:Name="ShellTitleBarInset" Background="Transparent"/>
    </muxc:TabView.TabStripHeader>
    <muxc:TabView.TabStripFooter>
        <Grid x:Name="CustomDragRegion" Background="Transparent"/>
    </muxc:TabView.TabStripFooter>
</muxc:TabView>

An this is my TabDroppedOutside event:

private async void TabView_TabDroppedOutside(TabView sender, TabViewTabDroppedOutsideEventArgs e)
    {
        Debug.WriteLine("Dropped outside");
        // Create a new AppWindow
        AppWindow newWindow = await AppWindow.TryCreateAsync();

        // Create the content for the new window
        var newPage = new MainPage();

        // Remove tab from existing list
        TabView.TabItems.Remove(e.Tab);

        // Add tab to list of Tabs on new page
        //newPage.AddItemToTabs(e.Tab);

        // Set the Window's content to the new page
        ElementCompositionPreview.SetAppWindowContent(newWindow, newPage);

        // Show the window
        await newWindow.TryShowAsync();
    }

However this event never fires when I drop the tab outside the window even though it is a copy/paste from the example. I just commented out their event that adds the tab to the new page since I want to get the new page worked out first. When dragging, I also see the cancel sign over the tab which indicates it cannot be dropped. I've tried setting "AllowDrop" and "AllowDropTabs" to true but this didn't work.

Answer 1

The solution for me was the CanDragTabs property. Setting this to true allows the event to fire.

It's frustrating that the official documentation does not include this property as a necessity for the event to fire. The properties also seem confusing since dropping is "AllowDrop" and dragging is "CanDrag". They should both be phrased "allow" or "can" in my opinion.