Sapphire: New Web Form designer in Visual Studio Orcas.

Today is a huge day in my life. Today we integrated Sapphire project (as well as a lot of other new features) into the Visual Studio Orcas mainline. Sapphire project goal was to replace old, IE-based designer by a new one that is based on FrontPage technologies. It is the same set of components that Microsoft Expression Web is based on.

Work to integrate new designer began little more than two years ago, in November 2004. Yes, almost a full year before even VS 2005 shipped. The project took quite a long time since FrontPage designer has never been a component before so a lot of time went into rearchitecturing and separation of key components from the rest of the code. Then there was a massive amount of work to change Visual Studio code to incorporate new designer and provide it with all the services it required. Then a quite some amount of new code was written to make VS work with Split view and CSS editing tools. Visual Studio provides its own project system, HTML and CSS source editors and does not use those pieces that SharePoint Designer or Expression Web employ.

Also, we wanted to be sure that almost all the functionality that worked in Whidbey still works in Orcas and hence we spent a lot of time making sure our existing automated tests pass. We are still working on fixing issues in lower priority cases, but all important scenarios should work.

You will be able to download and play with the new features in the February CTP of the Visual Studio Orcas.

So here is what you get in Orcas:

 1. New designer based on the same technology as Expression Web.
 2. Extensive CSS tools.
 3. Support for nested master pages.
 4. Split view.
 5. Ability to access all tools that ASP.NET controls provide in Source view.
 6. Intellisense and validation in <style> blocks.
 7. Support for master pages in web.config.
 8. Significantly improved performance of view switching.
 9. Unified undo/redo stack that remembers operation is all views.
Here is how Visual Studio Orcas Web development tools look like:

VS Orcas Web Tools

In the center there is a new designer in a Split view with the Visual Studio source editor. You can see how selection is synchronized between Design and Source panes. At the left side you can see Apply Style and Manage Styles task panes. At the right side there is familiar Properties window as well as new CSS Properties panel. At the top there is new Style Application toolbar.

You can also split views vertically which useful when you work on widescreen monitors:

CSS Tools are available in Source view when it is synchronized with the design view (more about view synchronization in the next blog post):

ASP.NET control properties, builders, wizards and events tab are available in Source view as well

New designer provides ruler, grid and an extensive set of visual aids for control editing and positioning

There are also a lot of new options. CSS options panel allows you to define which attributes or styling the designer should be using

CSS Tools Options

But wait, there is more! There also significant improvements in JScript intellisense, client script breakpoints management, AJAX support, Web Application projects, ability to specify version of the framework to compile for – but they warrant separate blog entries so I am planning to blog about each feature in more details in the upcoming weeks. I am sure there are going to be posts about new Orcas functionality in ScottGu’s blog as well as in our team blog.

