It’s that time again: With the new Release Preview and the new developer tools, Windows 8 is one step closer to final release. And just like in the Consumer Preview, our engineering team has been hard at work polishing the development platform to provide you with the best possible development experience on Windows 8. In this post I highlight a few of the new features that we’ve been working on and I also help get you started on migrating your existing Consumer Preview apps to the Release Preview.

But first a few insights on the Windows development process

Before I jump into some of the new features in the Release Preview I’d like to give a little insight into how our team considers feature changes in the Release Preview milestone. At this point in the development process a majority the features in Windows are baked into the platform. In the Release Preview our goal is to polish these existing experiences.

So what does this mean for you as a developer? It means that most of the changes you’ll find in the Release Preview are much smaller than in previous releases of Windows 8. The new features are targeted to meet specific needs. A lot of the changes simply make existing Consumer Preview scenarios work even better than before. We fixed bugs in the platform, increased its performance (we also made it easier for you to build faster apps by making only tiny changes in your code), and improved the developer experience until we were happy with the results.

This is great for you because it means that all the knowledge and skills that you’ve gained from developing apps on the Consumer Preview are still fully applicable to the Release Preview. It also means that the amount of changes you’ll need to make to your existing apps is minimal. But at the same time the development platform is more polished than ever before. Take a look at the changes and you’ll get a good feel for what we’ve been up to.

High priority roaming app settings

Windows 8 Application Data offers you a way to easily enable a “configure once, use anywhere” behavior to your app settings with roaming app data. With very little effort on your part, your users get the same app setup on all of their Windows 8 PCs. With the Release Preview, we expanded this feature to include HighPriority roaming app settings. With high priority roaming you can create a continuous app experience across PCs by allowing a small amount of state data within your app to roam with high frequency.

For example, a news reader app could use this HighPriority setting to roam the news article a user was reading. Whenever the user changes articles, the news reader app changes that setting and it roams. If that user were to switch to a different Windows 8 PC, the news reader app can display the last article that the user was reading, so that they can continue reading where they left off on their other device.

Best of all, this feature is easy to implement. Simply make a setting or composite with the name “HighPriority” in the root Roaming settings container. That setting roams within a minute of being changed, which enables you to roam key pieces of state data about your app so a user can pick up where they left off across PCs. High priority roaming works only with one setting, so if you need to roam multiple pieces of data such as an article and a page number you can use a composite value. The “HighPriority” composite can’t exceed 8k. If it is larger than that, it will roam as a normal setting.

To get started, check out the Application data Sample, which has been updated to include an example of High Priority roaming app settings.

Improved Visual Studio templates

Another area where we have made a lot of improvements is templates in Visual Studio. We’ve made lots of updates to our templates and even added a new one so that it is easier for you to start a new project and get a great app up and running in no time.

Updates to the XAML templates

The XAML templates received a lot of focus in the Release Preview. Here are some of the most important changes we made.

  • We removed from the Blank app template components that are not required, for example helpers for databinding, page helpers for navigations support, process lifetime management, etc. This gives you the most flexibility to create your app from scratch. If you add an item template that needs these common components, you have an option to add them.
  • The XAML templates now support virtualization by default.  GridView and ListView now take advantage of a header region allowing the bound items to be virtualized.  In addition, the landing page for the GridApp now supports only showing a subset of items rather than the entire collection, allowing for better performance. These improvements mean that your app will pan/scroll faster than before without any extra work on your part.
  • We added entrance animations to all pages (other than the Blank Page as it still remains blank). These animations smooth the transitions between the pages in the templates and make your apps feel fast and fluid to the user.
  • D2D Project template now supports XAML.

Updates to all templates

We improved navigation for all templates. In the Consumer Preview the navigation in the templates was primarily structured for touch. Now the templates fully support keyboard and mouse navigation using the back and forward buttons and keyboard shortcuts. Using the templates, your app’s navigation structure is automatically configured to support all forms of input.

New template for creating a Windows Runtime component

In addition to updating our existing templates we also wanted to make it easier to create your own Windows Runtime components. To do this we’ve added a new C#/VB template that does the heavy lifting for you. This template allows you to quickly create a new Windows Runtime component that you can then use in your main app. You no longer have to manually create these components from scratch because the template does all the setup work. You just need to add your custom logic and you’re done.

