During this video I used both the XAML Designer in VS and Blend, highlighting the similarities and differences for each product. Highlights include some tips and tricks for quickly creating the object hierarchy, laying out your scene, adding animations and transitions, and new tooling specific to Metro app controls and app design.

Joanna

You’ll find more information about using app bars on the Windows Developer Center:

• Design guidance: Commanding design for Metro style apps
• Quickstart: Adding an app bar with commands
• Guidelines and checklists for AppBars

Using Blend to add an app bar to an HTML app

To add an AppBar control in Blend, open the Assets panel and search for an AppBar by typing AppBar in the search field. You’ll notice the first result is the AppBar control, followed by different types of AppBar Commands.

There are multiple ways you can insert the AppBar control into your document:

• Double click the AppBar control and the AppBar will be inserted inside the currently
  highlighted element in the Live DOM.
• Drag and drop the AppBar control into the specific location you want to insert it in
  the Live DOM.
• Drag and drop the AppBar control into the specific location you want to insert
  it in the design surface.

After inserting the AppBar control you’ll notice it’s now visible in the design surface:

The options above are particularly helpful when you need to insert content into a specific markup location. In the AppBar control scenario, it is worth noting that the app bar always shows on top of regular content. That means that particular placement in the markup doesn’t affect how or where the app bar is displayed.

Changing the app bar placement

We just covered how to insert an AppBar control into your app. You may have noticed that the app bar was placed in the bottom of the app. What if you want to have a top app bar instead?

Luckily for us, the AppBar control makes it very easy to place it along the top or bottom of the apps. If we want to place an app bar at the top of an app, we simply need to modify its placement property to top. To do this, select the AppBar control, and go to the HTML Attributes panel to edit the placement property, located in the Control category.

Adding content to the app bar

At this point we can start adding content to the app bar. You’ll notice the AppBar control initially contains an AppBarCommand control of type button. If you want to add extra AppBarCommands to you app bar, you can do so by using any of the previously discussed gestures for inserting an AppBar control as they also apply to every other WinJS control.

You can modify the AppBarCommand properties by selecting the AppBarCommand control and heading to the HTML Attributes panel to edit the properties located in the Control category. If you select the AppBarCommand control, the Control category will show all the particular properties for the control selected and provide the ability to easily change the values.

Using Blend to create an AppBarCommand button

Now let’s assume we are creating a media application and we want to have an AppBarCommand button to turn on video captions. This button should have a label and an icon that resembles captions.

To create such button, let’s insert a new AppBar control and select its existing AppBarCommand control.  After selecting the button, head to the HTML Attributes panel and change the label property from “example” to “captions”. You’ll notice the change is automatically reflected in the design surface.

Now we only need to create the icon. If you are a talented designer and create your own icons, now it’s the time to add them to your project and type the relative URI of your icon in the icon’s property field (more about creating and inserting custom AppBarCommand icons will be discussed in a future post).

However, if you are anything like me you will probably want to leverage the handy WinJS resources. If that’s the case you can simply type “caption” in the icon property field to leverage one of over a 145 icons available in the WinJS library. After doing both of these actions we have created our desired AppBarCommand button!

Here’s the markup you should have if you followed along:

<div data-win-control="WinJS.UI.AppBar">
     <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{icon:'caption'},"> </button>
</div>

To see a list of the available icons in WinJS, you can visit Adam Kinney’s excellent blog post:  Windows 8 AppBarIcons enumerated and visualized.

Showing and hiding the app bar at design time

Finally, we need to have a way to preview our changes. In order to show and hide the app bar at design time, simply select the AppBar control in either the Live DOM or the design surface and right-click. This will open the context menu for the selected element. When you select an AppBar control you’ll notice an option to “Activate AppBar”.

Notice that since the AppBar is currently visible, a checkmark appears in front of the option. This context menu option allows you to activate and de-activate (hide) the AppBar while in design mode.

