Can I separate the Design Pane from the XAML Pane in Visual Studio?

Is it possible to separate the WPF window I'm designing from its XAML code? Double clicking any XAML file will open it and show both the XAML code and the WPF window in one window, splitting them either horizontally or vertically, but still both are in one window. I've got 4 monitors, and the XAML code I write has long lines, so I'd like to edit the XAML code on one monitor alone and view the WPF window on another, but splitting them into two different windows doesn't seem possible.

A couple lousy workarounds which I can do but I don't like are:

1. Undock the whole XAML editor with the designer, then resize that window over two monitors so that the XAML code will be on one monitor and the WPF window on another.
2. Use "Open With..." to open a second editor of the same XAML document, but then the code highlighting and the WPF window highlighting are not synchronized.

So is it possible to split them? Or maybe you have a better workaround than mine?

Solution 1:

I had this same problem, then i found a way to separate it like this,

• Right click on the XAML file in the solution explorer and select Open With;
• select Source Code (Text) Editor (instead of XML (Text) editor).

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

Solution 2:

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

Clicking one of these options will separate the XAML and the Design into two separate panes within the same window. From there, the panes can be toggled.

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

These options are highlighted below:

Solution 3:

Visual Studio 2017 has a new 'Edit and continue' mode for XAML which is really awesome and for me has removed the need for this 'splitting' functionality.

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

You can literally type in the XAML and have the running application instantly update - so put that on whatever screen you want.

My Visual Studio editing for XAML had become super super slow and the updates are now instantaneous and occur inside the actual running application - will make development so much faster.