UWP TABVIEW HOW TO
UWP TABVIEW WINDOWS 10
UWP TABVIEW WINDOWS

The last piece of our big puzzle with transferring a tab between windows is removing the tab from the originating window. TabDraggedOutsideEventArgs e ) Closing the original Tab

Private async void Items_TabDraggedOutside ( object sender, Microsoft. Now we can simply create a new window using our same page type and pass it our data (more on this in the next section): This allows us in the OnNavigatedTo event of our page to grab this context out of the Parameter argument when a secondary window is created. In our case, we needed to provide some context for the new window to create itself (the tab's data), so I added a Context property to the ViewLifetimeControl and modified the TryShowAsStandaloneAsync method on WindowManagerService to accept this context and add it to the construction of the ViewLifetimeControl. We also need to remove this tab from our original window.įortunately, the Windows Template Studio provides a feature template (' Multiple views') for setting up and controlling the life-cycle of Secondary Windows. Once the user has dragged a tab outside of the window, we need to create a Secondary window in order to display the tab. This means another window or application didn't accept the drag as a valid operation and in our case is an excellent indicator that the user dragged the tab outside the window and wants to 'tear' it off. The TabView does this by looking for a drag which had no operation accepted. We can listen to this event to know when the user has requested a tab to leave its window. Detecting Tab Dragįortunately, this is an easy one as the TabView control provides a TabDraggedOutside event. The rest of this article will share how this sample addresses each of these challenges. In addition we can provide added app real-estate by properly handling the following: Close a window if the last tab is moved.Move a tab between two existing windows.Transfer our tab data to the other window.Create a secondary window to display content.Detect dragging a Tab out of the window.There are a few main technical pieces we need to make this scenario work harmoniously: This sample demonstrates the main building blocks needed to provide this experience with the new TabView control. This scenario is alluring for other document based apps as well. They also let users drag tabs between windows. We could mitigate this in the future by detecting the drag entering our window and toggling the visibility of our TabView (ignoring the visibility of the TitleBar from the system in this scenario).įor many years, browsers have allowed users to drag tabs out of their windows to move tabs between monitors. This is a known bug which needs to be resolved in the TabView control, see Issue #2670.ĭragging into a FullScreen Window is not supported.Ĭurrently, the hidden TitleBar of a FullScreen app doesn't appear when performing any drag operation. The right-most tab will disappear when dragging a tab to another window. Clicking on the Taskbar Icon for the app restores the origin window to FullScreen as expected. This also causes an issue if the origin window is FullScreen as the new window is created on the same monitor and takes focus away from the original window, making it look like FullScreen mode has been exited. This is a platform limitation for two reasons, A) we can't determine which monitor the user has dropped the item on, and B) we can't request the window to be opened at a specific location. This sample assumes all Windows are managed by the same process and shares the same implementation for each Window.ĭragging a tab to another monitor/position doesn't open the window on the other monitor/position. This samples assumes the implementor will be using a collection of custom data items bound to the TabView. When constructing a new Window, it needs it's own UI shell to be reconstructed. DependenciesĮach Window runs its own Thread, this has implications on data transfer, Window messaging, and UI Page/Control construction.

UWP TABVIEW WINDOWS 10

Requires VS 2017 and Windows 10 version 16299 or above.

UWP TABVIEW HOW TO

It also demonstrates how to place Tabs in the Title Bar of the Application and properly handle Full Screen support. This sample demonstrates how to use the Windows Community Toolkit's TabView control in combination with Windows Template Studio's Multiple Views support to show how to emulate Microsoft Edge's tear-off tab windowing in your UWP app.

Uwp tabview