File property and thumbnail prefetch APIs

Since releasing the Windows 8 Consumer Preview, we have been taking a hard look at performance, and how to help you create apps that are fast and fluid. For apps that use the file system to display gallery views, such as photo albums, music playlists or documents hubs, one key performance bottleneck we wanted to work on was file access.

Retrieving file properties and picture thumbnails can take a long time in Customer Preview builds. In particular, the property retrieval model is on-demand, so apps that access many files at a time incur a lot of overhead in the backend because of the repeated cross-process communication. Additionally, not all properties are optimized for fast access, so if you want to use uncommon properties your app is penalized.

To address these gaps without forcing extensive changes to your app’s code, we added two new capabilities to the data model APIs.

Windows.Storage.Search.QueryOptions.SetPropertyPrefetch

  • This lets you provide a list of properties that Windows will optimize for fast retrieval
  • You can then access these properties with the same async methods you used before – they just come back faster

Windows.Storage.Search.QueryOptions.SetThumbnailPrefetch

  • This tells Windows that your app needs thumbnails for the files in the query result set
  • You can then retrieve the thumbnails with the same async method you used before – they’ll just come back faster

Here is what it looks like in JavaScript:

var search = Windows.Storage.Search;
var fileProperties = Windows.Storage.FileProperties;

// Create query options with common query sort order and file type filter.
var fileTypeFilter = [".jpg", ".png", ".bmp", ".gif"];
var queryOptions = new search.QueryOptions(search.CommonFileQuery.orderByName, fileTypeFilter);

// Set up property prefetch - use the PropertyPrefetchOptions for top-level properties
// and an array for additional properties.
var imageProperties = fileProperties.PropertyPrefetchOptions.imageProperties;
var copyrightProperty = "System.Copyright";
var colorSpaceProperty = "System.Image.ColorSpace";
var additionalProperties = [copyrightProperty, colorSpaceProperty];
queryOptions.setPropertyPrefetch(imageProperties, additionalProperties);

// Set up thumbnail prefetch.
var thumbnailMode = fileProperties.ThumbnailMode.picturesView;
var requestedSize = 190;
var thumbnailOptions = fileProperties.ThumbnailOptions.useCurrentScale;
queryOptions.setThumbnailPrefetch(thumbnailMode, requestedSize, thumbnailOptions);

// Query the Pictures library
var query = Windows.Storage.KnownFolders.picturesLibrary.createFileQueryWithOptions(queryOptions);
query.getFilesAsync().done(function (files) {
    // Output the query results
    files.forEach(function (file) {
        // getImagePropertiesAsync returns synchronously when prefetching
        // retrieved the properties in advance.
        file.properties.getImagePropertiesAsync().done(function (properties) {
            // Use image properties
        });

        // Similarly, extra properties are retrieved asynchronously but may
        // return immediately when prefetching completed.
        file.properties.retrievePropertiesAsync(additionalProperties).done(function (properties) {
            // Use additional properties
        });

        // You can also retrieve and use thumbnails 
        file.getThumbnailAsync(thumbnailMode, requestedSize, thumbnailOptions).done(function (thumbnail) {
            // Use the thumbnail
        });
    });
});

Similar code in C# would be as follows:

const string CopyrightProperty = "System.Copyright";
const string ColorSpaceProperty = "System.Image.ColorSpace";

// Set up file type filter.
List<string> fileTypeFilter = new List<string>();
fileTypeFilter.Add(".jpg");
fileTypeFilter.Add(".png");
fileTypeFilter.Add(".bmp");
fileTypeFilter.Add(".gif");

// Create query options.
var queryOptions = new QueryOptions(CommonFileQuery.OrderByName, fileTypeFilter);

// Set up property prefetch - use the PropertyPrefetchOptions for top-level properties
// and a list for additional properties.
List<string> propertyNames = new List<string>();
propertyNames.Add(CopyrightProperty);
propertyNames.Add(ColorSpaceProperty);
queryOptions.SetPropertyPrefetch(PropertyPrefetchOptions.ImageProperties, propertyNames);

// Set up thumbnail prefetch.
const uint requestedSize = 190;
const ThumbnailMode thumbnailMode = ThumbnailMode.PicturesView;
const ThumbnailOptions thumbnailOptions = ThumbnailOptions.UseCurrentScale;
queryOptions.SetThumbnailPrefetch(thumbnailMode, requestedSize, thumbnailOptions);

