What’s New in Visual Studio for C++ Developers ---

Overview In this lab, you will take a quick look at some of what’s new in Visual Studio 2013 for C++ developers.

This includes the ability to create and better debug Windows 8.1 apps, IDE improvements that make

your life as a developer easier and more productive, new REST libraries that make connecting to services

much easier, and even some extensions that bring rename refactoring support and the ability to quickly

create a project file from a PDB to Visual Studio 2013.

This will not be a comprehensive look at all new features, but you will be able to follow provided links to

learn more when appropriate.

Objectives In this hands-on lab, you will learn how to do the following:

- Create a Windows Store app using C++ and the new Hub App project template

- Debug asynchronous tasks

- Utilize IDE improvements

- Get started adding push notifications to a Windows Store app

- Use the Visual C++ Refactoring extension to rename a function

- Use the PbdProject for Visual Studio 2013 extension to create a project file from a PDB file

Prerequisites The following are required to complete this hands-on lab:

- Windows 8.1

- Microsoft Visual Studio 2013 (with Update 2 RC applied)

Note: You must be an Administrator on the machine where you run this lab in order to install a

developer license.

Notes Estimated time to complete this lab: 30 minutes.

Note: You can log into the virtual machine with user name “User” and password “P2ssw0rd”.

Note: This lab may make references to code and other assets that are needed to complete the exercises.

You can find these assets on the desktop in a folder named TechEd 2014. Within that folder, you will

find additional folders that match the name of the lab you are working on.

Exercise 1: What’s New in Visual Studio for C++ Developers In this exercise, you will take a look at a number of new and improved features and capabilities provided

with Visual Studio 2013.

Task 1: Create a new Windows Store app using C++ In this task, you will create a new Windows Store app based on the new Hub App (XAML) project

template.

1. Open Visual Studio 2013.

2. Select File | New | Project.

3. Under Templates | Visual C++ | Store Apps | Windows Apps category and select the Hub App

(Windows) template.

Note: The Hub App template is new in Visual Studio 2013.

4. Enter HubApp in the Name field and then click the OK button to create the solution.

5. If you do not have a developer license for Windows 8.1 installed yet, you will be prompted to agree

to the terms and then install a license. Click the “I Agree” button if you agree with the terms. You

may also need to click Yes in the User Account Control dialog box that appears.

Note: Developer licenses are needed for each machine that you develop or test on, and are free to

obtain and use

6. If you are installing a developer license, you may also need to sign in with your Microsoft account.

Go ahead and sign in to finish the developer license installation.

7. After installing a developer license using a Microsoft account, you will be given 30 days before it

expires. Click the Close button.

8. Double-click on HubPage.xaml to load it with the XAML designer.

9. The Hub App template makes use of the new Hub control provided with Windows 8.1.

Additional XAML controls introduced with Windows 8.1 include:

- AppBar controls

- CommandBar

- DatePicker

- Flyout

- Hyperlink

- MenuFlyout

- SettingsFlyout

- TimePicker

Updates to XAML controls include:

- FlipView updates

- Headers for ComboBox, DatePicker, TimePicker, Slider, Edit controls

- Placeholder text

10. In the XAML pane for HubPage.xaml, scroll down and take note that the hub app that you created

does indeed use the new Hub control and defines a number of hub sections on the page to get

started with.

Note: The hub template uses updated Microsoft design principles that help you create great looking

apps with improved usability and additional flexibility.

11. In the Quick Launch bar at the top-right corner of Visual Studio, search for “document outline” to

locate the Document Outline window, and then click on the shortcut link to open it.

12. In the Document Outline window, right-click on the BottomAppBar node and select Add

CommandBar.

13. The CommandBar control, new with Windows 8.1, lets you easily create properly designed app bars

by providing automatic layout of commands and automatic resizing of the app bar when the app size

changes.

14. Expand the new CommandBar node in the Document Outline window to expose the nodes for

PrimaryCommands and SecondaryCommands.

15. Right-click on PrimaryCommands node and select Add AppBarButton. This adds a new button to

the app bar in the bottom-right corner of the design surface.

16. To see how easy it is to create a great looking app bar, replace the contents of the <CommandBar>

control with the following XAML.

