2012

Volume 27

Design and UX - Authoring Windows Store Apps in Blend

By Christian Schormann | 2012

Blend for Visual Studio 2012 is a powerful visual authoring tool for creating Windows Store apps built using XAML or HTML. Blend is included with Visual Studio 2012, and it’s available directly from the Start screen.

If you’re familiar with creating XAML applications for Windows Presentation Foundation (WPF), Silverlight or Windows Phone, you’ll quickly feel at home. This version of Blend provides tools that are similar to previous versions, but it also includes support for the Windows 8 XAML platform. In addition, Blend provides new, innovative visual authoring tools for creating Windows Store apps using HTML, CSS and JavaScript.

I’ll first take a quick look at what’s new for building Windows Store apps with XAML, and then do a more in-depth exploration of the tools in Blend for creating Windows Store apps with HTML.

Using Blend to Create Windows Store Apps with XAML

Windows 8 provides a new XAML platform to support app development. The platform supports not only traditional managed languages (C# and Visual Basic), but also native development in C++. The XAML feature set is similar to that in WPF and Silverlight and includes a set of Windows 8-specific controls and target device properties that Blend supports. In addition, the XAML designers in both Visual Studio 2012 and Blend now use the same code base, resulting in much better compatibility than before. (Overall, Visual Studio 2012 and Blend offer a great, integrated workflow. You can open the same project in both tools at the same time and switch smoothly. I like to write code in Visual Studio to take advantage of the great code editor and debugger, and to design, author and style UX in Blend.)

Here are a few of the highlights of Windows 8 functionality for building Windows Store apps with XAML in Blend.

Built-in Support for Windows 8 Controls Blend has built-in authoring support for Windows 8 controls such as AppBar and ListView, making it easy to build applications with these iconic controls. The AppBar is a fly-in control that’s normally hidden, but the Blend design surface helps you bring the control into view for interactive editing. ListView, with all the associ­ated templates for data items, group styles and more, is also fully supported in Blend.

View Authoring Windows Store apps are expected to run on a variety of form factors, at different display sizes and pixel densities, and to adjust to different views (portrait, landscape, snapped and full). The Device panel (Figure 1) helps you create, edit and modify the app with different views selected on the design surface. The Device panel is also integrated with the Visual State Manager.

Figure 1 Device Panel in Blend for Windows Store Apps Built with XAML

Using Blend to Create Windows Store Apps with HTML

Blend is a unique environment for creating, styling and iterating HTML-based UI design and for creating clean, professional, standards-compliant markup. Unlike traditional HTML authoring tools, Blend can handle design scenarios for apps that use JavaScript to create or modify content on the fly. The Blend design surface uses the same rendering engine as the Windows Runtime, but it also runs JavaScript from the moment you load a page, which ensures accurate visualization of both static and dynamic page elements. The Live DOM panel and the rich, productive CSS tools in Blend help you work with the elements you create in markup as well as with every element that comes from script or is loaded from a fragment.

In the next few sections, I’ll cover these and other highlights of the HTML functionality in Blend.

Code on the Design Surface Running code on the design surface for accurate rendering of code-generated pages is the bedrock of building Windows Store apps with HTML in Blend. For example, the markup in Figure 2 includes both standard HTML and JavaScript. When you paste this markup into an empty page in Blend, the JavaScript runs and is executed directly on the design surface in edit mode.

Figure 2 Blend Runs JavaScript on the Design Surface

<!DOCTYPE html>
<html>
  <head>
    <title></title>
      <script>
        function init() {
          var p = document.querySelector('#placeholder');
          if (p) {
            var fruit = ['apples', 'oranges',
                         'lemons', 'pears', 'strawberries'];
            for (var i=0; i<fruit.length; i++) {
              var e = document.createElement("div");
                e.textContent = fruit[i];
                e.className = 'fruit';
                p.appendChild(e);
            }
          }
        }
      </script>
  </head>
  <body onload="init()">
    <div id="placeholder"></div>
  </body>
</html>

The elements generated by the JavaScript are rendered correctly on the design surface. Because the design surface runs code in edit mode, you can select JavaScript-generated elements just as you would any other element.

The elements also show up in the Live DOM panel (Figure 3), which represents the dynamic state of the Document Object Model (DOM) tree, not just the content of the markup document. Elements not present in markup, such as those created by JavaScript or dynamically loaded from a fragment, are marked with lightning-bolt icons to indicate that these elements were generated by script.

Figure 3 The Live DOM Panel

The Live DOM panel also shows which classes are attached to each element. For example, the code in Figure 2generates the class name “fruit” for each generated element. While you can’t directly modify JavaScript-generated elements (there’s no markup for Blend to modify), you can still style against the classes, provided that the generating code uses CSS class names or the generated elements can otherwise be accessed with a CSS selector.

Rich CSS Property Editors Blend provides many rich property editors that make complex CSS properties accessible, as well as lots of support for interactive manipulation of elements on the design surface. For example, Windows 8 supports a new standard CSS layout model called the CSS grid. The CSS grid is an amazingly useful layout, especially for resizable applications that need to run on multiple form factors. Grid layout works with a set of rows and columns, similar to a table, where each row and column can be assigned a specific resize behavior. Rows or columns can be set to a fixed size, to resize proportionally, or to automatically fit their content. If you’re familiar with the XAML grid, you’ll be right at home with HTML grids.

CSS grid editing in Blend takes the stress out of many CSS layout scenarios (see Figure 4). You can draw and modify grids right on the design surface, see in-place measurements [1], modify sizes and units using in-place on-object UI [2], insert and delete rows and columns, and much more.

Figure 4 Artboard Editing of CSS Grid

Blend also provides color editors and support for multilayer backgrounds and CSS gradients (Figure 5), all with immediate visual feedback. In addition, you can easily edit CSS transitions in Blend. Figure 6 shows the CSS transition editor with a staggered transition defined for three properties, including easing functions.

Figure 5 Color Editing Includes Visual Feedback

Figure 6 Editing a CSS Transition

CSS Editing Styling with CSS is at the heart of visually authoring HTML-based UIs. Blend is built around a sophisticated set of tools for CSS styling. For example, the Style Rules panel (Figure 7) shows you all the style rules that are applied to the currently open HTML document.

Figure 7 Style Rules Panel

In Figure 7, you can see how style rules are sorted by stylesheet and in declaration order [1]. Search is supported for larger collections of style rules. The Style Rules panel also shows media queries [2] and the style rules defined within each query. You also see which media query, if any, is currently active. Because Windows Store apps make use of media queries to handle various view states, this is very important for app styling.

Style rules can be created, edited or deleted in the Style Rules panel (although Blend has many productivity shortcuts for style rule creation). During the creation of CSS selectors, Blend helps with IntelliSense for CSS selectors. As you type a selector, Blend provides a list of completion options in the context of the current document, as you can see in Figure 8.

Figure 8 IntelliSense for CSS Selectors

IntelliSense for CSS selectors also highlights the elements targeted by the selector while you’re typing. This feature is called the rule scope adorner. The rule scope adorner is not only displayed by IntelliSense; it also appears any time a style is selected directly or indirectly, which makes it easier to identify which elements are affected by the selected style rule. In Figure 9, the rule scope adorner is shown with green outlines. CSS selectors can become quite complex, so you’ll find this to be a very useful utility.

Figure 9 An Example of the Rule Scope Adorner

You can always select style rules directly in the Style Rules panel and then edit the CSS properties for that style rule in the CSS Properties panel. In many cases, however, it’s easier to select an element on the design surface or in the Live DOM panel and find the style rules that affect that element.

Whenever you select an element on the design surface, the CSS Properties panel (Figure 10) displays a list of style rules that are applied to the element in order of precedence. This makes it much easier to find the style you need. By default, properties are shown in a categorized view, but an alphabetical view is also available. The CSS properties list is fairly long (currently more than 300 CSS properties are defined), so to locate a property, you can search the property list or filter it to see only properties that are currently being set in the rule.

Figure 10 CSS Properties Panel

In many cases, the properties that contribute to the style of an element come from many different style rules. This can make it difficult to understand why an element looks the way it does. In these cases, a roll-up view of all “winning” properties helps determine which styles are being applied (Figure 11).

Figure 11 View Winning Properties

The Winning Properties view shows only the properties that rise to the surface of the CSS cascade, sorted by the style rule of origin. This view is extremely useful for diagnostics, but also for the quick tweaking of an existing property value.

The Computed Values view shows properties with the values that the browser sees for rendering after processing the CSS declarations. This can sometimes be a great help when you’re trying to resolve problems. Blend also provides access to the CSS cascade, another tool for diagnosing problems in your display.

For every property, you can view the CSS cascade to see the values from all the rules that affect a given property. For example, you might have a background-color property that’s defined by two different rules, with the one on top being the one that “wins” for that property. The CSS cascade display (Figure 12) also lets you navigate quickly to competing rules.

Figure 12 A View of the CSS Cascade

Blend offers many shortcuts to quickly create style rules for selected elements. You can create a rule that targets the ID of the selected element (#foo, if the element has an ID of foo), or create rules matching any of the classes in the className attribute. You can also add and remove classes quickly, or add a new class and create a rule for it, in one single step (see Figure 13). These in-context productivity gestures make styling with Blend fast, smooth and efficient.

Figure 13 Add a Class and Create a Style Rule in a Single Step

Last but not least, because everybody makes mistakes and changes his mind, Blend provides some refactoring functions. With these, you can quickly cut and copy entire style rules, all property values from a style rule or just selected property values. You can then paste the copied rules or properties into a new or existing style rule.

WinJS Controls In the Windows Library for JavaScript (WinJS), Windows provides a set of HTML-based controls for Windows Store apps. This includes simple controls such as a toggle switch, as well as sophisticated controls such as ListView or FlipView. WinJS controls are similar to controls in other UI toolkits, such as JQuery. One difference is that WinJS controls can be used from code (and also declaratively from markup) by using standard data attributes to apply the control metadata. This mechanism allows Blend to provide a first-class authoring experience for the controls.

WinJS controls are created in Blend by using the Assets panel. Figure 14shows the Assets panel with the category of the most common controls displayed. You can insert controls or HTML tags into the page by dragging or by double-clicking the asset. You can also search for and filter results in the Assets panel.

Figure 14 Blend Assets Panel

After you’ve added a control to the design surface, you can configure it by using the HTML Attributes panel. The configuration options for the selected control are shown in the Windows App Controls category in the panel. For a toggle switch, for example, you can set the labelOff and labelOn attributes or modify the title.

When the page loads, the WinJS toolkit finds elements with data-win-control attributes, and it then creates the backing control, with the options set in data-win-options. The control implementation, as with HTML controls in other toolkits, creates the elements that display the control dynamically. Because Blend runs code on the design surface, the control will be displayed accurately in edit mode. You’ll also see the dynamic elements created by the control. The JavaScript-generated elements are identified by a lightning-bolt icon.

Data Template Editing and Fragments Even though a ListView is a much more complex control than a toggle switch, it’s configured using attributes in a similar way. Beyond this, Blend has deep support for data-template editing with a ListView. A data template is a snippet of HTML that’s used to render every single data item in a list. Live data-template editing in Blend helps you design and style data templates in place, within the ListView, with the updates reflected accurately.

You can create an empty default data template right from the attributes editor and then use the Blend authoring tools to edit the template. Figure 15 shows the markup for the simple ListView with a data template that’s shown in Figure 16.

Figure 15 ListView with a Data Template

<div id="cityTemplate" 
  data-win-control="WinJS.Binding.Template">
  <div class="cityItem">
    <img class="cityImage" 
      data-win-bind="src:image">
    <div class="cityLabel" 
      data-win-bind="textContent:name"></div>
  </div>
</div>
<div id="cityList"
  data-win-control="WinJS.UI.ListView"
  data-win-options="{
    itemDataSource:AppData.cities.dataSource,
    itemTemplate:select('#cityTemplate'),
    layout:{type:WinJS.UI.ListLayout}">
</div>

Figure 16 ListView Using Data Template

One div defines the ListView, and another div, marked as a template control, provides the root for the data template. The content of this div (in this case, the div with the class cityItem) is instantiated for each data item the ListView renders. The template control attached to the template div also ensures that the template isn’t actually visible on the page.

This poses a bit of a problem for visual editing because to edit a data template, you need to edit the content of the template. However, the data-template control hides the template content—to keep it out of the way of the “real” page content—so you can’t see anything to edit. But even if the template content were visible, what you really want to see and edit is the data template in the context of the ListView, not outside of it.

Figure 17illustrates what you need to do to edit a data template. Select an element in the ListView, directly on the design surface [1]. You can see in the Live DOM panel that the selected element (image) is a dynamically generated element inside the ListView [2]. The ListView is also displayed in the Live DOM panel [3].

Figure 17 Editing a ListView and Data Template

In code view, the img tag inside the data template [4] is highlighted. At the top of the design surface, information tells you that the selected content originates from a data template [5].

When you select the element in the ListView, Blend traces the origins of the element displayed. Blend identifies this element as coming from a data template and displays this information. Now, as you edit the element, Blend automatically makes the relevant edits in the markup and styles of the data template, updating all the items displayed in the ListView as you go. No manual updates are required. 

The ability to see through a ListView into a data template is one of my favorite Blend features. This also works with fragments. A fragment is an HTML page that’s dynamically loaded into another page using a WinJS utility function or an HTMLControl (a special WinJS control). Just as with templates, Blend detects fragments on a page and provides the same level of in-place editing. You can see fragments in place and in context (Figure 18) the way they’re meant to be used, and fully edit them, without restriction and without having to open another document.

Figure 18 Editing an HTML Fragment

Interactive Mode

Interactive mode is one of the best and most useful features in Blend. As I said before, Blend always runs your code on the design surface. In normal edit mode, it prevents you from interacting with the app, so you can only select, manipulate and edit elements that are visible on the artboard. Interactive mode takes away this protective layer so that you can interact with the app as it’s running.

So why not just run the app? The most important reason is the ability to accumulate state. When you run the app in Windows or in the Simulator, the running instance is completely detached from what you have on the design surface. Any interaction you have with the running app changes only the state of the running app. The moment you stop this instance, the accumulated state is gone.

As you switch between interactive mode and edit mode, the application state is preserved. If you do something as simple as change the state of a toggle button, bring in a fly-out, change options or even create a drawing on a canvas, when you return to edit mode, your state is preserved. This enables you to edit and tweak your app in states you would normally never see on the design surface. This is incredibly convenient, fast and liberating because you can now edit visually in states that can’t be reached statically at all. In many ways, interactive mode is like the developer tools in a browser, but intimately tied to the actual source project and the design surface.

Figure 19shows two views of a simple world clock app. To see the second view, some code needs to run, which is triggered by the mode switch toggle. In edit mode, there’s no way to make this code execute, but as soon as I switch to interactive mode I can simply slide the Digital/Analog toggle and the view changes, ready for edit. I can’t imagine working without interactive mode anymore. 

Figure 19 Switching the Dynamic App State via Interactive Mode

Designing for Devices

Windows Store apps run on a wide variety of devices, from small tablets to large desktop monitors. These devices come in a wide variety of resolutions and display pixel densities. In addition, Windows Store apps can be in different view modes (landscape, portrait, snapped and filled mode).

When authoring adaptable applications, it’s important to be able to see and edit the app in a variety of different view states. Blend lets you do this, accurately displaying the different scaling modes on the design surface, controlled by the Device panel.

Wrapping Up

Blend for Visual Studio 2012 provides visual authoring for Windows Store apps, with support for both XAML and HTML. The XAML functionality is similar to previous versions of Blend, so if you’ve used previous versions you’ll feel right at home. In addition to rich support for Windows Store app development, Blend for Visual Studio 2012 also supports enhanced compatibility with the XAML Designer in Blend.

Blend support for HTML represents a new and innovative kind of authoring environment for HTML. Blend can handle not only HTML and CSS markup, but also the rather frequent pattern of JavaScript-generated content. Most important, Blend for HTML makes visual authoring of HTML, CSS and WinJS productive, fast and fun.

Christian Schormann is a partner program manager on the Blend team. His passion is building visual authoring tools for designers, artists and developers.

Thanks to the following technical experts for reviewing this article: Joanna Mason, Unni Ravindranathan, Josh Pepper and Erik Saltwell