// Set up the query and retrieve files.
var query = KnownFolders.PicturesLibrary.CreateFileQueryWithOptions(queryOptions);
IReadOnlyList<StorageFile> fileList = await query.GetFilesAsync();
foreach (StorageFile file in fileList)
{
    // GetImagePropertiesAsync returns synchronously after prefetching 
    // retrieves the properties in advance.
    var properties = await file.Properties.GetImagePropertiesAsync();
    // Use image properties

    // similarly, extra properties are retrieved asynchronously but may
    // return immediately when prefetching completes.
    IDictionary<string, object> extraProperties = await file.Properties.RetrievePropertiesAsync(propertyNames);
    // Use additional properties

    // You can also retrieve and use thumbnails.
    var thumbnail = await file.GetThumbnailAsync(thumbnailMode, requestedSize, thumbnailOptions);
    // Use thumbnail
}

In our testing of apps that use these new capabilities we’ve seen significant improvements: 70% improvement in the time it takes to show a view of photos from the user’s Pictures library with the StorageDataSourceAdapter, and a 400% improvement for an app that populates a database with file properties extracted from the file system.

So if you are building an app that needs to access large numbers of files, take a look at these new capabilities and use them to speed up your app. For more info check out the Windows.Storage.Search.QueryOptions API documentation in the Dev Center.

Blend and Visual Studio designers

Since the Consumer Preview, we have continued to improve our design tools. We know that your app’s user interface is one of the key ways you can get your app noticed, so we wanted to make it as easy as possible to integrate all the new Metro style design concepts into your app.

Improved view state authoring for XAML apps

View states are one of the key UI concepts for Metro style apps. In the Release Preview both the VS XAML designer and Blend have been updated so that you can now preview and author pages using Visual States to tool the platform app view states (FullScreenLandscape, FullScreenPortrait, Filled, and Snapped) using the Device panel (formerly the Platform panel).  The Device panel now automatically changes visual states when you change the view.  Turning recording mode on enables changes you made on the Design Surface or Property Inspector to alter the currently selected visual state rather than always making changes to Base.

Image showing the new Device panel. The image shows the panel in FullScreenLandscape mode with a drop down to select other view states. The option to enable state recording is also shown.The new Device panel with full view state design support

Additionally you can now design and preview visual states with theme animations from the Animation Library using Blend’s Visual State design feature. The Animation Library is a suite of Metro style animations that has been built specifically to take advantage of the platform’s animation capability. These animations are used throughout Windows UI and are also available for your Metro style app.

Better productivity in Blend for HTML authoring

In the Consumer Preview we worked to get lots of great functionality into our Blend for HTML authoring tool. In the Release Preview we focus on making it easier and more productive for you to use that functionality in Blend. We made several improvements to general HTML/CSS design in Blend that make designing apps easier in the Release Preview, for example:

  • Blend now supports Cut, Copy & Paste of CSS properties and style rules as well as elements on the artboard and Live DOM.
  • You can edit the CSS properties and HTML attributes of multiple elements at the same time.
  • You can choose “Create a style rule from element class/id” and “Add/Remove class” via context menu on any element.
  • All searchable panes better indicate when a search filter is applied.

HTML_blend_designerThe HTML Blend designer with new cut, copy, and paste capability

We also made some more specific improvements to make you more productive while designing apps. For example it’s now easier to work with WinJS controls in Blend.

  • Blend supports live values for control properties.
  • Blend now shows rich error info in the results panel when a WinJS control throws an exception.
  • We improved the UI to switch between SemanticZoom views and activating Flyout & Menu controls.
  • We added new value editors for AppBarCommand icon property, AppBarCommand & MenuCommand Flyout.

So regardless of whether you are designing in HTML/CSS or XAML you’ll find many improvements to our design tools for Metro style apps. Of course the new features we describe here are just a sampling of the work we’ve done. Check out the tools for yourself to see all the improvements.

JavaScript gesture event model

