Is it possible to separate the design area from the XAML panel in Visual Studio?

Question

Is it possible to separate the WPF window that I am developing from its XAML code? Double-clicking on any XAML file will open it and show both the XAML code and the WPF window in one window, dividing them horizontally or vertically, but still both are in the same window. I have 4 monitors, and the XAML code I write has long lines, so I would like to edit the XAML code on only one monitor and view the WPF window on another, but it is not possible to split them into two different windows.

A few lousy workarounds that I can make, but I don't like:

• Disconnect the entire XAML editor with the designer, then resize this window to two monitors so that the XAML code is on one monitor and in the WPF window on the other.
• Use "Open With ..." to open the second editor of the same XAML document, but then the code highlighting and WPF window highlighting are not synchronized.

So can they be broken? Or maybe you have a better workaround than mine?

Answer 1

I had the same problem, then I found a way to separate it,

• Right-click the XAML file in Explorer and select Open with
• select Source (text) editor

This creates a separate tab for the original XAML editor, just undock it and create a new window.

Answer 2

Click the double arrow button located on the right side of the XML code.

Clicking on one of these options separates XAML and Design from two separate panels in one window. From there, the panels can be switched.

To restore the original configuration, click the double arrow button >> again.

These options are highlighted below:

Answer 3

Visual Studio 2017 has a new "Edit and Continue" mode for XAML, which is really awesome, and for me the need for this "splitting" feature has been eliminated.

https://blogs.msdn.microsoft.com/visualstudio/2016/04/06/ui-development-made-easier-with-xaml-edit-continue/

You can literally type in XAML and instantly update the running application, so place it on any screen you want.

Editing my Visual Studio for XAML has become super super slow, and updates are now instant and happen inside a real running application - this will make development much faster.

Answer 4

If you have two screens, split the designer window vertically, open the window from the visual studio, and then resize the window so that the width spans your double screens.