TabView.TabDroppedOutside Event

Reference

Definition

Namespace:: Microsoft.UI.Xaml.Controls

Important

Some information relates to prerelease product that may be substantially modified before it’s released. Microsoft makes no warranties, express or implied, with respect to the information provided here.

Edit

Occurs when the user completes a drag and drop operation by dropping a tab outside of the TabStrip area.

// Register
event_token TabDroppedOutside(TypedEventHandler<TabView, TabViewTabDroppedOutsideEventArgs const&> const& handler) const;

// Revoke with event_token
void TabDroppedOutside(event_token const* cookie) const;

// Revoke with event_revoker
TabView::TabDroppedOutside_revoker TabDroppedOutside(auto_revoke_t, TypedEventHandler<TabView, TabViewTabDroppedOutsideEventArgs const&> const& handler) const;

public event TypedEventHandler<TabView,TabViewTabDroppedOutsideEventArgs> TabDroppedOutside;

function onTabDroppedOutside(eventArgs) { /* Your code */ }
tabView.addEventListener("tabdroppedoutside", onTabDroppedOutside);
tabView.removeEventListener("tabdroppedoutside", onTabDroppedOutside);
- or -
tabView.ontabdroppedoutside = onTabDroppedOutside;

Public Custom Event TabDroppedOutside As TypedEventHandler(Of TabView, TabViewTabDroppedOutsideEventArgs)

Event Type

TypedEventHandler<TabView,TabViewTabDroppedOutsideEventArgs>

Examples

Tip

For more info, design guidance, and code examples, see TabView.

Open the WinUI 3 Gallery app and see the TabView in action.

The WinUI 3 Gallery app includes interactive examples of most WinUI 3 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub.

<TabView TabDroppedOutside="TabView_TabDroppedOutside">

// NOTE: The app is responsible for writing this code. A full sample can be found in the Xaml Controls Gallery.
private async void TabView_TabDroppedOutside(TabView sender, TabDroppedOutsideEventArgs e)
{
    // 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
    Tabs.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();
}

Remarks

You can use this event to create a new window.

There are different ways that content can be hosted inside an app. The Show multiple views for an app documentation outlines the various technologies for displaying multiple views or windows.

The example below uses AppWindow, which is available starting in Windows 10, version 1903 (SDK 18362). AppWindow simplifies the creation of multi-window UWP apps because it operates on the same UI thread that it's created from.

If your app targets Windows 10 versions less than 1903, you will need to use CoreWindow/ApplicationView. The Windows Community Toolkit TabView tear out sample demonstrates how to create a multi-window application using CoreWindow/ApplicationView.

Applies to

Share via