Another area where we have made significant improvements is in how the gesture event model works for JavaScript apps. Our goal was to give you more flexibility and power in how your app processes gestures. Specifically:

  • The new event model supports multiple concurrent gestures. This new functionality means that you can now create a multi-gesture UX (for example, a multi-slider control, such as an audio equalizer).
  • You now get explicit control over what elements are targeted by gestures, and over which active touch contacts feed into each gesture. In the Consumer Preview the event model had very simple and restrictive rules for determining both target and relevant contacts. In the new model, you decide when a contact comes down what other contacts to group it with, and to what element to deliver the resulting gesture events.  You can enroll the contact in more than one gesture recognizer at the same time; you can create more than one gesture recognizer targeting the same element; in both cases your event listeners can choose programmatically which gestures to honor.
  • It allows you to target and handle touch and gesture events independently of each other (until now it forced both touch and gesture to target the same element). This makes it much easier to implement more complex input scenarios, for example allowing the user to perform multi-touch gestures to zoom a container, while at the same time highlighting individual elements within that container that the fingers are touching.
  • The event returns transformation data in a form that allows you to easily consume it to manipulate content in response to gestures. In the past you needed to perform a significant amount of matrix math to extract the relevant data. The new model returns transform deltas (increments) in the coordinate space of the parent.  This is exactly the info you need to concatenate to the current CSS transform that positions the element within the container in order to update the position, size and orientation of the element.

With these changes it’s now much easier to work with gesture input in your app. For more info, take a look at Responding to user interaction on the Dev Center and the Instantiable gesture sample.

Dev Center updates

In addition to all the work we’ve been doing on the development platform we spent a lot of time improving our documentation on the Dev Center. The Dev Center is your gateway for learning all there is to know about Metro style app development and we worked hard to make it as complete as possible for the Release Preview.

The first way that we improved the Dev Center is by simply adding more content. In the Consumer Preview the Dev Center had the essentials you needed to get started. Now in the Release Preview it’s much easier to find guidance on the advanced topics that make great Metro style apps stand out. Here are some of the highlights:

  • We added lots of new samples, including samples for the XAML WebView control, IndexedDB, the thread pool, JS web workers, and many more.
  • There are now over 200 new conceptual, Quickstart, and how-to topics to help you build Metro style apps.
  • The API reference documentation is more complete than ever.

In addition to the new content we also made it easier for you to find info and get started with your app building. For example, we greatly improved cross linking between samples and their associated documentation. You can now search for a sample, take a look at the code, and then easily jump to the documentation that gives you more details on the code you’re looking at. Or if you’d like to start out in the documentation, we improved our existing Getting Started topics and added more basic tutorials to get your app building efforts off the ground.

So one of the first things you’ll want to do when you install the Release Preview is to jump over to the Dev Center and take a look at all this new content for yourself. You’ll find these and other improvements to make developing Metro style apps easier.

Getting your existing apps up and running on the Release Preview

As we were developing the Release Preview we tried to keep the amount of breaking changes to apps minimal. We know that many of you have been working hard on apps and we wanted to minimize the amount of churn you had to go through to switch to the Release Preview. Of course getting a brand new development platform to a high level of quality always requires tweaking some of its features.

Some of the biggest changes we made were to the Visual Studio projects themselves (I described some of these earlier in the post). This means that the best way to get your app up and running is to start a new project in Visual Studio, select your app’s template, and start porting your old project to your new one. The layout of the templates hasn’t changed much, so most of your existing code will fit right in. As you do this, don’t forget to port over your old manifest too.

After you have your project ported, run your app and track down any errors caused by API changes. To help you we created a Migration Guide  that documents most of the API changes that we made from the Consumer Preview to the Release Preview.

By creating a new VS project and using the Migration Guide for API changes, you should have your app up and running on the Release Preview in no time.

Wrap up

I hope that you’re as excited as we are to start developing apps on the Release Preview. The changes in this post are only a sampling of the work we’ve done in this new release. The combined effect of all these changes is that Windows 8 lets you develop more powerful apps easier than ever before. With the help of the Migration Guide you can start taking advantage of these changes in both your new apps and your existing ones.

So go ahead and download the Release Preview and the developer tools and get started building apps. You might also check out the Windows Store for developers blog, and don’t forget that if you have a question, the Dev Center, forums, and our blog have lots of answers for you. Happy app building!

--Jake Sabulsky 
   Program Manager, Windows

A special thanks to Dave Bennett, Marc Wautier, Paul Chapman, Heather Brown, Keith Boyd, and Steve Wright for helping create this post.