To learn more about the improvements we’ve made, please check out our earlier post. If you have any questions or comments, feel free to contact me by commenting below or posting on our forums.

Regards,
Hari

WPF, Silverlight and SketchFlow support in Blend

Blend for Visual Studio now support WPF, Silverlight and SketchFlow projects in the same version of Blend (support for these was previously available only as a standalone Preview release of Blend). With this CTP release, Blend now supports developing Windows Store, Windows Phone, WPF and Silverlight apps without needing to have multiple versions of Blend on the same machine. The table below highlights the various platforms that are now supported in Blend for Visual Studio 2012:

Illustrator and Photoshop import support for Windows Store XAML apps

Blend now allows you to import Adobe Illustrator and Photoshop files into Windows Store XAML apps, using the same workflows that you have been familiar with in WPF, Silverlight and Windows Phone. In addition, we have also enabled copying and pasting graphics from Illustrator directly into your XAML design surface.

Performance and Reliability

We have been actively working on improving the performance and reliability of using the XAML design surfaces in Visual Studio and Blend, as well as the XAML editor in VS. While our work is not yet complete, we have addressed a significant amount of feedback that we received in this release – particularly in areas where the XAML designer would take a long time to load for large projects. The following is a quick sampling of areas where you might see improvements in this release.

In addition to this, we also fixed approximately 30% of all issues that were submitted by you via Microsoft Connect. We continue to make progress on addressing more issues as fast as we can.

As usual, we look forward to any feedback you might have and ways we can improve your XAML Development experience – please keep it coming!

Blend is included with Visual Studio 2012. This makes it easy for you to create great Windows Phone 8 applications. The free Visual Studio 2012 Express for Windows Phone 8 comes with Blend as well. For all you Visual Studio 2012 Pro, Premium, and Ultimate customers out there, installing the Windows Phone 8 SDK automatically enables Windows Phone 8 development in your installed version of Blend and Visual Studio.

A lot of the Blend features you have come to love in the previous edition of Windows Phone tools are now available in Visual Studio as well, including the Device Panel, better support for editing controls like the AppBar, and template editing.

In addition to these, we have added support for designing for multiple resolutions in the Device Panel.

All the features of Blend available in the previous edition of the Windows Phone tools are carried over to the Windows Phone 8 tools as well, including Behaviors, visual state editing, and sample data. If you have the Windows Phone 8 SDK installed, you also get full design support for building Windows Phone 7.5 (Mango) apps in Blend and Visual Studio.

Blend for Visual Studio 2012

Visual Studio 2012

Check out the video below to see our flagship features in play in Visual Studio & Blend.

For more information on Windows Phone 8 App Development, please visit the Windows Phone Dev Center.

Download Visual Studio 2012 with Blend and Windows 8.  MSDN Subscriber Downloads has several versions available, and there are free downloads available for non-subscribers.

Getting Blend installed and running is only one part of it. Using Blend in conjunction with Visual Studio to build great Windows applications is the other part, and that is where this post comes in. In this post, you will get an overview of Blend and the great features it provides for allowing you to build great Windows applications.

Hello World

What better place to start than with the classic hello world example. Learn the basics of the Blend UI and how to start working with the content creation and styling features you have available:

Building a Windows Application

Let’s go a bit further now and look at how to work with controls, data, templates, layout, and more – all of which will play a crucial role as you build your own Windows applications.

Designing for Devices

Because your applications will be running on devices other than just a laptop or a desktop, let’s see how Blend can be used to help you design for multiple orientations, screen sizes, and view states:

Further Reading

Hopefully the videos helped get you excited about using Blend and Visual Studio to design and develop great Windows applications. To help you on your journey, be sure to check out the following links as well:

1. UX Guidelines for Windows 8 app Development
2. Guidance and Best Practices for building your Windows 8 UI
3. Browse and Download HTML/CSS/JavaScript Samples
4. Give and receive help on the forums

As always, we are looking forward to hearing from you. Please let us know what you think by commenting below or posting in our forums.

Cheers,

Kirupa Chinnathambi, Program Manager

Who doesn’t like food? Trying to find the perfect recipe to cook for dinner is a decision we battle every day, so one of our sister teams in Microsoft had created this awesome Contoso Cookbook sample app. For the purposes of this post we will take this much loved sample application already oozing with design goodness and add a bit more styling and flair to it.

