Editor’s note: The following post was written by Visual C# MVP Alvin Ashcraft
Developers have been building great user experiences with Blend since Expression Blend v1 was released in April 2007. With the release of Visual Studio 2012, Expression Blend became Blend for Visual Studio. Microsoft is now launching another release of the tool, Blend for Visual Studio 2013. Let’s take a tour of what’s new in this new Blend release.
The icon continues to evolve, and the new icon echoes its tighter relationship with the Visual Studio IDE.
Blend’s icon now sports the same angular infinity design as Visual Studio. The only difference is that Blend keeps its signature blue color while Visual Studio continues to use the new purple color adopted with the release of Visual Studio 2012 a year ago.
Guides and Rulers
Probably the most powerful new feature in Blend is the Guides system. The idea allowing developers and designers to snap visual elements to custom defined guides is not new. What makes Blend’s guides so useful for app developers is that they are dynamic. They can be either edge of the design surface and will adjust their position based on the size of the device currently targeted in the visual designer. Guides can be added while creating screens for any type of application in Blend, including WPF, Windows Phone and Windows Store apps (XAML and HTML).
Adding a new guide to the design surface is accomplished by dragging the cursor from one of the rulers onto the page at the desired snap point. The location of the guide can be adjusted by either dragging it to a new location or by selecting it and changing the Point value near the top of the guide line. This is also where the guide can be tethered to either the left or right edge (or top/bottom for horizontal guides). By holding down <ALT> and dragging from an existing guide, a new guide is created that will adjust its position in alternate device sizes in relation to the original guide’s location instead of the edge of the page.
In the View menu, a Manage Guides submenu can be found. This contains menu items to:
- Save the current guides so they can be used on other screens instead of being created manually each time.
- Load a saved set of guides to the current page.
- Clear all the guides from the current page.
This screen illustrates the Guides concepts:
- The Load, Save and Clear menu items.
- Adjusting the location of the guide by entering the Point value.
- Guides placed on a page to aid in aligning visual elements.
The following collections of guides are available to be used while developing Windows Store apps. They can be found under <Visual Studio Install Folder>\Blend\Guides
Windows Store\ and have a file extension of .guides.
By using these guides, developers can feel more confident that the apps they submit to the Store will comply with the Windows style guidelines. Take a look at the Hub Page, one of the new templates included with Blend for Visual Studio 2013, with the HubPage.guides collection loaded.
The Device panel for Windows Store app development in Blend for Visual Studio 2013 has been updated to reflect the change in how apps can be resized and snapped in Windows 8.1.
Support for smaller display sizes has been added to the Display dropdown. Developers can now design for 7” Windows devices.
The Edge item allows for previewing how a page will look snapped to different edges. The available options are now Both, Left, Right or None. A Minimum Width can also be set to each page on the Device panel. Options for previewing the current page with different color options has been split into two settings, Theme and High Contrast.
Behaviors and Actions
XAML veterans will be happy to know that Behaviors are finally available for Windows Store apps. Those who are unfamiliar with using behaviors in other flavors of XAML, can get a quick overview on their use in WPF from MSDN here:
Behaviors and Actions can be added to an element on a page by selecting one from the Behaviors section of the Assets panel. Ten have been included for use with Windows Store apps.
Additional behaviors can be downloaded from the Visual Studio Samples Gallery, and developers can write their own custom behaviors. There are some greatonlineresources to help developers get started writing behaviors for their apps.
Templates and Controls
There is a new project template and several new item templates added to Blend for Visual Studio 2013. The Hub App project template is available for both XAML and HTML projects.
This new project type gets developers started with the new Hub control on its main page and also adds group details and item details pages. This new project template, and all of the existing templates have been updated to support dynamic resizing on different devices and other new guidelines for Windows 8.1 Store apps.
New item templates include the Hub Page, which is the centerpiece of the Hub App template just described, as well as a new Search Result page and SettingsFlyout. The SettingsFlyout item template is a host for the new SettingsFlyout control, which has a header with a back button, title text and a close button and a details section which contains a StackPanel with a couple of TextBlocks in its default state. This details section is where developers add all of the controls to update their app’s user settings.
Other new controls in Blend for Windows Store apps are:
- Hub – This new control solves the problem of pulling data into an app from different data sources. Each HubSection can have its own DataTemplate and data source.
- DatePicker / TimePicker – Two controls that were missing from the default tool set when building Windows 8 apps are now available for building Windows Store apps.
- CommandBar / AppBarButton – New controls that provide a really simple way to build out the buttons on your app’s Command Bar.
Styles and templates that live in other files can now be edited directly from the page where they are being used. Developers no longer lose the context in which they were working to jump back and forth, make changes, and check to see how their page(s) are affected by each change.
Sample Data can now be configured for Windows Store apps in design mode. The data can be set up by hand or generated from existing classes in the current project or in another referenced assembly. The data itself is saved as JSON. Developers can set the design-time data context on the Data Context pane of the Data panel.
All UIElement objects have a new CompositeMode property which is used for apps with mixed XAML/DirectX UIs.
HTML Windows Store apps have most of the same updates plus an added bonus feature. There is now an Animation panel, which provides a timeline control for creating CSS animations. The panel works just as it does for XAML animations and creates very clean CSS.
Of course the Blend team continues to squash UI bugs and improve the performance and reliability of the visual designers. I have not run any kind of metrics on it, but it feels like the number of times I needed to reload the designer has reduced greatly from previous versions of Blend.
If you are using an edition of Visual Studio 2013 that includes Blend, start using it today and reduce the time and effort it takes to get your apps into the Windows Store.
About the author
Alvin is a Software Architect living near Philadelphia, PA. He has dedicated his 18 year career to building software with C#, Visual Studio, WPF, ASP.NET MVC, Windows Phone, Entity Framework and SQL Server. He has been awarded as a Microsoft MVP five times, once for Software Architecture in 2009 and the four subsequent years for Visual C#. You can read his daily links for .NET developers on his blog, Morning Dew, at alvinashcraft.com or follow him on Twitter (@alvinashcraft). He currently works for Genzeon Corporation, developing clinical health care software. He has previously been employed with several large software companies including Allscripts and Oracle. There he helped create software solutions for financial, business and health care organizations using Microsoft platforms and solutions.