Export (0) Print
Expand All

ScatterView Control



The ScatterView control is the control that you should use when you have one or more UI elements that you want users to be able to move, rotate, or resize freely within a fixed area.

A ScatterView control displays freeform content where multiple users can sort, move, resize, rotate, and organize content simultaneously. A ScatterView control includes the scatter area and multiple ScatterViewItem controls. You can move, rotate, or scale each ScatterViewItem item individually or simultaneously.

ScatterView provides a simple way to create applications that enhance the Microsoft Surface experience. The ScatterView and ScatterViewItem controls provide an empty shell that you can place content into. This content can be as simple as a static image or video or as complex as a collection of multiple controls, such as a control panel of buttons, check boxes, and sliders. Scattered items promote a more social and freeform interaction and create a more approachable feel, because the messy appearance is more human, forgiving, and playful in comparison to the precise feel of grids and tables.

ScatterView - Data bind with item template

An example ScatterView control

The following code example shows a simple ScatterView example that uses a window with this XAML code and no other code behind it. The rest of the topics in this section build on this example.

<s:SurfaceWindow x:Class="ScatterView_Snippets.SurfaceWindow1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:s="http://schemas.microsoft.com/surface/2008"
    Title="ScatterView_Snippets"
    >
    <s:ScatterView>
        <Image Source="Penguins.jpg"/>
    </s:ScatterView>
</s:SurfaceWindow>

When you run this code example, a window appears on the entire Microsoft Surface screen (by using the SurfaceWindow class) with an image that is positioned somewhere on the screen. When you touch the image, it animates to appear brighter for a second, and then enters an active state in which you can move, rotate, or resize it by using gestures. When you no longer touch the image, it becomes inactive.

ScatterView control, item enabled on right

A ScatterViewItem (left) appearing brighter briefly when touched (right)

This code example is simple, but it demonstrates some of the core functionality of ScatterView and serves as a useful starting point for understanding how it works and how to make the most of it.

Proper Usage

Use ScatterView when there are from 2 through 40 pieces of content that you want multiple simultaneous users to interact with. If there are more than 40 pieces of content, consider using a LibraryStack or LibraryBar control, or pre-sort the content into stacks so it does not overwhelm users.

Default Appearance

The main purpose of the ScatterView control is to enable users to freely move, size, and rotate items. But how does it determine how items should appear when they first get added?

The earlier XAML code example creates slightly different results every time that you run it. The image always has the same size, but it appears in different positions within the ScatterView control and with different orientations. These changes occur because the ScatterView control assigns random values to the ActualCenter and ActualOrientation properties of the image's ScatterViewItem control. The initial sizes of the items (ActualHeight and ActualWidth) are set to a size that guarantees that the items are not too small to be manipulated and that the items are not too large to easily to manipulate many at one time. As a result, the ScatterViewItem element is the same size every time that you run the earlier code example, even though the other properties are different.

ScatterViewItems appear in random locations

With no properties set, the item is given a random initial position

Detailed Description

Use a dark background as the ScatterView for the content. Represent the data in ScatterViewItem controls and arrange the items in a grid, randomly distributed, or in one or multiple stacks. Multiple users should be able to simultaneously rotate, move, stack, and resize all ScatterViewItem controls.

Initial Views

ScatterView includes several initial views that you can use depending on the application and context. For example, use the grid view sparingly because the orientation of the items does not support a 360-degree user interface or a multiuser scenario. The initial views include:

  • Random. Content cards are presented with a random rotation and position.

  • Grid. Content cards are presented in a grid with one orientation.

  • Library. ScatterViewItem controls are presented in one stack and users can drag them onto the scatter area for interaction.

ScatterView Properties

ScatterView is static and should not move if users tap or drag it. Items should behave in an intuitive way and should bounce off the edge of the screen, instead of being thrown off of it. You should not zoom or resize the ScatterView control unless your interaction design absolutely requires it.

ScatterViewItem Properties

Data is represented within ScatterViewItem controls. Typically, these controls are rectangular, but you can build them as any planar shape. ScatterViewItem controls include the following properties:

  • Activation. When a user touches a ScatterViewItem control, it is typically activated. When the control activated, the item appears to "float" on top of the scatter area by a slight increase in the size and a larger offset in its shadow. The grow and shadow transitions start slow and end slow. As the object transitions from its non-selected state, a slight shimmer also plays across it.

  • Depth. ScatterView has an active level and a stage level. When a user touches a ScatterViewItem control, it moves to the top of any stack and moves up to the active level. When a user releases the item, it moves down to the stage level after 0.4 seconds, unless you specify another value. Items that recently moved back down to the scatter area stay at the top of any content until another ScatterViewItem control is dropped on top.

  • Manipulation. ScatterViewItem controls respond to touches in a natural and intuitive way. Multiple users can rotate, resize, and move items simultaneously. Users can flick ScatterViewItem controls and as they bounce back to the scatter area, the controls should slow down and stop. Users can also spin items when they are thrown. Dragging on the edge of the item enables single-finger rotation, while dragging in the middle allows users to move the item without any rotation.