This quick tutorial simply aims to cover a few basic concepts of how to use Blend to design your metro style applications. To find specific guidelines for the AppBar you can visit the Windows Developer Section covering Guidelines and checklists for AppBars.

Let us know what you think about the features discussed above. If you have any feedback please let us know by either commenting below or e-mailing me directly at ruben.rios[at]microsoft.com.

Thanks,
Ruben Rios

1. Working with the Styles pane, CSS Properties panel, and the Applied Rules list
2. Adding a ListView control and associating it with some data
3. Defining an item template and modifying how it looks
4. Specifying a binding
5. Laying out content with the Grid element
6. Creating a CSS3 transition
7. Using interactive mode to style the checked state of my ListView
8. Showing how to use the Platform panel to design for devices
9. Designing for devices by using media queries and listening to JavaScript events

I hope to provide more screencasts in the future that target specific features in Blend, so if you have any requests for topics you would like to see shown, please feel free to post in the comments below.

Cheers,
Kirupa

Stay on your side!

This new architecture isolates the runtime components from the products’ infrastructure and user interface into two processes.  The runtime components, which may also include user code, as well as most of the Blend user interface for XAML projects, such as the Properties panel, are hosted in the designer process (XDesProc.exe) while the project system and the code/XAML editors live in the host process (blend.exe for Blend and devenv.exe for Visual Studio).

This architecture enables Blend and Visual Studio to provide a full-fidelity, WYSIWYG design surface for Metro style apps across VB, C# and C++. We use the runtime implementation of WinRT to build our design-time experience. Specifically, we create a design-time AppContainer package and manifest that is separate from the runtime version. While the manifest and package are design-time specific, the user code in the package is identical to the runtime code.  However, this means that anything running in this process must follow the same security model as required for an AppContainer. Since Blend and Visual Studio need full access to the file system, these parts of the product’s infrastructure and user interface remain in blend.exe and devenv.exe.

When good processes go bad

Running user code on the design surface is great because it enables a degree of fidelity that would otherwise be impossible to achieve.  However, errors in the user code can also affect the designer process in Blend and Visual Studio. For C# and VB projects exceptions can frequently be caught safely, however for C++ projects there are many cases where user code can cause an exception that is impossible for the designer process to catch. The good news is that an exception in the designer process will typically not affect blend.exe or devenv.exe. When a serious problem happens in the designer process, you will see something like the following on the design surface:

If user code is causing the exception, once you correct the issue and rebuild, you can click the link to reload the designer.

User code is not the only reason for the message shown above to appear. Bugs in our own product code and the communication between the two processes can also cause designer exceptions.  A good rule of thumb is that if a reload fixes things, it is likely a bug in the product.  Of course we expect to have stabilized the product for the final release but it would also be appreciated if you would tell us about the bug by entering it at http://connect.microsoft.com/blend so we don’t miss any important scenarios.

If a reload does not fix things, it is possible that your code is expecting to access some part of WinRT that is not available at design time (e.g. ICoreWindow). If that seems likely, try using the DesignMode.DesignModeEnabled property to bypass this section of your code at design time.

When the pressure becomes too great

There is a very important benefit of the new architecture for Blend with respect to memory utilization. In general, when a project includes custom components, the user assemblies are regenerated on build, if they have changed since the last build. With the Blend 4 architecture, the newly built assemblies would be loaded but the out of date, or stale, assemblies would stay in memory.

The Blend 4 architecture did not take advantage of either app domains or a separate process, there was no way to unload the previous versions in .NET and these stale assemblies would effectively accumulate, taking up more and more memory with each build. This could cause Blend to eventually run out of virtual address space, especially if the component assemblies in the project contained large resources such as images.

With the new isolated designer architecture, we have the flexibility to restart the designer process if the memory pressure becomes an issue, causing the stale assemblies to be discarded. These restarts are done in the background, without interrupting your workflow.

Performance, performance, performance

There are also cases where the runtime requires that we restart the designer. For example, we must restart the process for each build with C++ projects. This can cause some performance issues for rebuild scenarios in C++. If you have multiple projects open and make a change to a shared control, it may result in several designer processes restarting at the same time.

