10个Visual Studio 2012使用示例图解

   <h2>1. Its grey (and other UX changes)</h2>    <p>Let’s just get this out there right now; the new Visual Studio UX is polarising. Actually, polarising would suggest there are two different views of it. The reality is there is a strong chorus of “Ugh” at the moment. You see it’s all about <a href="/misc/goto?guid=4958346761178674466">Metro</a> these days and that means VS 2012 now looks like this when running on Windows 8:</p>    <p><img border="0" alt="'The " grey"="" vs="" 11="" ui'"="" src="https://simg.open-open.com/show/8dadd90220b5c2945b06512e15022cf9.png" width="620" height="443" /></p>    <p>Just in case you need a little reminder of how things used to look, here’s VS 2010 on Win 7:</p>    <p><img border="0" alt="'The " colourful"="" vs="" 2010'"="" src="https://simg.open-open.com/show/1b911773adeecf7a3d36cddfb384934e.png" width="620" height="443" /></p>    <p>There are three things I want to call out in VS 2012 as they’re the three which are repeatedly brought up:</p>    <ol>     <li>The greyness. </li>     <li>The capitals on panel titles. </li>     <li>The colons on the panels. <br /> </li>    </ol>    <p>You can get a better idea of those last two items here:</p>    <p align="center"><img border="0" alt="A VS 11 panel with caps and colon seperators" src="https://simg.open-open.com/show/75b69ae8ab5b71c34069012ce75c8424.png" width="281" height="154" /></p>    <p>The theory is that all those nasty colours get a bit distracting when what you really want to be doing is focussing on code, not file icons or buttons on menus. Many people countered that with “Yeah, but I minimise all my panels anyway”.</p>    <p>So what do we make of all this? Well, the feedback I’ve seen and heard honestly hasn’t been positive. Sure, it’s Metro and Metro is the new black but it almost seems to be Metro in name more than anything else – certainly it doesn’t jump out and remind me of the Metro I know from Windows Mobile 7 or Windows 8.</p>    <p>One very apt comment I heard in one of the sessions was that Metro is great for, say, a mobile app but an IDE is a very different paradigm. Does that mean Metro won’t work in VS? I don’t know, but certainly it’s a very different context.</p>    <p>Love it or hate it, the thing is that this is a first beta and things will almost inevitably change to some degree. I suspect the release version won’t be <em>too</em> far off the preview version, but clearly some refinement will still happen. This is evident in a few places where colour is still evident:</p>    <p align="center"><img border="0" alt="Some remaining colour in VS 11" src="https://simg.open-open.com/show/31da6fc99c16481d88dd2593ff888744.png" width="376" height="165" /></p>    <p>And:</p>    <p align="center"><img border="0" alt="Some more remaining colour in VS 11" src="https://simg.open-open.com/show/05672e36f592a0755f4cc8991727b717.png" width="376" height="135" /></p>    <p>As a closing thought on UX, the only other thing I’d say is “use it”. Give it a go and see if it really does impact the development experience and if that experience is negative, then come back and complain about it :)</p>    <h2>2. Quick search</h2>    <p>This one is actually very cool and <em>should</em> offer a major productivity advantage. Up in the top right corner of the IDE we now have a little “Quick Launch” text box which you can shortcut to with CTRL-Q. I look at this as the Visual Studio equivalent of the Windows key in Windows 7; hit it, type whatever you want then it will find it for you. For example:</p>    <p align="center"><img border="0" alt="The VS 11 quick search" src="https://simg.open-open.com/show/179713ce4efb16e76b1ec208b587827e.png" width="537" height="311" /></p>    <p>In this case, VS has found everything from menu items to configuration options to open documents. There are also <a href="/misc/goto?guid=4958346761997453459">other categorisations it searches for</a> and I think this is going to be one of those super useful features that you soon wonder how you lived without, just like that aforementioned Windows 7 feature is for me now.</p>    <h2>3. Backward solution compatibility</h2>    <p>When I started rolling out Visual Studio 2010 in my workplace, one of the greatest hurdles to adoption was the solution file format. Once you opened a .sln created with an earlier version of the IDE you had no choice but to upgrade the solution version. Doing this then meant no going back (without some nasty hacks) so in short, either everyone who might possibly work on the solution upgraded to the new IDE or nobody did. And then if you worked across multiple project versions you needed to run multiple versions of the IDE. Nasty.</p>    <p>Here’s how Jason Zander explains it in <a href="/misc/goto?guid=4958346762816865841">his introduction of VS 11</a>:</p>    <blockquote>     <p>The compatibility improvements in Visual Studio 11 will make it easier to work with your existing Visual Studio assets, without doing any “upgrades” of project files. In the majority of cases, you can use Visual Studio 11 and also continue collaborating on projects with your teammates using Visual Studio 2010 SP1.</p>    </blockquote>    <p>To demonstrate this new friendly behaviour, I created a VS 2010 web application then opened it up in VS 2012. Here’s the difference between the two solution files:</p>    <p><img border="0" alt="Difference between VS 2010 and VS 11 solution file formats" src="https://simg.open-open.com/show/71e6e77b5587f7bb9a5294fa09a08331.png" width="620" height="405" /></p>    <p>This will cause some minor differentiation in the logos:</p>    <p align="center"><img border="0" alt="The VS 11 and VS 2010 solution file logos side by side" src="https://simg.open-open.com/show/1e08a6d6d2b2e5bd8f23adee5c479b32.png" width="215" height="109" /></p>    <p>But the important bit is that after opening the solution in VS 2012 you can still jump back into VS 2010 and things work just fine:</p>    <p align="center"><img border="0" alt="A solution edited in VS 11 opened up in VS 2010" src="https://simg.open-open.com/show/5aaa500db6145e775f7f5d86ee46e508.png" width="310" height="314" /></p>    <p>Look at all that colour! The only caveat in all of this is that you still need to be on VS 2010 – this isn’t going to help projects stuck on earlier versions of the IDE.</p>    <p>For me personally, this is going to make rolling our VS 2012 <em>significantly</em> easier as it can be done more on a needs basis rather than just because you want to open a solution someone with the newer IDE worked on.</p>    <h2>4. Smarter Solution Explorer</h2>    <p>There’s a bunch of new stuff the Solution Explorer can do that we either didn’t have before or was nested over in other windows such as the Class View. What’s neat about this revision is that the Solution Explorer becomes a real hub for all sorts of activities:</p>    <p align="center"><img border="0" alt="The VS 11 solution explorer" src="https://simg.open-open.com/show/f802abc68a11803313203a9cf4d4e9b7.png" width="450" height="498" /></p>    <p>The search feature also makes an appearance so finding those pesky files nested down under five folders becomes a pretty easy task (note it also searches for class members – not just file names):</p>    <p align="center"><img border="0" alt="Matching a search term in the solution explorer" src="https://simg.open-open.com/show/0e4190803a8918530d1a37766527be6d.png" width="450" height="255" /></p>    <h2>5. Find and replace goes lightweight</h2>    <p>First a quick reminder of what the good old CTRL-F would do for us in VS 2010:</p>    <p align="center"><img border="0" alt="Find and replace in VS 2010" src="https://simg.open-open.com/show/054c3b8817640b6901fcffc308ca2396.png" width="290" height="350" /></p>    <p>A great big dedicated panel with lots of options. Compare that now to how VS 2012 approaches things:</p>    <p align="center"><img border="0" alt="Find in VS 11" src="https://simg.open-open.com/show/2dde0d67f9dae8fb9ca0d2989ff06b95.png" width="326" height="132" /></p>    <p>Ok, that’s a rather streamlined approach! In case you’re wondering where all that missing stuff has gone, it’s still there:</p>    <p align="center"><img border="0" alt="Options on the VS 11 search" src="https://simg.open-open.com/show/80792e16b283d6b0b1cbfc698c3d2c3f.png" width="323" height="205" /></p>    <p>You’ll notice that the control is also resizable so if you’ve got a fetish for long searches you can keep it all visible in the text box. And if you really long for the find and replace of old, you can CTRL-SHIFT-F back into it:</p>    <p align="center"><img border="0" alt="The classic find and replace dialogue in VS 11" src="https://simg.open-open.com/show/7420e730ee45c9a5f89aad78a5c999d2.png" width="266" height="305" /></p>    <p align="left">Does all this feel just a little bit familiar? It did to me, because my VS 2010 already behaved in this fashion courtesy of the <a href="/misc/goto?guid=4958346763631416908">Productivity Power Tools</a> so it’s interesting to see that Microsoft has just gone ahead and rolled this into the IDE as a first class citizen.</p>    <p align="left">One more thing; if you’re like me and have trouble wrapping your head around regexes, there’s more help at hand than we had before:</p>    <p align="center"><img border="0" alt="Regex search help in VS 11" src="https://simg.open-open.com/show/0f9277fb94b499d4ede243b2cdc913ce.png" width="620" height="562" /></p>    <h2>6. Windows 8 ready</h2>    <p>There should be no surprises here given the timing, but VS 2012 now comes with a bunch of Metro project templates ready for Windows 8:</p>    <p><img border="0" alt="Windows 8 Metro solution templates" src="https://simg.open-open.com/show/d7989a9777e024f1dfdcec6f5711721f.png" width="620" height="351" /></p>    <p>One important thing to note though is that you’re going to have big problems building a Metro app if you’re not running Windows 8. Developers on Windows 7 or – gasp! – earlier versions of the OS are going to need to get with the times first.</p>    <h2>7. CSS editing gets much cooler</h2>    <p>There are a number of enhancements in the CSS editing space but here are a few of my favourites. Firstly, there’s a built in colour-picker which pops up in any context where it might make life a little easier for you:</p>    <p align="center"><img border="0" alt="The CSS colour picker" src="https://simg.open-open.com/show/83fdab863ed6eb5af86981134c3a8409.png" width="484" height="309" /></p>    <p align="center">The other neat little feature is the ability to pre-fill browser specific schema prefixes on certain CSS attributes. For example, begin making a “border-radius” entry, hit “tab-tab” and watch the magic:</p>    <p align="center"><a href="/misc/goto?guid=4958346764408734491"><img alt="Pre-filling browser specific schema prefixes" src="https://simg.open-open.com/show/791f8936f3276349254fbb8ac26eecf6.gif" width="238" height="157" /></a></p>    <p>Here’s another new one: what’s wrong with the following CSS?</p>    <p align="center"><img border="0" alt="Hierarchically indented CSS" src="https://simg.open-open.com/show/ac4dd7e6c98e23b0ad1866c4c89e818a.png" width="463" height="382" /></p>    <p>Answer: nothing. The indentation you’re seeing is hierarchical; the tag with the ID “login” may have an anchor tag which may then have a “username” class. It looks a little odd at first but I suspect it will become advantageous in terms of helping you properly structure your CSS in a logical fashion.</p>    <p>These are little enhancements, but they contribute to the overall increased productivity theme we see in each release of the IDE.</p>    <h2>8. Image previews</h2>    <p>From the “small but handy” file, say hello to image previews:</p>    <p align="center"><img border="0" alt="Image preview 1" src="https://simg.open-open.com/show/c701e68587daca1f6704cf93fcf3dbc9.png" width="156" height="140" /><img border="0" alt="Image preview 2" src="https://simg.open-open.com/show/ba1a5899970dcb3846e26cb480f49d70.png" width="156" height="138" /></p>    <p>There’s not much to say here beyond what you observe above; hover the mouse over an image and a little thumbnail pops up. Saves you accidentally selecting the wrong file at times and avoids having to actually open the entire file one by one. Quickly flicking through images is now dead easy.</p>    <h2>9. Choosing a browser to run the app in is <em>finally</em> easy</h2>    <p>I don’t know what it was about earlier versions of the IDE, but no matter how many times I set my default browser to IE (right click file –> browse with), it would always revert back to my OS default (Chrome) when I pulled the project up at another date. The fact that Hanselman had enough material on this for <a href="/misc/goto?guid=4958346765224327060">a lengthy blog post</a> is evidence that this hasn’t exactly been a smooth experience in the past.</p>    <p>VS 2012: problem solved. Right up there next to the run button is the ability to choose the browser you want to fire up:</p>    <p align="center"><img border="0" alt="Running the solution with a selected=" src="https://simg.open-open.com/show/4b9a4c4c5d6e30b7c1c9d3105c272922.png" width="243" height="172" browser?="" selected?="" /></p>    <p>This is a <em>significantly</em> better implementation as not only do you always have the browser F5 is going to give you right in front of you, but it’s dead easy to change it. That old “Browse with…” option was painful because it was usually only after the solution built and fired up the wrong browser that you realised there was a problem. And then try getting the “Browse with…” dialogue up on an MVC app; can’t do it on the controller, can’t do it on the view so you end up creating a temporary HTML file just to access the dialogue! Maybe there’s a better way I’m not aware of, but fortunately it doesn’t matter anymore anyway.</p>    <h2>10. Page Inspector (it rocks!)</h2>    <p>One very, very cool new feature is the page inspector. Once you move away from the one file per rendered page paradigm and get into things like master pages, user controls, layout pages and partial views, things start getting very messy when you want to work out where rendered content in the browser is actually coming from.</p>    <p>Enter the <a href="/misc/goto?guid=4958346766028740704">Page Inspector</a>. Let’s just take a look at it then I’ll run through the highlights. Firstly, you can run it up directly from what is usually your run button:</p>    <p align="center"><img border="0" alt="Running the solution with the Page Inspector" src="https://simg.open-open.com/show/6edf9260687d3242a04c2ac5d3e2a454.png" width="233" height="176" /></p>    <p>Which then gives you the site running within the IDE plus a couple of new windows (click to enlarge):</p>    <p><a href="/misc/goto?guid=4958346766821002988"><img border="0" alt="Page Inspector running in the IDE" src="https://simg.open-open.com/show/9a9dff82edb1b3df6f08afb878bf216d.png" width="620" height="309" /></a></p>    <p>What’s happening here is that the site is running in the top left panel and I’ve selected part of the heading. We’re then seeing this selection in the bottom left panel like you’re probably familiar with in the IE9 developer tools. Next to it is the CSS that has been applied.</p>    <p>The real magic though is the panel to the right. Here you can see the actual file containing the selected text, in this case it was “Index.cshtml”. Regardless of the file the text was contained in, Page Inspector will find it and highlight it in the source.</p>    <p>But wait – there’s more; you can now <em>change</em> content in that right hand panel and VS 2012 will allow you to refresh the Page Inspector view and see those changes immediately reflected in the page:</p>    <p><img border="0" alt="Notification of a change to a file in Page Inspector" src="https://simg.open-open.com/show/70e3cd650f81e5fa8254bf1c8732c19b.png" width="620" height="71" /></p>    <p>Unlike using the IE9 developer tools or a product like Firebug, this is actually a means of actively evolving the code – these are “sticky” changes which are saved to the source file and persist beyond this instance of Page Inspector. If this all sounds a bit hard to visualise, check out the <a href="/misc/goto?guid=4958346767619896242">Channel 9 video</a> of Page Inspector in action. Very, very cool.</p>    <h2>Summary</h2>    <p>Firstly, a little piece of <a href="/misc/goto?guid=4958346762816865841">good news from Jason Zander</a> if VS 2012 is looking appealing to you:</p>    <blockquote>     <p>Visual Studio 11 Beta meets our “Go Live” quality bar for pre-release software. Therefore we are recommending it for use in production, and supporting it as “Go Live” release.</p>    </blockquote>    <p><br /> Of course you can still work with your .NET 4.0 and earlier projects with VS 2012 so using the new IDE is no way needs to drag your apps into the new version of the framework. Based on my experience of using VS 2012 on Windows 8 in a VM it certainly seemed just as stable as 2010 on Windows 7. Having said, I don’t think I’ll be taking any risks with my work machine just yet.</p>    <p>So overall feelings? Other than the grey, it’s continued incremental improvements across a wide range of areas. Actually I’m not saying the grey <em>isn’t </em>an improvement, it’s just something I’m yet to fully adapt to. Like the previous couple of versions, all of these little improvements add up to a smoother, more productivity experience rather than one massive bang from a killer feature (although Page Inspector might get close to that for some). Positive steps forward, I reckon.<br /> <br /> 转自：http://dotnet.dzone.com/articles/10-illustrated-examples-visual-0</p>