Today at BUILD we announced the availability of Visual Studio 2013 and Blend that brings forward significant advances for authoring XAML-based Windows Store apps for Windows 8.1. This post describes some of the new experiences we are excited to bring to you. In follow up posts, we will describe each of these experiences in greater detail – so stay tuned.

Everything we’ll tell you about today is only available for Windows Store apps with Visual Studio 2013. To try these exciting new capabilities, you’ll need to either re-target your existing Windows 8 app (retargeting guidance here), or create a new one.

XAML Editor in Visual Studio

We received a lot of feedback from you on features that would be useful when developing Windows Store XAML apps. Based on this feedback we have added a lot of new features to the XAML editor in Visual Studio 2013 Preview.

  • IntelliSense for data binding shows you the possible completions for the DataContext when available.
  • InstelliSense for resources shows you all the resources that are applicable in a given scope, and that match the property type you are trying to assign the resource to.
  • Go to definition (F12) for resources allows you to quickly jump to the document that contains the resource no matter where it defined in your project.
  • Go to definition (F12) for types, properties and bindings allows you to quickly navigate to the declaration of the type, property or binding in your Model/ViewModel.
  • Commenting markup supports nesting of comments within the selected range in the text editor.
  • Renaming a start tag also renames the matching end tag.
  • Support for adding XAML code snippets.

Rulers and Dynamic Guides

We believe that what differentiates a good app from a great app is the amount of attention to details. To help you precisely layout and align controls in Windows Store XAML apps that cross layout hierarchies, we are introducing a guide mechanism that allows you to create visual snapping points at design time. We are also introducing a ruler mechanism that allows you to precisely measure the size of controls and their constraints.

What makes the rulers and guides mechanism unique in Blend for Visual Studio is the fact that they are designed to be fully dynamic in nature. This is important because Windows Store apps should be designed to work under a number of different form factor settings, and hence require constructs that are not tied to any one particular static layout. You can snap a guide to either the left edge of the app or the right edge of the app, and the guides dynamically adjust based on Display Size you have specified when previewing the app on the design surface.

While not a part of this Preview release, we also hope to add a number preset guide configurations that adhere to standard Windows design guidelines, and should make it really easily for you to create layouts without needing to constantly reference the design guideline documents.

Rules & Dynamic guides

Style and template editing

Blend for Visual Studio 2013 Preview makes it really easy for you to edit styles, templates and resources that live in other documents. In prior versions of Blend, editing such a style/template would result in complete loss of your editing context as Blend would switch the active document to the one defining the style /template – something that we have heard loud and clear from you as not being a productive experience Hence we now allow for full “in-place” editing of the style/template right within the document that consumes it, with full undo/redo support across document boundaries. To illustrate this, the screenshot below shows the experience of editing a DataTemplate that is defined in App.xaml, from within GroupedItemsPage.xaml.

Style and template editing

Smarter visual snapping engine

Most standard Windows Store app XAML controls have their default look-n-feel specified in a way that the makes layout bounds are not the same as the visual bounds (because of the presence of visuals in the ControlTemplate required for indicating keyboard focus), and are off by a few pixels causing alignment issues when you are trying to quickly layout control on the design surface To address this issue, the snapping engine in the design surfaces of Visual Studio and Blend has been re-designed to allow you to create precisely aligned controls that snap perfectly to the visual bounds of the controls instead of the layout bounds. We have also added support for baseline alignment of controls that have textual content like Buttons and TextBlocks.

Smarter visual snapping engine

New controls

Windows 8.1 brings a large number of new controls for the XAML developer: Hub, CommandBar/AppBarButton, DatePicker, TimePicker and SettingsFlyout. Visual Studio and Blend make it really easy to create and edit these controls visually. The following is a screenshot of the design experience for the new CommandBar control that shows how easy it is now to create and edit the AppBarButton control in Blend.

You can select the AppBarButton in the Objects and Timeline panel:

New controls: select the AppBarButton in the Objects and Timeline panel

Modify the properties in the Properties Inspector:

New controls: Modify the properties in the Properties Inspector

In real-time, you’ll see your changes reflected on our artboard:

New controls: In real-time you'll see your changes reflected on our artboard

Device panel updates

The Device panel in Visual Studio and Blend has been updated to support a number of new Windows 8.1 functionality like support for new display sizes (example: 7” 1080p), application snapping to various edges and minimum width specification of apps. In addition, the design surface also allows you to arbitrarily resize your app to various sizes in order to get an accurate visual preview of how the app would look like when it is running as shown in the screenshot below. These features allow you to make visual changes to your apps using your preferred mechanism (for example, the State pane and VisualStateManager) at design time.

Device panel updates

Updated project templates

The project templates for building XAML apps have been simplified and updated to adhere to the updated Windows design guidelines like adding support for dynamically resizable apps. In addition, we have also added a brand new project template for building an app that uses the Hub navigation pattern as shown below.

Updated Project Templates

Performance and reliability of the designer

Visual Studio 2013 Preview brings significant improvements to the performance and reliability of the XAML designer in a variety of scenarios. Based on the feedback we heard from you via a variety of channels like Connect and Twitter, the two big ticket items that we have focused on improving the experience for in this release are the time taken to load the designer and time required to have Intellisense available in the XAML editor. We’ve also made a number of targeted fixes around various other scenarios like editing large XAML files, time to bring up data binding dialog, property inspector responsiveness, etc.

We are certainly not done, and will continue to make improvements till we release, but the following is a sampling of scenarios where you can see the improvements we have made in this Preview over Visual Studio 2012 Update 3.

Scenario

Visual Studio 2012 Update 3

Visual Studio 2013 Preview

Percentage Improvement

Designer load time - Large Windows Store project

15.92 seconds 6.11 seconds 61.6%

XAML Intellisense Availability – Large Windows Store project

13.5 seconds 2.55 seconds 81.1%

‘Create Data Binding’ dialog for a 120 element XAML file

6.7 seconds Instantaneous N/A

And finally, a note about Behaviors for Windows Store apps

We love Behaviors and are hard at work to add support for Windows Store apps written in C#, C++ and VB. Blend for Visual Studio 2013 will support Behaviors, they just were not complete enough to be a part of this Preview release. Stay tuned for an update on these shortly!

Feedback!

We are really interested in knowing more about what you think about these experiences and what you would like to see in Visual Studio and Blend going forward – please let us know via UserVoice or Connect!

Thanks,
The XAML Tools team