Download the Contoso sample app uploaded to accompany this tutorial.

Contoso Cookbook Sample

Contoso After a bit of styling with XAML design tools

All we did to style this page was 4 things:

1. Add a more vibrant background.
2. Edit the style of Items in the list of recipes (a.k.a ItemTemplate of the GridView).
3. Edit the style of the Group (a.k.a GroupStyle of the GridView).
4. Added a snazzy Windows 8 animation to the background image.

Changing the background

The below video demonstrates some aspects of designing layout in Blend and working with a wide variety of brushes.

Tips & Tricks

• Did you know Blend enables you to do Brush Transforms using the Brush Transform tool?
• You can even select colors from a snapped Windows Store app using Blend’s eyedropper tool. Try it out.
• Visual Studio now has a good picture editor built in. Double click on any image to open it in the picture editor.
• Check out CTRL+0, it’s the single best designer shortcut you can learn.

Learn how to work with brushes , resources, layout & the eyedropper tool.

Editing an Item Template

The below video demonstrates some aspects of working with Item Templates in XAML tools.

Tips & Tricks

• Changing the panel type in an ItemsPanelTemplate can be hard because the platform sometimes throws an exception if you delete and try adding a new panel type. A better way to do it is to use the Change Layout Command in the context menu of the panel to change to panel type to the one you want.
• Did you know you can use the data binding dialog in both Blend & VS even if you set the DataContext in the code-behind? Hint: set the property d:DataContext which is completely supported by our intelliSense and the data binding dialog will now treat it as the data context of the scope during design time and leave the runtime behavior unchanged).

Learn about designing templates, resource scoping & management.

Editing a GroupStyle

The below video demonstrates some aspects of working with states & GroupStyles in XAML tools.

Tips & Tricks

In case you have multiple GroupStyles and you would like to design them all in the designer, you can use the Collection Editor of the GroupStyle property and move the desired GroupStyle to index 0 and then you can use the Edit GroupStyle command to design that style to your heart’s content.

Learn about designing GroupStyles.

Working with the Windows 8 animation library

Tips & Tricks

• Did you know that you can copy one state to another? Try out the CopyState command in the States pane, which you can access by bringing up the context menu on a state, this is a huge productivity booster.
• Blend enables you to create in-state animations, e.g. pulsing a button when selected by using the Objects & Timeline pane. While in a state select the timeline icon in Objects & Timeline panel to start creating in state animations.

Learn about ThemeAnimations & ThemeTransitions.

Designing View States

The below video demonstrates some aspects of working with view states in Blend.

Tips & Tricks

• Did you know that the BasicPage Item Template in the Add new item dialog has built in View state awareness?

Learn more about working with  Application View States.

Thanks,
Harikrishna Menon, Blend Program Manager

We want to make it really easy for you to create great apps for Windows 8. Therefore, we are now including Blend with Visual Studio 2012, including the free Express for Windows 8 version for authoring Win 8 store apps. With one fast download and install you get VS for your coding-centric tasks and Blend for visual authoring.

Visual Studio 2012 and Blend can be downloaded from MSDN today if you’re an MSDN Subscriber.  You can also download the free Visual Studio 2012 Express for Windows 8, which includes Blend, or free trial versions of Visual Studio 2012 with Blend today.

Blend for Visual Studio 2012 supports XAML store apps with great support for Win 8 features such as app bars, Grid view, and view states. Blend also adds native C++ app development to its repertoire. Also, with the release of VS 2012, the XAML design surface in VS is now built on the same code base as Blend, improving workflow and interoperability.

Completely new in Blend is visual authoring for HTML and CSS, especially for Windows 8 store apps.

Blend is a unique, innovative and exciting authoring tool with rich visual tools. It gives you great tools to create, edit and diagnose CSS, supporting some of the latest CSS standards, including CSS Grid, Gradients, Transitions, and media queries. Blend creates clean and standard-conformant markup.

It also is designed to handle app UX that makes heavy use of JavaScript to dynamically create and manipulate DOM elements. Blend constantly runs your code on the design surface, so that content generated by JavaScript can be displayed and edited accurately. Using Interactive Mode you can even interact with the app on the design surface and bring it into states that are not reachable via markup at all.

