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.
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="HelloScatterView.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="HelloScatterView"> <s:SurfaceWindow.Resources> <ImageBrush x:Key="WindowBackground" Stretch="None" Opacity="0.6" ImageSource="pack://application:,,,/Resources/WindowBackground.jpg"/> </s:SurfaceWindow.Resources> <s:ScatterView> <Image Source="Desert Landscape.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 into an active state and you can move, rotate, or resize it by using gestures. When you no longer touch the image, it animates back into an inactive state and waits for further interaction.
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.
ScatterViewItem and ScatterCanvas
If you examine the visual tree that the preceding code example makes by using a tool like Snoop, you can notice several interesting things:
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 contact 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 a 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.
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 size 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.