XAML <AppBarToggleButton Icon="Shuffle" Label="Shuffle" /> <AppBarToggleButton Icon="RepeatAll" Label="Repeat" /> <AppBarSeparator/> <AppBarButton Icon="Back" Label="Back" /> <AppBarButton Icon="Stop" Label="Stop" /> <AppBarButton Icon="Play" Label="Play" /> <AppBarButton Icon="Forward" Label="Forward" /> <CommandBar.SecondaryCommands> <AppBarButton Icon="Like" Label="Like" /> <AppBarButton Icon="Dislike" Label="Dislike" /> </CommandBar.SecondaryCommands>

Note: If you need to do more custom work in the app bar beyond using the provided AppBarButton,

AppBarToggleButton, and AppBarSeparator, you will need to use an AppBar control instead of the

CommandBar.

17. Right-click on the Icon property for the first AppBarToggleButton and then select Go To Definition.

This is new in Visual Studio 2013.

18. Since the property is defined in metadata, the Object Browser will open to show the definition.

19. Close the Object Browser window.

Note: Additional additions and improvements to the XAML code editor include IntelliSense for data

binding expressions and resources, code snippets, and better commenting support. To learn more,

please see this article from the Visual Studio blog.

Note: Additional additions and improvements to the XAML designer include rulers and dynamic

guides (to help better position controls) and improved overall performance. To learn more, please

see this article from the Visual Studio blog.

Task 2: Debugging Asynchronous Tasks In this task, you will learn about improvements made to the Call Stack and Tasks windows that provide

additional debugging information when working with asynchronous tasks.

1. Open HubPage.xaml.cpp (right-click somewhere within the designer and select View Code).

2. Add the following code to the beginning of the HubPage constructor. This creates a few

asynchronous tasks that you will use to learn about the new asynchronous debugging features

found in Visual Studio 2013.

Note: The updates to Visual Studio 2013 described in this task depend upon features first introduced

in Windows 8.1.

Note: Asynchronous tasks in C++ are implemented in the Parallel Patterns Library, which is included

by default for Windows Store applications created using the project templates that come with Visual

Studio 2013 (ppltasks.h is included in the pch.h file).

C++ create_task([] { std::array<task<void>, 3> tasks = { create_task([] { unsigned i = 0; while (i < 100) { i++; } }), create_task([] { unsigned i = 0; while (i < UINT_MAX) { i++; } }), create_task([] { while (true); }) }; });

3. Set a breakpoint on the line that creates the first worker task, as shown in the screenshot below.

Note: Prior to Visual Studio 2013 and Windows 8.1, developers were unable to use the Call Stack

window to determine how an application got to the current location when debugging asynchronous

code. Since tasks are created on new threads, the Call Stack window did not contain information

about the call stack that existed when it was scheduled and, therefore, had no information about

the code sequence leading up to its execution.

4. With Visual Studio 2013 and Windows 8.1, developers will now see some additional stack frames

added when debugging asynchronous code that aids in understanding how the program reached a

location inside an asynchronous function. The additional frame(s) represent the call stack when the

task was first created and are added below the task’s actual call stack, with an annotated frame

named [Async Call].

5. Press F5 to start debugging the application.

Note: You may be prompted to build the project whenever it is out of date. For the remainder of this

lab, go ahead and click Yes each time you are prompted, or alternatively select the checkbox labeled

“Do not show this dialog again” and then click Yes.

6. The debugger should break right at the beginning of the lambda function that represents the

asynchronous task.

7. Take a closer look at the Call Stack window (Debug | Windows | Call Stack) and note that in

addition to the current call stack, you can see the annotated frame [Async Call] and the frame from

when the task was first created.

Note: If you were to select the stack frame just below the [Async Call], you would be taken to the

location in code, but you will not have access to local variables and other stack information. The

main benefit to the additional frame is traceability.

8. Another new debugging feature enabled for C++ developers in Visual Studio 2013 is Just My Code. If

you are familiar with any .NET Framework languages, you should already know that this debugging

feature steps over system, framework, and other non-user calls and collapses those calls in the call

stack windows.

9. To see what the Call Stack window would look like without the Just My Code feature enabled, right-

click somewhere within the Call Stack window and select the Show External Code option.

10. As you can see, this presents more noise than you would typically need to see during a typical

debugging session, and certainly makes it more difficult to locate the frames representing your

code.

11. Right-click within the Call Stack window and de-select the option to Show External Code.

