As in the Windows 8 Developer Preview released in September, Blend is part of Visual Studio 11 Express for Windows 8. In addition, starting with the Visual Studio 11 Beta, Blend is now also included in Visual Studio 11 Ultimate, Premium and Professional. If you install any of these editions of Visual Studio 11 Beta on Windows 8, you will have the Blend and Visual Studio capabilities that this post describes.

• Windows 8 Consumer Preview Download
• Visual Studio 11 Beta Downloads (includes Blend, Visual Studio 11 Beta, Team Foundation Server 11 Beta, and .NET Framework 4.5 Beta)

 

• Windows 8 Consumer Preview Announcement (on the “Building Windows 8” blog)
• Getting Started with the Windows 8 Consumer Preview
• Visual Studio 11 Beta and .NET 4.5 Beta Available Now (on Soma’s blog)
• Visual Studio 11 Beta & .NET 4.5 Beta Announcement by Jason Zander
• Submit bugs to the Blend or Visual Studio Connect sites
• Ask questions on the Windows forums

At //Build, we introduced a preview of Blend for HTML, without support for the Windows 8 XAML platform. Many of you have asked about the whereabouts of Blend’s XAML support: We are very happy to announce that with the Visual Studio 11 Beta, we added a preview of the XAML authoring features for Windows 8, closely modeled after the familiar XAML toolset from Blend 4.

Please be aware that in the Visual Studio beta, the XAML authoring support for Windows 8 is not quite at the same level of stability and completeness yet as the HTML authoring support.

Introduced for the first time at the //Build Conference in September, Blend for HTML is a new flavor of Blend for designing Metro-style apps using HTML5 and CSS3. It is focused on app user experiences, not websites, and provides a uniquely rich, efficient and accurate visual authoring experience for Windows 8 on the design surface – even if all or part of your UI is generated dynamically in JavaScript.

Blend for XAML and Blend for HTML really are a single app – you just create the desired project type to get HTML or XAML authoring features.

Blend, or rather, a big part of its technology, now also ships inside of Visual Studio: We have refactored Blend to replace the original XAML designer (Cider) in VS. This change enables us to deliver more visual authoring and better platform support to you. A first instance of this is support for building native C++ applications for Windows 8 with a XAML-based user interface.

Apps for Windows 8

But let’s go back one step before diving into more details. The most important theme for Visual Studio 11 is building apps for Windows 8.

Windows 8 apps use a new style of UI (“Metro-style”) and can be written in “traditional” app languages such as C++, C# and VB, as well as in JavaScript. The Win 8 UI framework for apps written in the traditional languages is XAML, and for JavaScript it is, of course, the duo of HTML5 and CSS3.

The capabilities of the various options are broadly equivalent, so that in most cases your choice will depend on the skills and code you already have. For advanced scenarios and needs, it is also possible to create hybrid apps (for example, a JavaScript-driven HTML/CSS UI that talks to a C++ engine).

For C++ developers, there is also the option to write directly to the DirectX APIs (for example for games) but this is beyond the scope of this post. Finally, with the consumer preview of Windows 8 XAML apps can also host and layer DirectX in a variety of ways, so that high performance 3D rendering can be combined with the convenience and ease of XAML UI authoring.

What are we shipping? What about WPF and Silverlight?

The fundamental division of labor between Visual Studio and Blend has not changed from previous releases:

Visual Studio is a code-centric environment, and Blend complements this story with a design-centric toolset for visual authoring.

As of the Visual Studio 11 Beta, Blend is now available with most VS editions:

• The free Visual Studio Express for Windows 8 is focused exclusively on authoring for Windows 8. It contains the visual designer for Windows 8 XAML, and it also comes with Blend for Visual Studio, supporting rich visual authoring for both XAML and HTML apps for Windows 8.
• The Professional, Premium and Ultimate editions of Visual Studio 11 contain everything that VS Express for Windows 8 provides.

In addition, with the Visual Studio 11 Beta, support for WPF and Silverlight is included in Professional, Premium and Ultimate for the visual designer in Visual Studio, but not yet for Blend. SketchFlow is also not yet included.

If you want to start developing apps for Windows 8, all visual authoring features are available in the free Visual Studio Express version.

Note that authoring for Windows 8, for all editions of VS 11, is only available if you are running Visual Studio and Blend on Windows 8.

I was at //Build, what is new?

Since the //Build conference in September, we have made many changes and additions to the visual authoring tools. Here, we have just room for a short summary – there will be in-depth articles on both XAML and HTML authoring tools and all the new features and additions on this blog shortly.

New in the Visual Studio XAML Designer for Windows 8

• We updated the project and item templates, to provide you with a great starting point for Windows 8 apps that comply with the Windows 8 UX guidelines.
• We added a new Platform panel that allows you to preview your app in the different contexts it will likely encounter during its life time, such as view states (portrait, landscape, etc.) and Windows themes.
  