With the new architecture, there is often additional overhead to communicate between the two processes. The XAML representation lives in the host process and changes made to the XAML in the designer process, say in the Properties panel or the design surface, must then be synchronized across the process boundaries.  If you have noticed some areas where the performance is slower than previous versions, it might be related to scenarios similar to these. Rest assured, we are working tirelessly on optimizing the performance of many scenarios and you can expect to see this improving from where it currently is in the Visual Studio 11 Beta release.

Joanna Mason
Lead Program Manager
Blend

Getting started: Create a New WWA app

The first thing you need to do is launch Blend for Visual Studio 11 Beta and create a new HTML app.

1. Choose File > New Project and select HTML (Windows Metro Style) in the left pane.
2. In the right pane, select the default template Blank Application.
3. To follow along with this post, name your project WwaHybridProject.

Add a C# project to the solution

At this point you will see Blend open with a mostly blank art board, with just the text “Content goes here.”  We are now going to add the C# project to this solution.

1. Open the Projects pane in Blend and right-click your solution.  It will be labeled Solution: ‘WwaHybridProject’.
2. From the context menu, select Add New Project… The window that opens will look identical to the one that was used to create the WWA project.
3. Select XAML (Windows Metro style) in the left pane, and select Class Library in the right pane.  Make sure that the Language drop down is set to Visual C#.
4. Name this project CsharpLibrary.  The default view is now updated to be an empty C# class file.  Also, in the project pane, this new project will be displayed.

Add a C++ project to the solution

You will follow nearly the same steps to add a C++ project to this solution.

1. Open the Projects pane in Blend and right-click your solution.  It will be labeled Solution: ‘WwaHybridProject’.
2. From the context menu, select Add New Project… .
3. Select XAML (Windows Metro style) from the left hand pane.  This time, in the right hand pane, select WinRT Component DLL.  Make sure the Language drop down is set to Visual C++.
4. Name this project CPlusPlusLibrary.  Again, the default view will be updated to display the empty C++ class file, and the project pane will now display all three projects.

Add the C# and C++ References to your WWA app

Now it is time to add the project references so that the WWA application can use code from the C# and C++ libraries that were just created.  This is done in Visual Studio.

1. Right click your solution in the Projects pane and select Edit in Visual Studio from the context menu.  It will be labeled Solution: ‘WwaHybridProject’.
2. After Visual Studio finishes loading the project, make sure the “Solution Explorer” panel is visible and that the three projects inside the solution are all displayed.

Configure C# projects to generate WinMD files

By default, C++ projects automatically output the WinMD (Windows Meta Data) files that JavaScript needs for the project references.  C# projects, however, need to be configured to do this.

1. In Visual Studio’s Solution Explorer, right click the CsharpLibrary project and select Properties from the context menu.  This will bring up tabs to set the project’s properties.
2. On the Application tab, update the Output type of the project to WinMD File.
3. After doing this, select File > Save All.  Then you can close the CsharpLibrary Properties tab.

Set up project references

Even though the projects are in the same solution, they do not reference each other by default.  Now that C# is correctly outputting WinMD files, the project references can be added.

1. In Visual Studio’s Solution Explorer, right click the WwaHybridProject and select Add Reference… from the context menu.  Make sure you are selecting the project itself, not the overall solution.
2. The type of reference to be added is Solution, so select that from the tabs on the left.
3. In the middle pane both the C# and the C++ projects will now be displayed.  Check the box next to both projects in the first column and then click Ok to close the window.

4. After doing this, select File > Save All.  Then you can close Visual Studio.
5. Blend will prompt asking if the projects should be reloaded since they have been updated outside of Blend.  Select Yes for all of these prompts.
6. To make sure the projects linked up correctly, go to the Projects pane under the WwaHybridProject  and expand  References.   In this list, there should be a reference to both CSharpLibrary and CplusPlusLibrary.

Update the code

Next we will update the C#, C++, and JavaScript code.