Note: You can enable or disable the global Just My Code setting for Visual Studio (for all projects in

all languages) in the Debugging / General node of the Options window.

Note: C++ Just My Code is different than .NET Framework and JavaScript Just My Code because the

stepping behavior is independent of the call stack behavior. For more information, please see this

MSDN documentation.

12. Now take a look at the Tasks window (Debug | Windows | Tasks). The Tasks window resembles the

Threads window, except that it shows information about task_handle objects instead of each

thread. Like threads, tasks represent asynchronous operations that can run concurrently; however,

multiple tasks may run on the same thread.

Note: The Tasks window was formerly named the Parallel Tasks window when it was first introduced

in Visual Studio 2010, and was renamed for Visual Studio 2013. In addition to the rename, it has

been upgraded to aid Windows developers in understanding the state of all tasks and promises (in

the case of JavaScript) running in their application.

13. You can use the Tasks window to help debug hung and excessively long tasks when you work with

the concurrency runtime and task groups, parallel algorithms, asynchronous agents, and lightweight

tasks. For more information about tasks in native code, please see the MSDN documentation on the

Concurrency Runtime.

14. Note the new fields that show current Status, Start Time (relative to the start app), and Duration.

You should see that the currently selected task is in the Active state, and perhaps another task is in

the Scheduled state (completed tasks are not displayed).

15. If you hover over the Location column it will show a tooltip view of the call stack (which is

navigable).

16. If you would also like to see which thread has been assigned to each active task, you can right-click

within the Tasks window and select the Columns | Thread Assignment option.

17. In the case that you have a lot of Tasks in the application, you can also take advantage of grouping.

Right-click within the Tasks window and select the Group By | Status option.

18. Press Shift+F5 to stop debugging the application.

19. Visual Studio 2013 also introduces the Performance and Diagnostics Hub, which brings together

new and existing tools into one location, and makes it easier to see what tools are available for the

current project based on current language, application type, or platform. Future updates will also be

surface here, increasing the discoverability for testers and developers. To take a quick look at the

hub, select Debug | Performance and Diagnostics.

20. The startup project for the solution is automatically selected as the Analysis Target, and the tools

currently available are shown.

21. Select the Show All Tools link to view all of the tools included in the hub.

22. Note that all tools are now shown, although some are currently disabled.

23. Some of the tools shown here are not new in Visual Studio 2012 and 2013, but have simply been

moved into the hub. These include the Performance Wizard and JavaScript Function Timing tools.

New tools since Visual Studio 2012 include CPU Sampling, JavaScript Memory, and HTML UI

Responsiveness (some were introduced in product updates). New tools since Visual Studio 2013

include XAML UI Responsiveness and Energy Consumption.

Note: If you are interested in learning more about the new performance and diagnostic tools, please

take a look at this blog post by Dan Taylor. If you would like to dig in even more, you can also walk

through the New Visual Studio 2013 Diagnostic Tools hands-on-lab.

Task 3: Quick Look at IDE Improvements In this task, you will take a quick look at some of the miscellaneous improvements made in the IDE.

1. Open the IDE_Demo.sln solution file found in the lab’s Source\IDE_Demo folder.

2. Open App.xaml.cpp from the IDE_Demo project.

3. It is now possible for C++ developers to add event handlers using the same “+=” helper that .NET

developers have enjoyed for years. In the App constructor, add a Resuming event handler just

underneath the existing Suspending handler. To do this, type “Resuming +=” and then press the Tab

key twice to automatically stub out a handler and wire it up to the event.

Note: You need to wait until the project is fully opened and processed by Visual Studio before this

will work. Wait until the blue status bar near the bottom of Visual Studio shows “Ready”.

4. You will automatically be taken to the OnResuming stub method, where you would then provide an

implementation. For the purposes of this lab, we will leave the stub in place as-is.

5. It is now easier to fix up code formatting for C++ based on your preferences. Take a look at the

Helper class (towards the bottom of App.xaml.cpp) and note that it places opening braces on the

same line as the type and function definitions.

6. Assuming that the developer or team prefers to have open braces on a new line, you will now use

the IDE to specify your formatting preferences and then use that to re-format code on demand. In

the Quick Launch window in the top-right corner of Visual Studio, enter “new lines” and then select

the option related to new line formatting for C/C++.