• We added style and template editing for controls.
• We improved the experience for editing various Windows 8 controls like the GridView, ListView, SemanticZoom, and ApplicationBar.
• We added better support for data binding scenarios with the new data binding dialog.
  

• We added support for custom types including project-to-project references, native references from managed code, and third-party Extension SDKs.
• For component creators, we added extensibility support for Windows 8 Metro XAML controls (including toolbox integration, property editor extensibility and design surface adorners).

New: Blend for Windows 8 XAML

The biggest news here is of course the XAML version of Blend for Windows 8. The preview of Blend for XAML delivers XAML authoring for C++, C# and VB. Yes, including C++. Blend for XAML and Blend for HTML are really the same tool – Blend chooses the right behavior based on the selected project type.

Blend for XAML for Windows 8 shares many features and panels with Blend 4: The same shell, workspaces, project panel and asset panel. The same support for authoring visual states and animations using the states and object tree / timeline panels. The same style and template editing features including the breadcrumb bar as well as the same rich property editor, the same resource panel, the same XAML markup editor.

Just as in VS, there are also a number of differences and additions (including the C++ support already mentioned):

• We added design time support for several Windows 8 controls, for example AppBar and SemanticZoom, as well as Grid- and ListView.  For Grid- and ListViews that display grouped data (for example, music albums grouped together under the artist’s first name), Blend now lets you style GroupStyles using Blend’s comprehensive styling and template editing features.
• We added the Platform panel. Using this panel, you can preview and author your app in different Win 8 view states, resolutions, themes, and so on.
  

• We improved the data binding dialog, now supporting relative sources (self and templated parent), as well as binding to a resource.
• We added the ability to run projects in the simulator, via an option in the platform panel. The simulator can emulate the impact of touch or device rotation even on devices that do not have such features, such as laptops.
• We improved the XAML grid adorners to make management of layout grids a lot more efficient and friendly. Amongst other improvements, row or column size can now be edited in place using on-object UI.
  

• We added the ability to arrange properties in the property inspector in multiple ways.
• Last but not least: We added a new, isolated architecture. For Windows 8 authoring, Blend is divided in two processes. This approach allows us to catch many more runtime problems that can result from Blend running user code on the design surface, and dramatically reduces memory pressure.

New in Blend for HTML

As Blend for HTML is a new flavor of Blend, it might be worth to give a few words of introduction: Blend for HTML is specifically created to enable the design of HTML/CSS based Metro-style apps for Windows 8. Blend for HTML is different than most traditional HTML editors: It is not a document editor focused on rich text layout on a page, but a tool to visually assemble application UI from HTML elements and JavaScript controls, which rich, dynamic layout and sophisticated CSS styling.

Blend provides a highly accurate design surface that runs the JavaScript code of your app. As a result, you get accurate rendering of your app UI even if some or all elements on the screen are created by JavaScript. And of course you can edit and diagnose CSS in these sorts of scenarios as well.

Blend for HTML also provides a fairly unique “interactive mode”, allowing you to interact with your app as you are designing it. You can use interactive mode for example to bring your app into any state you’d like to work on, switch back to edit mode and simply continue editing CSS and HTML.

Since the //Build conference, we have also done a lot of work in Blend for HTML. New features and additions include:

• The HTML project templates and controls often rely on HTML fragments being loaded into the current DOM via JavaScript. Blend for HTML now lets you edit such fragments in-place, right where they are used, no matter how deeply nested. Blend will find all related styles and resources automatically, and you get to edit in context, with the right layout, CSS and JavaScript in place. In many cases, you hardly need to even know that content has been dynamically loaded from a fragment. Pictured below is the art board overlay that indicates that selected content lives in a different document.
  

• We made many productivity and value editor improvements in the CSS property inspector and the HTML attributes panel. One example is the new margin editor with a lock icon.
  
• We expanded the control editing story for Windows 8 controls.
• For ListView, we greatly improved creation and editing of data templates. You can now design templates in-place, in the ListView, with live data, right on the design surface.
• Style rules can be re-ordered with drag and drop. A moveable style insert point makes it easier to create style rules in the right place in the first place.
  
• We added “Related Files”, a new panel in the markup editor. For any open HTML document in HTML scenarios, there are usually additional related files (such as CSS style sheets, script files or other HTML fragments) that are in fact edited by art board or property inspector actions. The related files panel makes if fast and easy to bring these related documents into view, without losing design surface context.

To Close…

The Visual Studio 11 Beta release comes with an exciting set of visual authoring tools for Windows 8 apps – in C++, C#, VB, JavaScript, and in XAML and HTML/CSS. We hope you will enjoy building apps for Windows 8, and we are very much looking forward to your feedback.

If you’d like to learn more about the visual XAML designer in Visual Studio, or the two flavors of Blend (XAML and HTML), please stay tuned – we will publish many more articles in the coming days, weeks, and months.