In summary, Blend for HTML makes visual authoring of HTML, CSS and WinJS productive, fast, and fun again.

Additional Releases

As said above, this release is focused on store apps for Windows 8. We are also working on support for WPF, Silverlight and SketchFlow compatible with VS 2012. A preview is available for download. Please keep in mind that it is intended for evaluation and feedback only.

For production work, please use the following releases:

Summary

Blend for Visual Studio is a great visual authoring tool for Windows store apps in XAML and HTML. It is the most accessible version of Blend ever, available with the free Windows 8 development tools, as well as all other packages of Visual Studio 2012.

There is a lot to explore. Please download it and give it a try. We are eagerly looking forward to your feedback.

WPF, Silverlight, and SketchFlow applications can be developed on any of the operating systems listed above. Windows Store apps authored in HTML and XAML require the Windows 8 client operating system. This preview also includes Blend SDKs for WPF 3.5/4.0/4.5 and Silverlight 4.0/5.0 platforms.

This is a preview version for evaluation only and none of the platforms contain a go-live license. You should use other released versions of Blend for production work. The table below lists the Blend Platforms and the version of Blend you should use for production applications.

>

More information about this can be found in the updated End-user license agreement that comes with the product. The expiration date of this preview is July 9, 2013. This preview can be installed side by side with Expression Blend 4, Blend for Visual Studio 2012, Blend for Windows Phone, and the Blend Preview for Silverlight 5.

You can download this release from the Microsoft Download Center: Microsoft Blend + SketchFlow Preview for Visual Studio 2012.

Note: This post and the examples shown are written in the context of the XAML Metro style app designer, but some of them apply to Windows Presentation Foundation (WPF), Silverlight, and Windows Phone designers as well.

First, a quick overview of what code runs in the designer and what doesn’t.

• The code-behind of the instances of user controls and custom controls in the active XAML page are run in the designer.
• WINRT or CLR types that you declare in XAML as resources are instantiated in the designer process.
• Events dependent on CoreWindow and Input events will not be fired in the designer.

Keeping the above statements in mind, let’s review some things that might cause the designer to crash or behave unexpectedly.

Using [DependencyObject].Dispatcher

As the designer process is basically a WPF Application that hosts XAML runtime components, types like CoreWindow and CoreDispatcher are unavailable. CoreDispatcher is generally used to marshal an operation from a non-UI thread to the UI thread or schedule it for later execution on the UI thread. Since there is no CoreWindow in the designer process, CoreDispatcher objects in the designer will always evaluate to NULL. Hence, any user controls and custom controls that use this construct in their code-behind might not work correctly in the designer.

When we detect that an instance of a user control or custom type cannot be created, we catch all resulting exceptions and wrap them in an error report linked to that specific instance, and continue creating the rest of the document.

If you drill down into the exception details, you will get an error report similar to the image below.

The above exception makes it clear that in this example, the display problem is due to a Dispatcher invocation in the constructor of the control.

The question now is, “How do I safeguard my control from dropping dead in the designer?” Well, there is a pretty nifty way of working around this. The code sample below illustrates the approach.

The key is Windows.ApplicationModel.DesignMode.DesignModeEnabled. This property always evaluates to true in the designer and to false during runtime. For a seamless design experience, the recommended approach is to wrap troublesome invocations with this construct.  (For WPF and Silverlight design mode detection, check out Laurent Bugnion’s great blog post Detecting design time mode in WPF and Silverlight.)

This particular issue is not only unique to the CoreDispatcher but is also applicable to properties like CoreWindow.Current.

File I/O in the Designer

Files packaged as a part of the app will not be available for the code running inside the designer process. Two notable exceptions to this rule are Images and XAML files.

To be more specific, file access in the project that does not go through XAML APIs will not be available in the designer. The reason for this constraint is that the structure of the App when deployed for the designer process varies radically from the structure of an installed Windows 8 App.

Design time resolution of XAML files and Images are enabled by a callback mechanism from the platform to the designer process. Whenever the XAML platform encounters a resource that it cannot resolve, it calls the designer process, which supplies it with the correct location of the resource. Other file types referenced either by relative or ms-appx URI will not be available at the expected location in the designer process.

