Flex side Dock Control

Is part of Microsoft Visual Studio IDE.

　　

This is a type of window that can be docked. The second button in the window title bar can control whether the window is docked. When the window is docked, it will be integrated with the main interface. You can click the tabbar below the window (if the window can be docked is under the overall layout) to select which window to display; the non-docked window does not occupy the overall layout space. It only appears as a pop-up window, And the tabbar only occupies a small space on the overall layout side, when you move the cursor to a tab on the tabbar, the corresponding window will pop up, and the window will be hidden when you move the mouse away. This kind of side window can be docked is a very friendly user interface, we hope to use it when using Flex as the front-end interface. However, flex does not provide similar components. It doesn't matter. We can do this by ourselves.
In a rough view, it seems that the tabnavigator component can achieve similar results, but the tabbar of the tabnavigator component seems to be only above. However, this type of dock window needs to be docked in the upper, lower, left, and right directions. Therefore, tabbar needs to appear in each direction separately, therefore, you need to use a container nested viewstack (which can be nested with the dockablepanel window) and tabbar to implement it. However, tabbar does not fully comply with the requirements. First, the text direction in tabbar cannot be controlled. Second, each tab must have two states, that is, the mouse clicks to control the selected/unselected, And the mouse moves to the automatically selected and removed options to the unselected ones. Therefore, we need to implement a tabbar or dockbar by ourselves.
The control of the dock/non-dock status in the dock window is also a bit tricky. If the layout is absolute, it is easy to do. You only need to control the location of the window. But for non-absolute layout, simply changing the location won't work. However, the addpopup and removepopup methods of popupmanager can be used: when the window is in the stopped state, it is put into the viewstack. When the window is not in the stopped state, it is moved from the viewstack, and add it as a pop-up window. After removing the call window from the viewstack or using the removepopup function of the popupmanager, you must set the includeinlayout attribute to false. Otherwise, the expected effect cannot be reached.
You also need to add a dock button on the title bar of the dockablepanel. After inheriting the panel, you need to create such a button and add it to the titlebar of the Panel.
The implementation of the side dock window is generally like this. I tried to write about it and basically implemented most of the functions, but the code is too abuse and there are many bugs.
Is my demo:

　　

Program download:

Http://download.csdn.net/source/2028447