Comments (43)

  1. Looks awesome.

    Can you tell us what to expect if we’re currently using the Pro version of VS 2005?

    i.e. Upgrade advice, should we install Orcas on the same machine, etc. Thanks.

  2. Yes, you will be able to install Orcas on the same machine as Whidbey (VS 2005). I don’t know exact feature set of the VS 2007 Pro, but normally it does not become smaller from version to version. However, you may not need VS 2005 as Orcas will be able to target 2.0, 3.0 or 3.5 .NET frameworks.

  3. Jim V says:

    Can the split view be used with dual monitors?

  4. No, you can’t drag design view to one monitor and source view to another, it is a single window frame in VS IDE. It is possible to stretch IDE window so it spans two monitors though.

  5. Vivek Thakur says:

    Great work!

    What about the speed when switching between different views? Would it be somewhat slower than earlier? or same?



  6. It should be practically instant except first switch when designer is getting loaded for the first time. I am planning to blog in more details how split view works, but effectively view switch does not exist anymore, it is just a window resize. So when you are in source, designer is still semi-active and provides CSS tools, for example. When you are making changes in Design view, they are reflected in the Source practically immediately. Design view is essentially split view with Source hidden.

  7. paolod says:

    Dear Dr. Arkhipov,

    how – and if – ruler, grid and an extensive set of visual aids for control editing and positioning improves and differentiates from what NetBeans offers with "Matisse"?

  8. Bill Glosser says:

    How about a tool or "go to" function that would show you what css files/entries are affecting a particular control?

  9. GuyIncognito says:

    Wicked!  Nice way to start off my morning.  Please keep the excitement going strong with VS.NET!  

  10. Peter says:

    Is Visual Studio Orcas going to be a new version of VS or will it be a free ugrade to VS 2005?

  11. Diego Neufert says:

    Hi Mikhail, congratulations!! great job!!

    Do you have any clue of when it will be released? (I know it’s with Orcas)

  12. Curlyfro says:

    ok, you can’t drag the design view to one monitor and the source view to another.  but can you still drag the other different views to your second monitor?

    will Orcas also have wpfe designer integration?

    keep up the great work!

  13. To Bill Glosser: you typically can see all applied styles and the way the are applied in the CSS properties. We may add a goto function, we haven’t shipped yet 😉

    To Peter: Orcas is the next major version of Visual Studio.

    To Diego: there is no official public date yet…

  14. Mads says:

    I’m a little bit worried when you say "…when you are in source, designer is still semi-active…"

    Wouldn’t VS be "lighter" if you could disable it altogether?

    Sure, it will make switching between source and designer faster, but I NEVER use the designer, so why force me to use system resources on the designer?

    I found VS2005 to be very sluggish compared to VS2003. I realize that them you put new stuff into an application, it gets heavier, but the difference was huge. At least on the computers I run VS on, and they are not that old.

    I guess what I am saying is…

    New cool stuff – great.

    But give the option to disable stuff (or  not install parts).

  15. Eddy Young says:

    As a rule of thumb, I avoid absolute possible as much as possible. Does the new designer take this into consideration?

  16. Jason says:

    How about a split view with browser previews?  It would be nice to have a split screen preview to compare in IE, FF, and other installed browsers.

  17. Lolo Fernandez says:

    Can I run web application developed with Orcas in Windows 2003?

  18. Does February CTP work on Windows Vista?

    Keep up the good work!

  19. To Mads: if you never switch to Design or Split view, the designer never gets loaded so you won’t have to pay any memory or CPU tax.

    To Eddy Young: you don’t have to use absolute positioning if you don’t want to. There are great CSS tools and good table editor. However, many users who only develop for Intranet have been complaining about missing easy control positioning as in VS 2003. Therefore we are trying to provide tools for both camps 🙂

    To Lolo: of course, they are just Web apps, they run in any browser on any platrofm.

    To Mikael: Yes it does. However, CTPs are provided as both VM and standard setup, so you can just run VM if you wish.

  20. Jeremy says:

    All this talk of adopting the FrontPage designer has me worried. As you know, one of the big fixes to the web form designer in Whidbey was leaving the developer’s source markup intact (in ealier versions of VS, the web form designer had a nasty habit of reformating your markup code to something less than desirable). You must promise me that we aren’t going back to that behavior! 🙂

  21. To Jeremy: Of couse not, FrontPage designer never had problems with markup formatting :-). Formatting changes were specific to IE-based designer, as I explained back then here: In fact, we are now able to remove Whidbey code that managed formatting preservation.

  22. Mark Petersen says:

    "Of couse not, FrontPage designer never had problems with markup formatting :-). Formatting changes were specific to IE-based designer…".

    FrontPage had major problems with markup formatting and attributes and so does Visual Studio right now. Nobody wants IE-specific markup as much as Microsoft wants us to write only for IE. Has anyone tried looking at Windows Live Mail in Firefox? To my surprise, it doesn’t look so hot. Wonder why…

    Any decent web interface designer does not use a WYSIWYG editor for much. It’s just too difficult to predict what the editor is going to do to your markup. Though it is useful for auto-generating code-behind methods for say a button click. It would be nice to be able to do that from the markup.

    I’ll have to try it, but it seems like it will just be more options for me to turn off.

  23. To Mark Petersen: I believe we are talking about different things. What I mean is that FP-based designer does not reformat markup that you typed in.

    Generation of new elements is a different aspect. Do you think new Expression Web designer still generates IE-specific markup? I’d like to hear examples as I would like to see this fixed before we ship Orcas.

    Nothing in my team goals says to promote IE-specific features. In fact, we have been trying to make VS more standard compliant.

  24. Ken Brubaker says:

    Do you support Zoom in the Design view along with your rulers, grids, etc?

  25. Jeremy says:

    Thanks, Mikhail, for the quick reply to my post (and providing this blog in the first place). Your explanation of the markup reformat issue in earlier VS releases was very informative.

    I’m excited by the new web designer features slated for Orcas. Also, I’m glad to hear that you are making an effort for VS to be more standards compliant. The more standards compliant VS is (as well as ASP.NET, IE), the easier our jobs will be as developers to support multiple browsers.

  26. Uwe says:

    Where are the horizontal scrollbars on your posting, to show me the full screenshots?

    Maybe I should buy a wide-screen monitor now :-).

  27. Gabriel says:

    Good work and congrats!


    ***     DOWN WITH CRIPPLEWARE   ***


  29. Kelowna Kid says:

    I absolutely hate the web designer in VS 2005. We developed a ton of apps in VS 2003 all using absolute positioning, including displaying the grid, snap to grid and the ability to use the arrow keys to finely position objects.

    From what I see in Orca, you are reinstating that functionality. Is that correct? It’s essential that MSoft realizes that contemporary web page design must enable absolute positioning, so that we are able to more accurately mimic windows design.

    So, are you going to put back the grid display, snap and arrow positioning that you removed from 2005?


  30. Yes, some of the absolute positioning functionality is coming back, you will be able to use grid and snap.

  31. Kelowna Kid says:

    Thanks, my friend.

    I assume when you say, "use grid", you mean that there will be pixel displays again, like VS2003?

    Hopefully, Orca will also provide object group positioning… 😉

    Another question, though – In VS2003 WebForms, you could use the mouse to select a group of controls and reposition them.

    I’ve searched and searched and searched, but I can’t find how to do that in VS2005 WebForms.

    1. Can it be done?

    2. Will it be put back into Orca?

    For those who are interested: I figured out how to do arrow positioning (Tools > Options > Environment > Keyboard > Edit.MoveControlDown/Up, etc., but it doesn’t snap, it moves a pixel at a time. But at least it’s a way to get some accuracy.

    Change to Global.



  32. 1. No

    2. No

    Unfortunately, new designer does not support multiple selection.

  33. Kelowna Kid says:

    My friend,

    In a day and age where even the most elementary designers allow mouse selection and block movement of groups of objects, I’m disappointed that the new designer would lack this fundamental function.

    Every designer on the planet of worth, including most MSoft Office products, supports group selection – if the Orca designer is going to allow absolute object positioning, you have to provide some method to select multiple objects so that they can be quickly and efficiently moved…

    Currently, in VS2005, you can click into a panel and click Ctrl-A to select the objects within that div or panel, but when I try to move them as a block or deselect an individual object using Ctrl-Left click, the designer voids the entire group selection.

    Perhaps a compromise solution would be to at least allow groups of objects inside another object (or, if it’s a problem, limit it to objects inside a panel) to be selected via Ctrl-A and moved as a group? That way, I could select a group, then deselect those objects I don’t want to move, and move the remainder.

    Otherwise, the amount of design time necessary to position objects could increase dramatically.

    Also, of course, the new designer would, I assume, include group positioning (right/left align, commmon spacing and son on), so that will help.



  34. This is true in Windows development. However, in Web development control positioning is done primarily using divs/CSS or tables. This works better when page should work in different browsers with different screen resolutions. Absolute positioning does not work well with master pages or server controls which may generate different HTML under different conditions potentially breaking page layout since absolute positioning does not work relative to the page or browser window and rather works off the nearest positioning container, which is not necessarily document body or nearest div. Some page elements may end up hidden if browser window is smaller than the element positions. Table based layout works better in that sense.

    New designer primarily oriented towards CSS/div and table based layout as they are most commontly used ways to lay out pages. It does support absolute positioning, but it is not primary layout tool. Multiple selection is supported from CSS and style management tools.

  35. Kelowna Kid says:

    The reality is that browsers should all use the same standards and we, as developers, shouldn’t be penalized by removing important functionality just so the designer can work with all browsers. We’ve had nothing but praise for the user-friendliness of our absolutely-positioned solutions.

    Web development is done with CSS and DIV – yes, that’s true, but the next object is typically a panel on the DIV. Then, on that panel, are all the absolutely-positioned controls. The result is a Window-like solution that our users love.

    Absolute positioning worked perfectly fine in VS2003 and allowed group object selection. This is a designer, Mikhail, and it should offer every convenience possible to developers.

    Absolute positioning is a standards-based function in web pages, so it should be fully supported in order to encourage more Windows-only designers to consider using WebForms as a method of data delivery. That means not only should there be grids and snap, but further group selection, object alignment and so on.

    Why go half way with the new designer, Mikhail?

    What you say works better is your opinion, not mine. To say that page elements end up hidden if the browser window is smaller than the elements is not an effective argument. A small window hides DIVs, tables and everything else, so that really has nothing to do with absolute vs. relative positioning.


  36. Terrance A. Snyder says:

    Where is the component tray you took out of 2003! I want my non-visual components off the screen and back onto the component tray! Take a look at this for more people other than me wanting this

  37. Peter Newby says:

    Like Terrance and Daniel Cazzulino and Carlos Quintero and … I too am waiting for the restoration of design time component support in webforms, with designerhost access between webcontrols and IComponents.

    The EPICOR Manage 2000 development team has not been able to adopt VS2005 because of the elimination of this crucial design time capability.

  38. Peter, I have to disappoint you, but currently there are no plans to bring component tray back in Orcas.

    Non-visual controls can ba granularly switched off using View | Visual Aids menu, similar to Expression Web.

  39. Peter Newby says:


    The problem is not merely an aesthetic desire to clean up the UI.  It is the need to develop (or continue to support for some of us) components which enrich the developers experience. This was supported in VS2003 and was a VERY powerful extensibility feature.

    The elimination of IComponent design time support for extending webcontrols is devastating.

  40. Kelowna Kid says:

    Peter, I went to the site:

    but the images do not display. Can you arrange for them to display so that I can clearly understand all your concerns?


  41. Peter Newby says:

    Hi Kid,

    The site belongs to Daniel Cazzulino.  I have notified him that the images are no longer accessible.  Hopefully they will show back up soon, as it is a great example.

    His usage is more elegant and powerful than what we have implemented so far here;  combining designer logic with IExtenderProvider to layer on a clean domain specific data binding UI which will work with any control without having to sub-class them.

    In the case of Manage 2000 we sub-classed Textbox, DropDownList, and few others to add our extensive metadata properties.  Our business object definitions on the database provide client installations with simple table based tailoring of validations, search displays, edit checks and the like.

    Developers can load the business object field metadata in VS and tweak it for their particular application.

    Our web functions use datasets with multiple child related tables to capture hierarchical UI which should be transacted all at once.

    For RAD and tailorability in the field by folks who don’t spend all day in VS we need to provide a clean databinding UI to let people map dataset table fields to webcontrol properties such as Textbox.text.

    All of this presumes that the component designer actually has access to the webcontrols and the datasets on the form at design time.  Which was true with VS2003, but is no longer so.

  42. Peter Newby says:

    Daniel Cazzulino’s example is available on codeproject: