First Look

On the first day of the Microsoft Build 2013 conference, the preview of Visual Studio 2013 was announced. The preview contains a new version of Blend for Visual Studio. This preview has some new features and some “old” features that didn’t work in the previous version, mainly when building Windows Store apps.

The first thing noticeable after installing the preview is the new icon. Opening Blend will show you the splash screen which looks pretty much the same as the 2012 version. So does the welcome screen. A thing to note is that while all platforms are supported, when running Blend for Visual Studio 2013 Preview on Windows 8.0, you can’t build create Store apps. Most of the new features described below won’t be available either.

Because most of the new features are only available when building Windows Store apps, I’ll focus on that.

Guides and Rulers

I’ve created a new Windows Store application, for Windows 8.1 which is the only option at the moment. One of the big surprises in this release is that the rulers are added to the designer. If you have ever worked with a tool like Photoshop, this might look familiar. Dragging from one of the rulers onto the design area will draw a line to which you can snap to when working on your app. The width, height and margins of the selected element are shown on the rulers too.

Guides can also be added by dragging from an existing guide while keeping the ALT-key pressed.

Guides can be aligned left and right at a specified distance from the side. You can specify the distance by hovering above a guide and clicking on the small number that appears. Clicking the dropdown indicator will show a context menu in which you can change the alignment or delete the guide itself.

Another way of removing guides is by dragging them outside the designer.

Another great feature with the guides is the ability to save and load an entire set of guidelines. A wide and narrow set are delivered with Blend. By going to the View menu and the option Manage Guides, you can load and save them. The two sets of guides that came with Blend can be found in:

“C:\Program Files (x86)\Microsoft Visual Studio 12.0\Blend\Guides\Windows Store”

Too bad the guides and rulers are only available when building Windows Store apps. But looking at the folder might suggest guides will be supported on the other platforms too. I sure hope so.

Sample Data

Yeah! One of the things I was missing the most when building Windows Store apps using Blend for Visual Studio 2012 was the Sample Data feature. Generating data on the fly when designing an application is something I find very useful. Just let Blend do all the heavy lifting of creating bindings and templates for data. Until now, it wasn’t available for Store apps.

Sample data can be created by hand or be generated from an existing class. Properties can be made of various types and contain data that might represent a real world application.

Below the sample data window is a part that shows the Data Context. If a data context is available, you use this drag and drop data bindings. This was already possible in previous versions of Blend, but now you can add a Design-time DataContext too. You could do this by editing the XAML by hand, but now there’s a wizard that helps you with that. Using this wizard, you can create a DataContext based on DesignData, a DesignInstance or a Static Resource. And select classes or XAML files that you might need with that. Various other options relating to design-time data can be selected also.

Device

Because the behavior of snapping apps has changed somewhat in Windows 8.1, the Device panel of Blend for Visual Studio 2013 has lost some options and a few have moved. The whole thing is divided in groups now. The Display dropdown stayed the same, but the orientation and view state is split in two. You can set the designer to portrait or landscape view only. Where you could select snapped or filled in the previous version you now have four different options based on the edges, namely: Both, Left, Right and middle. These aren’t set by visual states anymore but you’ll have to design your application in a more responsive way. This basically means you have to build your application so it will support a whole range of widths. You can read more details about this in the UX/UI design guide for Windows Store apps for 8.1.

The theme combo is also split in two, separating in High Contrast and Theme. The only contains Default, Light and Dark. Selecting these might show a warning if you haven’t specified the selected theme in your application.

A change in Windows 8.1 is the default width of the snapped view. In Windows 8, the snapped view was 320px, period. In Windows 8.1 the default width of the snapped view is 500px, but can be changed to 320px if you like.

The options in the Design Time group did not change.

Other New Features

Another of my personal “new” features is the support for Behaviors and Actions in Windows Store apps. Although I haven’t seen it working at the time I’m writing this, the Behaviors sections has returned to Assets panel. I could not find the Microsoft.Expression.Interactions and System.Windows.Interactivity assemblies (which contain behaviors on other platforms) for Windows Store apps. (update 6/28: It is confirmed that behaviors will be available in the release version.)

There’s a new project template for Windows Store apps, the Hub App. The template is available for both XAML and HTML. The templates helps you get started with the new Hub control. The Hub control helps you with the design of content rich application, for example the Bing Travel app.

A few new item templates are added too: the Hub page, the Search Result page and the Settings Flyout. These three templates will definitely help you get going with some of the news Windows 8.1 features. If you want to know more about these controls and a couple of other new ones, have a look on this page.

Most image editing tools support blending modes on layers to create composite effects using various layers. There’s some support for that added to Windows Store apps too. All UIElements have a new property: CompositeMode. This enables a new way of blending elements together, some kind of see-through with changing colors. I could see some uses for that.

Templates can be edited in context now. This means that, even if you have a template in a separate dictionary, it can be edited right where you are using it. Including the DataContext.

What About HTML?

Most features talked about earlier also apply on Windows Store apps using HTML. A neat new feature is a the timeline for creating CSS animations. You can create CSS key frame animation and configure the whole thing in an animation panel, just like XAML. You can configure things like iterations and easing. And I must say I’m pretty impressed with the clean CSS it produces.

CodeProject

What’s new in Blend for Visual Studio 2013