85

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?

Sevenate
  • 6,221
  • 3
  • 49
  • 75
Plain Coder
  • 993
  • 1
  • 8
  • 13
  • 2
    This msdn blog post (tip 10) seems to suggest that the two workarounds you already know about are the official solution. http://blogs.msdn.com/b/wpfsldesigner/archive/2010/06/30/tips-and-tricks-for-working-with-the-wpf-and-silverlight-designer-in-visual-studio-2010.aspx – Chris Petheram Jun 17 '14 at 08:16
  • 15
    It's sad that after 4 years they still haven't implemented this feature. Multi-monitor setups have been commonly used for at least 10 years already. – Plain Coder Jun 17 '14 at 10:23
  • 2
    6 years now, i wonder if something changed – Ateik Oct 18 '16 at 08:06
  • 1
    @PlainCoder More like 20 years. – John Stock Dec 15 '17 at 11:27
  • 1
    2019 here we are and its still not implemented :D – Benyom Apr 05 '19 at 14:13
  • 1
    This has been suggested over at the Developer Community at least twice already, but so far to no avail. I have added an upvote to the most recent suggestion I could find, linked the previous suggestions and this question and - most important - pre-emptively [explained](https://developercommunity.visualstudio.com/comments/773224/view.html) why the common workaround is not an option. – LWChris Oct 11 '19 at 09:38
  • 1
    Just keeping this alive - 2020 and not implemented. I think my dog could have learned c++ and done it by now! :P – Sk93 Apr 15 '20 at 08:58
  • I can confirm that VS 2019 finally offers the "Pop out XAML" feature. – Scruff.R Mar 02 '21 at 12:39

5 Answers5

83

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.

florien
  • 487
  • 5
  • 16
puttu
  • 969
  • 7
  • 10
  • 7
    Did you read my second workaround above? It's exactly what you suggest. – Plain Coder Jul 03 '14 at 11:05
  • 1
    @PlainCoder, just want to confirm that in **VS2015** this works great and as expected - with syntax highlights (even with ReSharper 10 highlights) and fully synchronized. Seems like it is safe now to accept this answer. – Sevenate Dec 04 '15 at 19:23
  • I can confirm that this also works in VS2013 as @Sevenate describes. – Kidiskidvogingogin Feb 12 '16 at 20:36
  • 1
    @Sevenate My visual studio 2015 do not works as expected and do not synchronize the syntax highlights. – Steve.NayLinAung Jun 16 '16 at 15:44
  • @Steve.NayLinAung if you've followed these two steps - could you please describe how it works for you? – Sevenate Jun 17 '16 at 23:27
  • 4
    it is synchronized in the sense that you make a change and the other window is updated - but unfortunately you can't click on an item to see the corresponding element or code in the other window :-( – Simon_Weaver Jan 20 '17 at 01:33
  • Yes this is an incomplete solution since the new window is not responsive to the old one. – j riv Jan 30 '17 at 21:59
  • It is NOT fully synced in VS 2017 – John Stock Dec 15 '17 at 11:28
  • To make everything clear: opening with the xml editor is not recommended (as it was said in the question), but with source code editor it is property highlighted, only the selected element highlighting is not syncronised. This answer describes the best possible solution for the case. – florien Apr 14 '18 at 22:50
12

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:

XAML/Design toggle options

CJBS
  • 15,147
  • 6
  • 86
  • 135
Vivek Kumar
  • 163
  • 1
  • 4
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.

Simon_Weaver
  • 140,023
  • 84
  • 646
  • 689
  • Not exactly a complete solution either since people need to click on the UI representation and go to the XAML. – j riv Jan 30 '17 at 22:01
  • Also edit and continue for XAML is not able to handle all edits. For example, including a Dictionary in a MergedDictionary or adding DataTemplates does not seem to always work. – Mike de Klerk May 01 '17 at 06:38
  • Also you cant zoom in – Ateik Apr 05 '18 at 11:02
0

Use pop-up XAML option next to Design & XAML Panes which will pop-out the XAML editor to a new window, which can be moved to another screen. Element highlights won't work but changes will be reflected on the fly.

Shivendra Bisht
  • 1
-2

If you have two screens, split the designer window vertically, undock the window from visual studio then resize the window so that the width spans over your dual screens.

disklosr
  • 1,536
  • 17
  • 26