Enabling Vertical Split View in VS 2008

Last week I blogged about the new HTML web designer and CSS support in VS 2008.  In it I talked about the new "split-view" feature that allows you to see both the HTML source and the Design View of a page at the same-time, and easily have any changes you make in one view be updated in the other.

One of the questions several people have asked me since is whether you can customize the split-view arrangement so that you can have the views arranged vertically instead of horizontally - allowing you to make maximum usage of screen real-estate on wide-screen monitors and laptops.  The good news is that this feature is now enabled in Beta 2 (click on the image below to see my laptop screen in all its glory):

Notice above how when I select text in source-view, the designer automatically selects the equivalent markup element in design-view.  The "CSS Properties" window on the right-hand side works in both design-view and source-view, and enables me to easily see/edit all CSS properties (defined in an external style sheet) for the <img> element within my <ul> list.

To enable vertical split-view orientation in VS 2008, select the tools->options menu item and go to the HTML Designer->General section.  Then check the "Split views vertically" checkbox:

Hope this helps,

Scott

51 Comments

  • 搶到頭香^^
    VS2008 will be a fantastic tool for developers :D

  • Any chance we can get the split view working across multiple monitors?

  • This is a very good feature! If the vertical split-view can expand until dual monitor enable, it would be even better ^_^

  • In addition to this , one idea that comes to mind, like when you are viewing the vertical pane, if you modify something on the source view, it does not effects the design view automatically unless you focus to Design view. It would have been really nice for trial and error process, if i dont have switch my foucs to see the change. :-) , Like the IEDevtool bar or Firebug.

  • Neat feature

    CSS doesn't seem to recognize files that are referenced in the head of a masterpage in beta 2. Also it seems odd that a an unknown CssClass or class would show up as an error.

    Can you shed some light on why this is an error and not a warning?

  • Must say like the new version, I used to do things like add strange pieces of text in the design view so I could search for them in source view. Don't need to anymore! Great. Have noticed that in VSTO 2005 if you double click on a button it takes you to it's onClick event, but in VSTO 2008 it takes you to the page load? Am I missing a setting or something. I'd really like to go to the onClick. Great work though I love it.

  • Has the source control plugin api been revamped? I know that was one of the major hurdles in getting a SVN Plugin to work inside of VS (anksvn is terrible). I love TortoisSVN but having even a small amount of that capability in the solution explorer would be a very nice.



  • Fantastic Feature.
    Also Daniel Can you please explain what do you mean by [multiple monitors] ?

  • I would LOVE to see a split view across multiple monitors. Are there any plans to ever do something like that?

  • Scott - I notice that you run VS elevated ("(Administrator)" in the title bar). Any reason for this?

  • Hi Mehfuz,

    >>>>>> In addition to this , one idea that comes to mind, like when you are viewing the vertical pane, if you modify something on the source view, it does not effects the design view automatically unless you focus to Design view. It would have been really nice for trial and error process, if i dont have switch my foucs to see the change. :-)

    In are origional design we had live updates as you typed, but we found that performance wise it didn't make sense to-do the sync on every keystroke. Note that you don't have to switch the views to-do the sync, you can either save the file and it will do an automatic sync, or press the Ctrl-Shift-Y key in order to-do a sync without saving.

    Hope this helps,

    Scott

  • Hi Martin,

    >>>>>>> CSS doesn't seem to recognize files that are referenced in the head of a masterpage in beta 2. Also it seems odd that a an unknown CssClass or class would show up as an error.

    Can you elaborate on this? I haven't seen an case where CSS isn't honored if it is declared in the master page. What I have seen is that CSS intellisense is sometimes sporadic on content pages if the CSS file is referenced in the master page. I think this is a bug in Beta2 that needs to be fixed. Is that what you meant or are you seeing something different?

    Thanks,

    Scott

  • Hi Alan,

    >>>>>>> Have noticed that in VSTO 2005 if you double click on a button it takes you to it's onClick event, but in VSTO 2008 it takes you to the page load

    Are you clicking on a button in an ASP.NET page? If so it should take you to the button event handler (I just tried it out locally and it did). Can you send me an email (scottgu@microsoft.com) with more details of the behavior you are seeing?

    Thanks,

    Scott

  • Hi Duncan,

    >>>>> Scott - I notice that you run VS elevated ("(Administrator)" in the title bar). Any reason for this?

    I debug a lot of admin level processes on my machine, and so I need to run elevated in order to attach to these processes.

    Hope this helps,

    Scott

  • I see the bug is fixed with the "border-collapse" CSS property. Previously it was "valid" if you put it in a CSS file, but VS would complain if you used it in an inline style.

    Where is the CSS property list stored? I'm thinking that the list of CSS properties changes all the time across the browsers and it would be nice to edit this so I didn't get red underlines everywhere and errors in the error console...

    - Zombie

  • that is a good news to me

  • good to see the split in vertical mode also. By the way what is the size of your monitor. It must be large as I can see both the design and html very easily

  • Bout time really given that Dreamweavers had this for around ten years. Question is does it eat your machine like so many of previous visual studio enhancements.

  • Hi Scott, quick question about Cider. The HTML designer has options to force it to open either in split, source, or design views. Will Cider support these same items? We have a lot of XAML forms that Cider cannot render and it becomes tiresome having to manually force the source view to become full screen. Is there a registry trick that can force this now? Thanks...

  • Any hopes for VWD to get the split view? Is this going to stay VS2008 only and not extend to Express SKUs?

    I am loving the light weight product, it's amazing for campus environments. I can't wait for semester to start back up to show this off in my workshops.

  • It would be cool if you could change it without going to the options. Maybe by right clicking on the Split 'tab' on the bottom left or you could give the Split option a drop down arrow where you can choose Horizontal or Vertical.

  • Scott,

    I always want to float one or more tabs so that I can maximize them in different monitors. This provides more flexibilities than extending cross multiple monitors in cases such as four-monitor setup or dual monitor with different size.

    Kai

  • I love that split view finally made it into visual studio. One additional feature I would like to see is the ability to switch whether the code window is on the top or bottom (or, with vertical split, left or right).

    Thanks!

  • Is it possible to split across monitors?

    Being that a lot of developers are using multiple monitors it would be a great idea to have an option to split tabs or the split view across monitors

    Thanks

  • Scott,

    Enjoying reading your blog, getting to grips with the new features. Split screen is great feature, works great in full screen as well, which is whereI like to hang out when coding so really pleased with that.

    Was thinking about how the horitontal/vertical options was in that options dialog, and how people are asking for multi monitor support. How about a context menu on the split button with a 'float/dockable option(would split source and design into two seperate windows', horizontal/vertical option in it. Of course not sure how that fits in with the ui guidelines.

    Jason.

  • The vertical splitview is a great step in the right direction, but that means having to stretch the entire IDE to fill both screens, with the toolbars stretching across the gap and everything. Meanwhile, all of the "dockable/floating" windows allow one to move them independently of the IDE, which is TRUE multi-monitor support. What those of us with multiple monitors would love to have the ability to do, is to detach the design view from the IDE, and move it, as a seperate window, to the second monitor. Is there any chance of seeing something like that?

    Thanks!

  • It seems that if you use ~/ in your css references then all your css references will show as dead and not be rendered in the designer.

    I can simply remove the ~, but is there a practice I'm not aware of for building sites that work as a site root as well as in a virtual directory?

    Also all of the CssClass or class attributes that are not found show in the Error list as errors and not warnings. Can you shed some light on this? Getting the application working is typically my first priority and not making sure the styles apply. (Plus if I'm using ~ in my css file references then I have to dig through quite a lot of errors to find the real culprit). Personally I believe these should be in the warning list and not the errors.

  • Hi Scott,

    Nice work so far. With regards to CSS, I usually reference my stylesheets from a control (where I place all meta-tags) like this:

    @import '';

    VS2008 is not picking it up this way (not sure if it should).

    Thanks bunches!!!

  • ohhh better multiple monitor support in vs would be awesome

  • Scott,

    Any idea if Expression Web also be getting the ability to split vertical? Our designers want it too! :)

  • Hi Scott,

    One thing that has not changes in VS in general is when you right click on the References to add a reference. This as usual takes time. Will there be a performance improvement on this in the RTM? Why isn't the team looking into putting this in a background thread so that when one right clicks you see the list of components right away?

    Thanks,
    Ram

  • This is exactly the reason why I wish SDI mode were back in Visual Studio. With monitors becoming widescreen & > 24", I hate having all my real estate wasted because all my windows are encapsulated in one environment. Or with having a multi-monitor setup, MDI doesn't work as great.

    I liked how older versions (like VB) used to at least give the option to the user for MDI vs. SDI.

    What happens when you have such large real estate and want to work on 3 windows? (Design View, HTML source, & code behind)? On a large widescreen monitor SDI would would solve this.

  • Hi Scott

    I understand that split view mode don't update automatically but at least it could be great to have an option to check if we want it or not, maybe just under the split vertical chackbox in the options panel?

    Cheers
    Paschal

  • Hi Scott;
    Could you please talk about "ObjectDumper" in near future in some of your blogs? Is it still part of the Linq system or has it been removed?

    Thanks!

  • I asked the question about vertical split view on your post the other day, after I downloaded VS08 I spent almost 30 minutes to find the check box to enable the vertical split view.

    There are so many options now that it takes ages to find the right option, it would be great if the team came up with a better design for the options dialog in the next version. The whole UI would benifit from some IUI work.

    With that said VS08 on my 30" display is great to work with, it's small things like this that make an IDE good or great, keep up the good work.

  • Scott, I'm not sure if you get enough praise for what you do so I just want to say thanks for everything and keep up the good work.

    P.S. Tell Bill (or Steve) to give you a raise.

  • You should also add support for dual monitor developers, so the source code would be on the primary screen and the designer on the secondary screen, or vise-versa.

  • Hi Boris,

    >>>>>> Where is the CSS property list stored? I'm thinking that the list of CSS properties changes all the time across the browsers and it would be nice to edit this so I didn't get red underlines everywhere and errors in the error console...

    The CSS validation rules are actually stored in XML schema files that VS installs. The model is extensible, so you can actually go in and change them with whatever rules you want. you can also create new schema files and name them. You can then select which one you want to use from the validation drop-down in the IDE. This blog post covers this more: http://weblogs.asp.net/scottgu/archive/2006/02/02/437228.aspx

    Hope this helps,

    Scott

  • Hi Phil,

    >>>>>> Question is does it eat your machine like so many of previous visual studio enhancements

    You should fine the new design-view much faster than VS 2005. So far I haven't heard anyone who has used VS 2008 Beta2 complain about performance.

    Hope this helps,

    Scott

  • Hi Nikita,

    >>>>> Any hopes for VWD to get the split view? Is this going to stay VS2008 only and not extend to Express SKUs?

    The good news is that all of these designer features (including split-view) work in Visual Web Developer 2008 Express (which is free).

    Thanks,

    Scott

  • Hi Leo (and many others!),

    >>>>>> Is it possible to split across monitors?

    Unfortunately it isn't possible yet to split across multiple monitors. :-(

    It is something we are planning for the future though.

    Thanks,

    Scott

  • Hi Karls,

    >>>>> Nice work so far. With regards to CSS, I usually reference my stylesheets from a control (where I place all meta-tags) like this: @import '';
    VS2008 is not picking it up this way (not sure if it should).

    Unfortunately the above markup requires running code - so the VS designer can't resolve it at runtime I'm afraid. :-(

    Sorry!

    Scott

  • Hi Martin,

    >>>>>> I can simply remove the ~, but is there a practice I'm not aware of for building sites that work as a site root as well as in a virtual directory?

    If your CSS reference is within a control, I believe ASP.NET will automatically re-base your urls for you. What this menas is that you don't need to use the ~ trick - the path will automaticlaly be updated relative to the .master location.

    >>>>>> Also all of the CssClass or class attributes that are not found show in the Error list as errors and not warnings. Can you shed some light on this? Getting the application working is typically my first priority and not making sure the styles apply. (Plus if I'm using ~ in my css file references then I have to dig through quite a lot of errors to find the real culprit). Personally I believe these should be in the warning list and not the errors.

    I just sent mail to the team on this one. I agree they should be in the warnings and not the error list. Hopefully the feature team will agree too!

    Thanks,

    Scott

  • Hi Ram,

    >>>>> One thing that has not changes in VS in general is when you right click on the References to add a reference. This as usual takes time. Will there be a performance improvement on this in the RTM? Why isn't the team looking into putting this in a background thread so that when one right clicks you see the list of components right away?

    Unfortunately enumerating references the very first time in the IDE takes awhile. The reason is that it needs to enumerate a whole bunch of places on disk to retrieve this list, and the references can change outside of VS - which means VS can't really cache them.

    Sorry!

    Scott

  • Hi Ben,

    >>>>> Could you please talk about "ObjectDumper" in near future in some of your blogs? Is it still part of the Linq system or has it been removed?

    I just blogged about the LINQ to SQL debug visualizer here: http://weblogs.asp.net/scottgu/archive/2007/07/31/linq-to-sql-debug-visualizer.aspx

    Hope this helps,

    Scott

  • Hi Robert McKee,

    The Beta2 version of CSS (class=, cssclass=) validation isn't working for config-defined Themes (and StyleSheetThemes) just yet. You'll see that feature light up on the final release (I just saw it working today) and your errors show go away.

    Regarding your selection issue, I've contacted a developer on our team... we'll investigate and get back to you.

    Settings for update is definitely a possibility. We are, however, thinking about adding an incremental parser next version that may speed the whole thing up altogether to a point where you may not need the setting/switch. You'll have to stay tuned. =)

    HTH,
    Jeff

  • Hi Jeff,

    >>>>> I started a thread on the lack of CSS tools support with Themes over at forums.asp.net/.../1139670.aspx last week when beta2 came out. Not sure if it's monitored by anyone on the VS team, but everyone seems suprised that it doesn't work.

    I posted a reply to that forum. We can discuss it more there.

    Thanks,
    Jeff

  • Hi Paul C,

    >>>>>>> Hi Scott, quick question about Cider. The HTML designer has options to force it to open either in split, source, or design views. Will Cider support these same items? We have a lot of XAML forms that Cider cannot render and it becomes tiresome having to manually force the source view to become full screen. Is there a registry trick that can force this now? Thanks...

    Currently there isn't a way to persist this, but is a common request. The cider team is working on trying to fit the feature in the schedule though. They do, however, persist your splitview configuration, though. So you shouldn't need to change it everytime I believe.

    Hope this helps,

    Scott

  • The only other cool thing I would recommend is unless you have dual monitors, looking up code on the net and trying to code is still a problem. Could transparency be added in as a feature for VS to be able to view code and type, like the new intellisense?

    Thanks,

    Joseph

  • Hi - I totally love this feature. I found a bug though that is causing me problems.

    If I do a vertical split view and then go to my Solution Explorer and select a file like web.config or a .vb code file (something that doesn't have a split) it sometimes shows up with two inches missing from the right and the bottom. I can see the tab below it because it is a smaller tab that doesn't stretch the whole screen.

    I always autohide my tabs on either side of the screen (Sol. Explr., Server, Toolbox) as well as the tabs on the bottom (Error List, Output). The tab seems to fit the screen as if those were "pinned" even though they aren't. I can't duplicate it every time but it happens every once in a while and I the only way to get it to go back to normal is to close the IDE and restart it.

    --- Ken

  • Hi Ken,

    >>>>>>> If I do a vertical split view and then go to my Solution Explorer and select a file like web.config or a .vb code file (something that doesn't have a split) it sometimes shows up with two inches missing from the right and the bottom. I can see the tab below it because it is a smaller tab that doesn't stretch the whole screen. I always autohide my tabs on either side of the screen (Sol. Explr., Server, Toolbox) as well as the tabs on the bottom (Error List, Output). The tab seems to fit the screen as if those were "pinned" even though they aren't. I can't duplicate it every time but it happens every once in a while and I the only way to get it to go back to normal is to close the IDE and restart it.

    Can you send me an email (scottgu@microsoft.com) with more details of this issue? I'd love to hook you up with the designer team to make sure can repro it and get it fixed.

    Thanks,

    Scott

Comments have been disabled for this content.