How does split view work in VS Orcas

As you probably know from my earlier blog post Visual Studio Orcas (and future Visual Web Developer Express) now have Split view similar to the Expression Web designer. Although Visual Studio is using largely same designer, it provides its own Source markup editor. Therefore split view behavior is somewhat different from Expression and former FrontPage.

The important part is that many tools, especially in CSS area, are provided by the designer. Designer is also responsible for instantiating controls on the page so you can edit their properties in the Properties window and bind events in the Events tab. When you first open page in Source view, the designer is not loaded for performance reasons. Here is how VS looks like after page is open:

You can see that CSS tools are empty, Properties windows does not have Events button and Properties dropdown display ASP.NET button as <BUTTON> Button1. Basically, you are getting VS 2005 editing experience. Important difference however, is that after you switch to Design view at least once, designer is activated and remains loaded even after you switch back to Source view. This allows us to keep unified undo stack which does not collapse all Design view actions into a single 'Design View Changes' undo item as it happens in VS 2005. It also allows you to use designer-provided tools in Source view. Here is how VS Orcas looks like when you switch from Source view to Design and back.

It is important to understand that designer-dependent tools only work when designer is syncronized with the Source view contents. Automatic syncronization happens when you:

1. Switch to Design view.
2. Activate design pane in Split view.
3. Save the file.
4. Change control ID that causes refactoring in code with forced file save.

If I simply type in Source view, design view goes out of sync and tools revert to the Source-view driven behavior. In Split view a special banner appears:


You can sync view by saving the file, by clicking on the banner (click does not activate the designer, only loads it with the new content) or by using new Synchronize Views command available in the View menu. In the current bits some tools remain enabled depending on what changed in the file, we are still working on exact syncronization scenarios.

When designer is in sync with Source, all tools are available because Source and Design views maintain selection syncronization. Designer always updates selection in Source view and Source view pushes caret position to the designer on idle. When you place caret in asp:button tag in Source view, caret position will be sent to the designer which, in turn, will locate and select the correspondent control instance and you'll see live control instance in the Properties window. Live control instance makes Events tab and all other control-provided tools, editors and wizards available in Source view.

When you use designer-provided tools in Source, change goes to the designer and then persists to the Source view. Some people expressed concerns that designer may be changing markup formatting as it used to happen in VS 2003. Let me assure you that FrontPage-base designer never had issues with reformatting user markup, so no worries :-).

In VS Orcas view switch is practically gone. When you switch views we only resize the window hiding inactive view. However, it is still there and maintains its functionality. For example, when you are editing page in Design view, changes are sent to the Source view immediately, VS Orcas does not wait until the view switch and instead behaves like Expression Web or FrontPage 2003.When you are moving caret in Source view, selection changes in designer even if it is invisible (i.e. you are in Source view).