Update the C# project

First, we will update the C# project.

1. The default name for the class that was created, Class1.cs is not very descriptive.  Right click that file in the Project pane and rename it to RedClass.cs.
2. Open this file by double-clicking it and update the class name to RedClass.
3. In addition to changing the class name, it is necessary to update the class as “sealed” so that it can be exported.  The final class declaration statement will look like this:

public sealed class RedClass

4. In order to make sure our reference is working, we need to add a method to the class that will be called by the JavaScript code.  This method will return a string, the color that one of the html elements will turn.  After updating the class with the method, save the file and close it.  Here is the method to add:

public string GetRed()
{
    return “red”;
}

Update the C++ project

The C++ default class name of WinRTComponent.cpp is just as non-descriptive as the C#’s default class name.

1. Rename both the header file and the cpp file in the C++ project to GreenClass.h and GreenClass.cpp respectively.
2. Open the GreenClass.cpp file and update all instances of WinRTComponent to GreenClass.
3. Then add the method to return “Green.”  Here is the method to add:

Platform::String^ GreenClass::GetGreen()
{
    return “green”;
}

4. After adding the method, we need to update the header file with the new method.  Don’t forget to update the references to “ WinRTComponent” to “GreenClass” as well.  The public declaration section of the file should now look like this:

public:
    GreenClass();
    Platform::String^ GetGreen();

Build the updated project

After adding all of this code to the C# and C++ projects, it’s best to make sure everything builds correctly.

1. Under the Project menu in Blend, select Build Project.
2. Before moving on from this point, make sure to resolve any build errors that are displayed.

Update the HTML and JavaScript to use the C# and C++ methods

The HTML and JavaScript code now need to be updated to use the methods that we have just created in the C# and C++ code.  First the HTML will be updated.

Update the HTML

1. Open the default.html file from the Projects pane by double clicking on it.
2. Then switch to either Split view or Code view so the markup of the page is visible.
3. Replace the existing content of the <body> tag with two <div> tags, assigning one the id top and the other the id bottom.
4. Then update the code so each <div> fills up half the screen.  The content of the <div> tags can also be changed to show which tag is being set by which code.  Here is the final result:

<body>
    <div id=”top” style=”height: 50%;”>This is a Red box set by C#.</div>
    <div id=”bottom” style=”height: 50%;”>This is Green box set by C++.</div>
</body>

Update the JavaScript

Almost done!  The JavaScript code needs to be finished so it calls the two projects.

1. In the Projects pane, expand the js folder under the WwaHybridProject and open default.js.  This code should be run as soon as the application loads, so it is put in the onactivated method.
2. The code to add is noted in inline comments below.  It first creates an instance of the CsharpLibrary project’s RedClass then uses a JavaScript document query to find the tag to update.  The background-color property of the tag’s style object is updated to the color “Red” which is returned from the C# code.  After that, an identical process is used for the C++ code.