There are three states of ScatterViewItem controls that you can assign varying looks. The following table includes a description of each state and the default look-and-feel provided by the Microsoft Surface SDK.

 

Enabled Disabled Activated
ScatterViewItem - Enabled state

The default state for a ScatterViewItem control. A user is not in touch with the item, but it is available for input.

Content is rendered in a frame with a small shadow on the stage.

ScatterViewItem - Disabled state

The ScatterViewItem control is not available for input. If a user touches the item, no action is taken.

The content is darker (grayed out).

ScatterViewItem - Activated state

A user touched the ScatterViewItem control. The item is brought to the front of the Z-order.

The item becomes brighter briefly, and the shadow beneath the item becomes slightly thicker.

ScatterViewItem and ScatterCanvas

If you examine the visual tree that the preceding code example makes by using a tool like Snoop, you may notice several interesting things:

ScatterView - Snoop view
  • The ScatterView control works only with ScatterViewItem elements as its content.

    The Image element that is specified in the XAML code is contained within a ScatterViewItem element. Whenever an application tries to add any other type of object to a ScatterView control, the ScatterView control automatically wraps that object in a ScatterViewItem control. Because ScatterViewItem is the element that translates touch input into manipulations, this automatic wrapping makes sure that an application can add any type of object to a ScatterView control to be manipulated. The ScatterViewItem control also includes several other visual elements that add the border, glow, and drop shadow effects.

    In many cases, like the earlier code example, this automatic behavior is helpful. However, to control how an element works within a ScatterView control, you might want to explicitly wrap the element in a ScatterViewItem control so that you can easily work with the properties and events of that item. For more information, see Changing a ScatterView Control's Properties.

  • The ScatterViewItem element is contained within an internal ScatterCanvas element.

    The ScatterView control automatically creates the ScatterCanvas element. The ScatterCanvas element lays out all of the ScatterViewItem elements within it, based on the properties that are set on the ScatterViewItem elements and properties of the ScatterView control. ScatterCanvas is designed to be used only as the ItemsPanel element of the ScatterView control. You cannot use ScatterCanvas outside of ScatterView, and you cannot use another type of panel as the ItemsPanel element for ScatterView.

Multitouch Behavior

When users are interacting with a ScatterViewItem control, multiple inputs are accepted. When a single touch is made to the control, the item slides around the stage so that the touch point remains at the same position on the item. When a second touch is made, the item rotates, translates, and scales to keep the touches on the same points within the item. When additional touches are made, the Microsoft Surface software performs an average and maintains the approximate same relative position of the touches and points.

Customization

You can customize ScatterView by populating the ScatterViewItem controls with multiple types of content. You can use almost any type of content, from media to collections of other Microsoft Surface SDK controls.

Design Recommendations

If you use ScatterView, we recommend that you adhere to the following guidelines:

  • Be smart about default orientation. Ensure that any user on any side of the screen can have some portion of content oriented towards them by default.

  • Enable passive learning through animations to show how users can use ScatterViewItem controls. Animated ScatterViewItem controls will draw a user's eye to them and give users strong clues about how they can interact with them. If users see some items move and rotate onto the stage, dragging and rotating those same items is an easy clue for most users.

  • Test for minimum and maximum sizes. Thoroughly test all content and controls that are held within ScatterView for visibility, legibility, line weight, and brightness at all possible sizes and angles. Typically, you will need to update some visual elements based on how they render in ScatterView or you might need to change the minimum and maximum sizes of the objects to maintain visual clarity.

  • Make sure that content is paramount. No matter how depth is rendered in ScatterView, it should be secondary to the content. If your testing reveals that depth effects are becoming as compelling as the content itself, you should reduce the depth-rendering complexity and let the content be the focus.

  • When an application needs to show more information in the activated state, consider enabling users to flip the item over and reveal the back side. The back side can offer additional information, and during the flip animation, the item can change its size to better accommodate the type or quantity of information. Additionally, on the back of the item, users should be able to flip the item back over. For example, when a user taps a music album, it flips over and reveals a SurfaceListBox control with the music tracks from that album. If a user taps the top of the list, the albums flips the back over. The Microsoft Surface SDK does not include this behavior, so you must build it.

  • If a ScatterViewItem object contains a complex visual tree, such as a Grid with multiple elements including images, consider using a bitmap cache to improve performance when the item is moved and scaled. For more information, see the "Performance" section in ScatterViewItem.

Did you find this information useful? Please send us your suggestions and comments.

© Microsoft Corporation. All rights reserved.
Show:
© 2014 Microsoft