7. In the Options window, modify the “Position of open braces for types”, “Position of open braces

for functions”, and “Position of open braces for control blocks” options to “Move to a new line”

and then click OK.

Note: The Options window is now re-sizeable.

8. Highlight all lines of the Helper class (towards the bottom of App.xaml.cpp) and then select Edit |

Advanced | Format Selection.

9. Moving lines of code around is now easier to do. Scroll to the top of App.xaml.cpp and place the

cursor on the line from the App constructor where the Resuming event handler is setup.

10. Move the line up above the Suspending event handler by pressing Alt+Up a few times.

11. In addition to Go To Definition, developers can now take a peek at the definition using the Peek

Definition feature, without the need to open a new code editor tab. Right-click on the call to the

InitializeComponent function and then select the Peek Definition option (or press Alt+F12).

12. Press Escape to close the peek view.

13. One more IDE improvement that makes navigating source code easier is the enhanced scrollbar. To

enable the enhanced scroll bar, right-click on the current scrollbar from a code editor window and

select Scroll Bar Options.

14. In the Options window for Scroll Bars, select the option to “Use map mode for vertical scroll bar”

and the option to use the Medium source overview, and then click OK.

15. The larger scroll bar using map mode provides an at-a-glance view of the code structure, unsaved

changes, breakpoints, and so on.

Task 4: Adding Push Notifications In this task, you will learn about how easy it is to add push notifications to your Windows Store app in

Visual Studio 2013. Visual Studio 2013 makes it easier to update your app tiles using mobile services,

send push notifications to your Windows Store apps, and access Azure mobile services backend

capabilities through integrated VS tools and a new C++ library for Azure mobile services.

1. Open the XamlSpiro.sln solution file found in the lab’s Source\XamlSpiro folder.

2. The XamlSpiro Windows Store app is a sample that shows one way to combine the use of DirectX

and XAML. In addition, it has integrated the use of Windows Azure Mobile Services and the

Windows Push Notification service to add a toast notification on app startup and each time the user

makes a selection and submits a string to the service.

3. Although the work involved in setting up a service and wiring up push notifications has already been

performed ahead of time, go ahead and select Project | Add Push Notification to view the new

wizard that is new to Visual Studio 2013.

4. The first screen of the Add Push Notification wizard describes the tasks that can be walked through

using this new wizard. This wizard makes it much easier to complete some of the tedious legwork

and plumbing code that was previously necessary.

5. In case it is tough to read the text in the screenshot of the wizard start screen above, it states that

the following tasks will be accomplished by completing this wizard:

- Your app will be associated with the Windows Store to acquire a push notification channel

URI.

- Code will be added to your project for sending the push notification channel URI to your

Windows Azure Mobile Service.

- Your Windows Azure Mobile Service will be modified to enable it to push notifications to

your app through the Windows Notification Service.

- To enable support for Live Connect sign-on, the redirect domain URI value of your Windows

Azure Mobile Service will be transferred to the Live Connect Developer Center.

6. Click the Cancel button.

7. Open the pushtechreadyserviceMobileService.cpp file from the XamlSpiro project (in

services\mobile services\pushtechreadyservice folder). This code returns a client instance for the

mobile service, which in turn utilizes C++ Azure Mobile SDK that is shipped with Visual Studio 2013.

Note: A working mobile service URI and application key are already filled in for you.

8. Now open the pushtechreadyservicePush.cpp file from the XamlSpiro project. This code is

responsible for setting up the push notification channel through which the app receives notifications

from the Windows Push Notification Service (WNS). It is also responsible for sending a test string

selected by the user to the mobile service, which in turn will send out a push notification to the app

with a message that includes the test string.

9. Press F5 to start the application.

10. The application will show a message asking you to load some photos.

11. When the application first loads, the push notification channel is setup and within a few seconds you

should see a toast notification appear in the top-right corner of the screen that says “Welcome!”

12. Right-click to open the bottom app bar and then click the Load Images button.

13. Navigate to the lab’s Source\XamlSpiro\Pictures folder and then click the Select All link.

14. Click the Open button to use the selected pictures.

15. Once the pictures have been opened, you should see one of the selected images shown in the app.

All of the selected images are being rendered in a 3D wheel using DirectX. Hold the mouse over the

left or right side of the screen to show the controls that can be used for animating the wheel

