5 Killer Productivity Features in Visual Studio 2013

Regardless whether you do web, desktop or mobile development in the .NET space, you are using a version of Visual Studio of some sort. Hopefully you are using Visual Studio 2013 by now since it is backwards compatible with Visual Studio 2012 projects. I wanted to share several features that have benefited me day to day as I've been using the latest IDE from Microsoft. So what are you waiting for? Go ahead and download or open Visual Studio 2013 and give these features a shot!

1. Intellisense for DataBinding and Resources in XAML

This was one of the most requested features by XAML developers. They have already had intellisense for Properties, Methods, etc. for some time now, but this is truly a game changer. Lets look at a quick example. Create a new WPF application and give it the name TDNWPFApp to follow along with this example. Paste the following XAML into the MainWindow.xaml file.

<Window x:Class="TDNWPFApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:TDNWPFApp"
        Title="MainWindow" Height="350" Width="525">
    <Window.DataContext>
        <local:Attendees/>
    </Window.DataContext>
    <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center">
        <TextBlock FontSize="42" Text="{Binding Path=StudentName}" />
    </StackPanel>
</Window> 

In this example, we are creating a DataContext that maps to a class that we will create shortly called Attendees. We then access the Text property of the TextBlock and bind to a property set in our class. Go ahead and add a class called Attendees using the following code-snippet:

class Attendees
{
    public string StudentName { get; set; }
    public Attendees()
    {
        StudentName = "Michael Crump";
    }
}

In this class, we are adding one simple property called StudentName and giving it a value of "Michael Crump" inside the constructor. Taking a look now at the designer, you will see Intellisense working in real-time as shown in Figure 1. [caption id="attachment_14291" align="aligncenter" width="1023"] Figure 1: Databinding in action for XAML[/caption] Pay special attention to the "StudentName" being auto-discovered by the XAML editor.

2. Go To Definition Support in XAML

When developing any app, it can be very important to understand what the definition of a particular element is. Whether it is a local, system or resource reference from Extension SDKs, you can now hit F12 or right-click to Go to Definition as shown in Figure 2. [caption id="attachment_14301" align="aligncenter" width="1023"] Figure 2: Go To Definition Support in XAML on a Variety of Elements.[/caption] If you are tired of searching for where a specific resource was defined, it works there as well as shown in Figure 3. [caption id="attachment_14303" align="aligncenter" width="1061"] Figure 3: Go To Definition for Finding Resources.[/caption]

3. Debugging Windows Store Apps using JavaScript via the DOM Explorer

Something new for Store apps built using JavaScript is the ability to debug apps by using the DOM inspection tool provided inside Visual Studio 2013. By using interactive debugging, you can view and modify the rendered HTML and CSS without stopping and restarting the debugger. Figure 4 shows an example of a a new Windows Store App built using WinJS and exploring the p element. I could change the code here to say something else or modify the CSS and switch back to my app to see the changes. This is a powerful new feature in Visual Studio 2013 that everyone should take advantage of. You can access it by going to Debug->Options->DOM Explorer->Show All. [caption id="attachment_14311" align="aligncenter" width="1108"] Figure 4: Exploring the DOM inside a Windows Store App built using WinJS.[/caption] You'll also have access to the JavaScript Console.as shown in Figure 5. [caption id="attachment_14321" align="aligncenter" width="795"] Figure 5: The JavaScript Console.[/caption]

4. Setting Break Points on Code Deployed to Azure

This new addition to Visual Studio 2013 allows the ultimate in flexibility while debugging your app. Before starting you may want to make sure that you have the Azure SDK 2.4 installed. Let's take a look at how we can accomplish this. First, lets create an MVC application and change the authentication method to None and select "Host in the Cloud - Website" as shown in Figure 6.

Note that I'm already signed in with my Azure account.

[caption id="attachment_14331" align="aligncenter" width="770"] Figure 6: MVC Wizard in Visual Studio 2013[/caption] Next we need to configure the application by providing a Site Name and Region as shown in Figure 7: [caption id="attachment_14341" align="aligncenter" width="579"] Figure 7: Configure Azure WebSite Wizard[/caption] Switching over to the Solution Explorer, under Azure -> Website, we now have the ability to right click on the app that we just created and select, "Attach Debugger" as shown in Figure 8. [caption id="attachment_14351" align="aligncenter" width="423"] Figure 8: Attaching the Debugger to the Azure Deployed Site.[/caption] Let's set a break point on a line in our "About Page" and watch the magic happen as shown in Figure 9. [caption id="attachment_14361" align="aligncenter" width="1024"] Figure 9: The Debugger in Action.[/caption] Special thanks to my colleague, Jeff Fritz for passing along this awesome feature!

5. Rulers and Guides for Blend for Visual Studio 2013

Rulers and guides allows you to precisely place elements and create custom layouts for Windows Store (HTML and XAML), WPF and Windows Phone Apps. Besides the ability to create custom layouts, Microsoft has provided a set of guides that can be used out of the box without any modifications. They include:

• BasicPage
• FileOpenPicker
• GroupDetailPage
• GroupedItemsPage
• HubPage
• ItemsPage
• SearchResultsPage
• SettingsFlyout
• ShareTargetPage
• SplitPage

If we create a new Windows Store App and use the Hub Template, then we can quickly see this in action as shown in Figure 10. [caption id="attachment_14371" align="aligncenter" width="1300"] Figure 10 : Adding a Guide to our Windows Store App.[/caption] By using a predefined guide, I was able to verify that the Hub App matches the design guidelines that MS put in place and this application will look fantastic on all devices. If my app needs a custom design, then I can simply move the ruler to match my design and even save them from the same dialog that I loaded the predefined guides.

Bonus Tip: ALL CAPS is a Thing of the Past

This has been a controversial topic since Visual Studio 2012 came out. Basically, the menu bar was in all CAPS and it annoyed many developers. Microsoft released a registry hack for this, but included in Visual Studio 2013 Update 3, you can now toggle this in the editor by navigating to Tools->Options as shown in Figure 11. [caption id="attachment_14381" align="aligncenter" width="758"] Figure 11 : Upper Case can be toggled through the IDE now.[/caption]

Before

After

But wait... there's more!

I've only touched the tip of the iceberg with the features that I've outlined today. There are many more included in Visual Studio 2013 that you can take advantage of. I'd also suggest upgrading to Visual Studio 2013 Update 3 as soon as possible to learn about even more new features. Also, if you are looking to speed up your development time for Windows 8, Windows Phone 8 or even Windows Universal apps, then we have you covered from UI controls to our data storage solution for Windows Store and Windows Phone Apps.