app.onactivated = function (eventObject) {
    if (eventObject.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
        if (eventObject.detail.previousExecutionState
!==     Windows.ApplicationModel.Activation.ApplicationExecutionState.terminated) {
        // TODO: This application has been newly launched. Initialize
        // your application here.
        } else {
        // TODO: This application has been reactivated from suspension.
        // Restore application state here.
        }
        WinJS.UI.processAll();
 
 
//THIS IS THE CODE  YOU NEED TO ADD
        var top = new CsharpLibrary.RedClass();
        document.querySelector(“#top”).style.backgroundColor = top.getRed();
 
        var bottom = CplusPlusLibrary.GreenClass();
        document.querySelector(“#bottom”).style.backgroundColor = bottom.getGreen();
//END OF CODE YOU NEED TO ADD
 
    }
};

Test the project

It’s time to test the project.

1. Select Projects > Run Project.  If everything worked out as planned, the display will show two large rectangles, the top of which is red, and the bottom of which is green.  JavaScript code using C# and C++ code. Wow.

That’s it for this blog post.  In this blog was a walkthrough on how to create a WWA project that uses code from C# and C++.  This was obviously a very trivial example, but by following this example, many more interesting WWA projects can be created that leverage code from C# and C++.  Now go start writing some great WWA Windows 8 apps with native JavaScript code!

Steven Yackel
Software Developer in Test, Blend

Common app workflows

Not everyone builds apps the same way and our tools must provide the flexibility to support a variety of workflows. Here are a couple of examples of common workflows.

Design first

UX Designer/Developer produces a comp, prototype or starting application.

Code first

Developer provides a model which the UX Designer/Developer then uses to create the UX.

Design & Code

The same user is creating the application end-to-end, or the UX Designer and Developer work hand-in-hand throughout the project.

The right tools for the user and the task

In order to best support all app developers and designers and workflows we now provide XAML authoring support in both Blend and Visual Studio, providing the right tools in the environment each user wants to work.

Visual Studio provides a great development tool with some design features that domain/enterprise and entrepreneurial developers will feel most at home. It is a code-centric environment but still provides the ability to edit app elements visually where it makes sense.

For a design-centric experience—for interaction designers, RIA developers, and the elusive “hybrid”—Blend provides even richer support for visual authoring that allows fine tuning and greater control over the styling and animation of their apps.

Of course, some tasks that are simply core to creating a XAML app must be available in both products, as illustrated in the image below.

Feature Comparison

The following table shows how these tasks map to the tools offered in each product for this release.

For Blend we focused on providing a richer toolset around styling and animation through the States pane and the Timeline while only providing a more limited support for Code and XAML editing which is provided at full fidelity in Visual Studio.

This is just the first release of both products leveraging some shared designer components. We plan to take this base and evolve each product based on feedback and targeted at each products unique users, workflow, and tasks.

Joanna Mason
Lead Program Manager
Blend

• The expiration date has been extended to June 30, 2013.
• This release now comes with a go-live license that allows you to distribute the software that you create with this release to your customers, along with any components you might use from the Blend SDK for Silverlight 5. More information about this can be found in the updated End-user license agreement that comes with the product.
• We updated the Silverlight 5 SDK that is installed with Blend to the RTM version of Silverlight 5.

Before installing this release, please uninstall any previous version of Blend Preview for Silverlight 5, or Blend SDK Preview for Silverlight 5. You do not need to uninstall the Silverlight 5 runtime, Silverlight 5 SDK, or the Visual Studio tools for Silverlight 5.

You can download this release from the Microsoft Download Center: Microsoft Blend Preview for Silverlight 5.

Update: A few of you have reported issues where the updated Expression Blend Preview for Silverlight 5 shows the expiration dialog, even after uninstalling the older release and updating to this one. We have resolved this issue, and updated the download site. There are no additional fixes in the release, so if your version of Blend Preview for Silverlight 5 is already working fine, no additional action is necessary on your end.

Thanks,
The Blend Team

The two orientations are portrait and landscape:

The view states are:

You can also learn more about Supporting multiple views by reading the detailed document on the Windows Developer Center.

When you are building your apps, you are likely to be using Blend on a laptop or a monitor whose orientation is in Landscape. What you need is a way to design your application inside Blend while simulating the various views states and orientations at design-time.

Views inside the Platform Panel

To help you design applications that take advantage of view states and orientations, Blend enables you to select different preview views in the Platform panel.

The Views section contains four buttons, and these four buttons correspond to the view states and orientations that your application can find itself in.

From left to right, these buttons correspond to:

1. Full screen + Landscape
2. Fill
3. Snapped
4. Full screen + Portrait

When you click each button, your artboard is resized to match the expected size of your application when you run it.

For example, here is what your artboard looks like when you are in the Snapped view state:

Pressing each of the other buttons will not only resize your artboard into the appropriate dimension, your application inside Blend will react to this new view state just as it would in the simulator or on an actual device—for both HTML and XAML-based apps.

What Happens in HTML

In an HTML-based application, if you have any media queries that react to the views or orientations, the appropriate media queries will become active. If you have any JavaScript that subscribes to the events for orientation or view state changes, that JavaScript will also run. Any code you may have written to poll for the application’s current view or orientation will return the updated value as well.

What Happens in XAML

In a XAML-based application, any control that responds to the ViewStateChanged event will update on the artboard.  We will also update the width and height of the root control hosting your current page or UserControl to match what the values would be at runtime.  These changes will be made for any XAML document that has a Page as its root element.  If you would like to see the Device Chrome and be able to change views for UserControls and other elements, simply add d:ExtensionType=”Page”  as an attribute on the root element.

Let us know what you think about this feature. If you have any feedback on what you like / don’t like / etc., do let us know as well by either commenting below or e-mailing us directly at kirupac[at]microsoft.com and jferman[at]microsoft.com.

Cheers,

Kirupa Chinnathambi, Jeff Ferman

If you haven’t yet, you can download the Windows 8 Consumer Preview and the developer tools to get started building your own apps. While the Blend Beta supports creating both HTML-based and XAML-based apps, this post focuses on the tools for working with HTML/CSS/JavaScript.

When you start building your own Metro style apps with Blend using HTML, you’ll notice right away that Blend is no ordinary code editor. In fact, it’s not simply a code editor.  The HTML authoring features in Blend are designed to help professional web designers and developers become exceptionally productive while creating production quality code.

Blend combines the tools of the trade—design surface, code editor, and rich diagnostics tools—into a single authoring experience so there’s no need for round-tripping amongst a collection of tools.  The tools you need during the design/development cycle are at your fingertips.

The Blend design surface gives you an accurate representation of your running application (yes, Blend runs your JavaScript code on the design surface so that even dynamically generated content looks just right). The code editor keeps the relevant HTML and CSS in view as you work on the design surface, and you have an extensive set of panels that provide diagnostic tools and editing aids.  This combination of markup tools and visual design tools partners with Visual Studio 11 for heavy JavaScript coding and debugging to provide you with a complete toolbox to get started creating Metro style apps.

Working with HTML-based Apps on the Blend Design Surface

The design surface in Blend for HTML authoring is optimized to promote visual design directly on the artboard.  You can create new layouts directly on the design surface.  You can select elements and examine applied style, edit styles, and create new styles.  You can also view the elements in the Live DOM.

While you are authoring, you can work in split view, with your related HTML and CSS file editors open.  We’ve worked hard to ensure that visual editing gestures result in clean, semantic code.  Our goal is to make it as close to the kind of professional code you’d write yourself as possible.

Interactive Mode on the Blend Design Surface

JavaScript-based applications are interactive by design.  Pages and content are typically assembled at runtime and frequently have no static representation.  Blend provides you with Interactive Mode for projects that include JavaScript so you can interact directly with your app, and “pause” at a particular state so you can style it. This little gem makes styling the different states of your dynamic pages and JavaScript controls easy. Now, finally you can actually see what you are styling when you are working with JavaScript-generated content and controls. You don’t need to tweak your CSS, and then go check your work in your browser. You can just change your CSS and see what’s going on all at the same time in a single workspace.

Working with HTML-based Apps with Code Editor: Related Files

Another one of my favorite features is Related Files. When you are in split view (you have the code editor open, and the design surface open) you can see all of the files that are used by your Metro style app. So, as you look at your HTML mark-up in the code editor, you can also look at the CSS or JavaScript associated with that markup, and you can still view your app on the design surface.

As you move around the design surface interacting with elements, Blend keeps the related HTML and CSS files in sync so you can always view the code while you are engaged in visual editing.

Diagnostic and Productivity Tools

Blend also offers multiple ways to work with styles, from productivity to diagnostics.  You can examine which styles are already applied to an element with the Applied Styles list at the top of the CSS Properties panel.  You can also work with the Styles panel to create, and modify style rules.

The Platform panel supports authoring related to some of the concepts specific to Metro style apps.  For example, you can easily design for different app views and orientations, and device resolutions.

The Live DOM

In addition to the design surface, the Live DOM panel makes it easy to see the structure of your document and interact with it. You can click on an element in the DOM and the element is also selected on the design surface and in the code editor. Additionally, the associated rules, attributes, and properties are also shown in the Styles Panel, CSS Properties Panel, and HTML Attributes Panel.

Before You Begin: Key Concepts for Creating HTML-based Metro Style Apps

Before you get started, there are a few things that you should know about Metro Style Apps:

Web Apps. If you are used to creating Web sites –which are document-based and static – it’s time to check out the Metro style apps that you can build for the Windows 8 Consumer Preview.  Metro style apps are dynamic, data driven, and interactive. You can build them using the HTML and JavaScript that you already know and love.

CSS3. If you haven’t done it yet, check-out CSS3. Good Metro style apps take full advantage of all the new and powerful concepts that CSS3 has to offer like Grid, Flexbox, and, border radius, transforms, gradients, box-shadows, and transitions.

WinJS. Windows Metro style apps introduce a new library of Javascript controls. You can get familiar with them using the Quickstart: Adding WinJS controls and styles.

Windows Metro Style Apps user experience. Windows Metro style apps follow concrete user experience concepts. Check out the Windows Design Center for guidance and resources for creating great Metro style apps.  Check out the Windows Experience blog for more info about the platform experience.

So, check out the above resources, try out some of the great tutorials on the Dev Center for Metro style apps for building apps, and then check back here at http://www.blendinsider.com and start styling your Metro style app.

Heather

In this post I’ll give you an inside view into some of the implementation details and prioritization considerations that we employed so we could light up support for Windows 8 Metro style apps using XAML in Blend.

Comparing Blend support for Metro style apps to other platforms

There are a few features that you may have gotten used to creating when creating SL, WPF and Windows Phone apps in Blend that are not available when creating Metro style apps. Rest assured that our goal is to provide the same level of rich functionality and visual authoring capabilities for Metro style apps as you currently have for Windows Phone, Silverlight and WPF applications, we just have not had the time to get there with this first version of authoring support for Metro style apps.

Core authoring capabilities

For this release, we focused on core authoring capabilities that are shared with the Visual Studio XAML designer including object creation, layout, property editing and rich design times for controls specific to Metro style apps. We then prioritized enabling authoring visual states and creating animations for your applications using Blend. We made sure that Visual Studio provided the richest support for editing your XAML and code-behind files and are providing only minimal support for using a text-based editor to edit these files in Blend for Metro style apps.

Blend SDK

We are not including support for the features available in the Blend SDK for this release. The Blend SDK includes features like Behaviors, font embedding, PathListBox and Shapes. We understand that Behaviors are an important part of your workflow for creating applications in Blend and we are already working on adapting our interactivity features so that they are available from both native and managed projects, in a pure WinRT fashion.

Additional Features: Sample Data and Illustrator Import

A couple of other areas that you may have used previously are creating Sample Data using the Data Pane and Illustrator import. While we won’t have support for either of these features in this release, you can use a previous release of Blend side by side with Blend for Windows 8 to generate sample data or to create XAML for your vector assets from Illustrator. There will be a follow up post detailing the differences and the minor tweaks you will need to make the files compatible with your Metro style app.

Prototyping

For this release we focused on getting the tools for building production-quality Metro style apps in your hands. Of course a very important part of building a great user experience is the ability to rapidly prototype and iterate on the design of an application using SketchFlow. While we are not providing a version of SketchFlow specific to Metro style apps, our commitment to iterative design and rapid prototyping is unchanged.

In Closing

Hopefully I’ve been able to provide you with a little more context about what is currently supported and reassured you of the Blend team’s commitment to visual authoring and enabling you to create great user experiences.

I am personally very excited to see how all the talented application designers out there will take the Metro style guidelines and maximize a touch-first interface to create useful, usable and visually compelling apps for Windows 8 using Blend!

Joanna Mason

Lead Program Manager

Blend