rotation, and then click to spin.

16. After the wheel stop spinning, one of the images should be selected (mostly centered and visible on

the screen). Right-click to show the bottom app bar once again, and then click the Accept button.

17. The text that is shown in the selected image will be sent to the mobile service, which in turn will

push out a notification to the app.

18. Close the app by pressing Alt+F4. To return to the Desktop, either press Win+D or select the

Desktop tile on the Start screen.

19. The C++ Azure Mobile SDK provides a set of REST APIs that are used to access and change table data

and retrieve authenticated login information. These REST APIs are implemented using the C++ REST

SDK, which provides an asynchronous, cross-platform way to send HTTP requests and handle

responses, work with JSON, and asynchronously work with streams and stream buffers. The latest

version of the C++ REST SDK, which also goes by the codename “Casablanca”, can be found on

CodePlex at casablanca.codeplex.com, or by searching for the latest NuGet package.

20. If you are interested in learning more about creating and working with mobile services, adding push

notifications, and authentication for C++ apps, please see this documentation on MSDN.

Task 5: Visual C++ Rename Refactoring In this task, you will install the Visual C++ Refactoring extension from the Visual Studio Gallery and then

perform a simple rename refactoring operation.

1. Download and install the Visual C++ Refactoring extension from the Visual Studio Gallery. Open

Tools->Extensions and Updates and search online for the extension.

Note: this extension was created by the Visual C++ IDE team from Microsoft.

2. After successfully installing the extension, you might need to restart Visual Studio.

2.3. oOpen the RenameDemo.sln solution file found in the lab’s Source\RenameDemo folder.

3.4. Open the MyClass.cpp source file and note that it has a function named DoSomething. This is not a

very descriptive name. Right-click on the function name and then select Refactor | Rename.

Formatted: Font: Bold

4.5. In the C++ Rename dialog box, enter a new name of ShowMessage and then click OK.

5.6. Once you are satisfied with the preview of changes, click Apply.

6.7. Select Build | Rebuild Solution to make sure that the project builds as expected.

Task 6: PdbProject for Visual Studio 2013 In this task, you will install the PdbProject for Visual Studio 2013 extension from the Visual Studio

Gallery and then walk through the process of constructing a project file from a .pdb file plus source

code.

1. Download and install the PdbProject for Visual Studio 2013 extension from the Visual Studio Gallery.

Note: this extension was created by the Visual C++ IDE team from Microsoft and can currently only

handle native sources.

2. Again, you might be asked to restart Visual Studio.

2.3. Many C++ projects aren’t built using Visual Studio and vcxproj files, but rather by using a legacy build

tool. In this case, the only way to utilize features such as tag browsing, IntelliSense, and object

browsing is to create a new project from existing code and then manually add the source.

3.4. Launch a new instance of Visual Studio 2013.

4.5. Select File | Open | Project/Solution.

5.6. Navigate to the lab’s Source\Legacy folder and change the extension dropdown to search for just

PDB Project files (*.pdb). Click the Open button.

6.7. After selecting the PDB file, the PDB Conversion Wizard window will open. This window is used to

map source referenced found in the PDB file back to source code.

7.8. Notice that Visual Studio SDK paths are automatically resolved, as they match the local machine

paths exactly.

8.9. There are also a number of unresolved paths for source files as the machine you are working on

does not have the same paths used when the executable was originally built. In this case, we need

to do a manual folder mapping to resolve. Select the ellipses button in the Browse column for the

original folder that includes the legacy folder at the end of the path.

9.10. In the PDB Generator dialog box, navigate to the lab’s Source\Repository folder and click Select

Folder.

10.11. With the manual folder mapping in place, the original filenames from the selected PDB file

should automatically be resolved by name to their selected location.

11.12. Click the Finish button.

12.13. In the Save As dialog box, click Save to save the project file.

13.14. The new project should now be opened in Visual Studio.

14.15. Although it will not build as-is, you can now navigate the source and use some of the IDE

features like IntelliSense. Open Lecacy.cpp and then hold the mouse over the call to Function().

15.16. To continue learning about all of the improvements and updates made in 2013 for C++

developers, please see this MSDN article. This article highlights all of the compiler and language

improvements, breaking changes to be aware of, library enhancements, C++ application

performance improvements, diagnostics enhancements, and more.