Let’s say you are trying to access an .xml file that is a part of your project in a User Control in the designer process. You might run into the below exception:

The code below, which was called from the constructor of the User Control, threw the above exception.

A couple of workarounds

Here are two possible workarounds.

• Wrap the call to the File IO using the Windows.ApplicationModel.DesignMode.DesignModeEnabled flag to prevent this exception from happening.
• If you are using this file for design time data, an alternative option is to use XAML files. (Blend 4 Sample data)

As always, we welcome your comments and feedback.

Harikrishna Menon, Program Manager – Blend for Visual Studio

This works well for the majority of attributes and properties that take a single value.  However, the class attribute can be assigned a list of space-separated class names.  In JavaScript, the list of class names can be appended to, prepended to, overwritten, deleted, or otherwise arbitrarily modified.  Sometimes, multiple JavaScript functions will modify the class attribute of the same element in different ways.

Understanding the interactions between HTML markup and JavaScript is crucial during development and can help with debugging when things aren’t displaying as expected.

Enter the Blend Class Attribute Editor for HTML

Blend includes a nifty value editor specifically designed for the HTML class attribute.  You can use it to add, edit, and remove class names for selected elements.  More importantly, you can see a visual indicator for each class name that indicates its state.

Class State Indicators

The class attribute editor displays three possible states for each class

State 1: Class Name Added in Markup
The first is the markup state.  It appears as the class name with a minus sign (i.e., the Delete button) to the right.  This indicates one of three conditions:

• The class name exists in HTML markup and JavaScript has not modified the class attribute for the selected elements.
• The class name exists in HTML markup and JavaScript modified the value of the class attribute, but also added this particular class name.
• The class name was added during design time after JavaScript updated the class attribute, and JavaScript has not since modified the class attribute (i.e., you have not invoked a Refresh).

State 2: Class Name Added by JavaScript

The second state is denoted by a lightning bolt following the class name.  This indicates the class name was added by JavaScript and does not appear in HTML markup.

State 3: Class Name Removed by JavaScript

The third state is denoted with the class name struck through in addition to a lightning bolt.  This indicates the associated class name exists in HTML markup, but JavaScript modified the class attribute and deleted this class from the element.

If any of the class names are added or removed by JavaScript, the Property Marker (the little square next to the plus button at the top of the editor) and the border around the editor will be colored cyan.

Adding, Editing, and Removing Class Names

The plus button at the top is the Add button.  Clicking the Add button adds a new class with a default name to the editor.

You can edit individual class names by double-clicking them.

Deleting them is just as easy.  Click the minus button and the corresponding class name is removed.

Even if a class is added by JavaScript, you can remove it using the class editor.  But remember, refreshing the artboard will run your JavaScript again and reset the class names.

Power User Tips

Power User Tip #1: You can add multiple class names at once by putting a space between each name.

Power-user tip #2: Clicking the Property Marker for the class editor will bring up the option to “Create Style Rule from Element Class”.  This option has a fly out menu to let you create a new style rule targeting the selected class name.  Go for it, power users!

Let us know what you think about Blend’s new class attribute editor—feel free to leave comments and questions below.

Thanks,

Kirk Schloegel and Brian Hilstrom

Keep the Windows design guidance for app bars in mind any time you are working with them.  There is a complete set of Guidelines and Checklist for app bars published on the Windows Developer Center.  Those guidelines include:

• Place commands consistently and organize them to coherent sections.
• Place contextual commands on the app bar (except clipboard operations).
• Design the AppBar for Application View States like Snapped & Filled.
• Use the bottom app bar for commands and top app bar for navigation.
• Do not place critical commands on the App Bar.

The XAML Designer in Blend & VS enables you to intuitively design XAML AppBar controls and content. Check out the video below to see how to design a XAML AppBar in Blend for Visual Studio, which is similar to the one in the Music App in Windows 8 Consumer Preview.

Video demo:  How to create a XAML AppBar

More Resources

Guidelines and checklist for app bars  in the Windows Dev Center goes in to more detail on the UX guidelines for AppBar.

Official Windows SDK XAML AppBar control sample

Tim Heuer’s Blog on AppBar button styles and his updated Standard Styles defines the 150 different AppBar button styles.

Thanks,

Harikrishna Menon Ajith Kumar, Blend PM