Adding ScatterView Controls as Content

Surface 1.0 SP1

As some of the previous ScatterView code examples show, ScatterView controls can get cluttered with large numbers of items. To help solve this problem, you can use the SurfaceScrollViewer control. You can place any element inside a SurfaceScrollViewer control and, if that content is larger than the SurfaceScrollViewer itself, the SurfaceScrollViewer enables users to scroll around its content by using scrollbars and manipulations.

The following code example shows how to wrap a ScatterView control in a SurfaceScrollViewer control.

<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:SurfaceScrollViewer HorizontalScrollBarVisibility="Auto">
      <s:ScatterView x:Name="scatter" 
                     Height="2000" Width="2000" 
                     BorderBrush="Yellow" BorderThickness="3">
        <s:ScatterView.ItemTemplate>
          <DataTemplate>
            <Grid>
              <Image x:Name="image" Source="{Binding}"/>
            </Grid>
          </DataTemplate>
        </s:ScatterView.ItemTemplate>
      </s:ScatterView>
    </s:SurfaceScrollViewer>
</s:SurfaceWindow>
ScatterView - Inside SurfaceScrollViewer

The ScatterView control has been changed to have a thin yellow border and a fixed size of 2000 × 2000 (which is larger than the Microsoft Surface screen). The ScatterView control is now located within a SurfaceScrollViewer element that is set to display a horizontal scrollbar, if it is needed.

When you run this code example, users see scrollbars on the right and bottom sides of the screen. These scrollbars are fully responsive to contacts. Additionally, the initial size of each item is significantly larger than in previous code examples. The 20% constraint on initial ScatterViewItem sizes includes the entire size of the ScatterView control (which is now set to 2000 × 2000) rather than just the part of the ScatterView control that is visible on the Microsoft Surface screen.

Besides these visual changes, the example also has some interesting new behaviors. When a user drags a finger around the background of the ScatterView element, the SurfaceScrollViewer control recognizes this gesture as a panning manipulation and scrolls along with those fingers. When a user flicks the background, the SurfaceScrollViewer control also recognizes this gesture as a manipulation and scrolls a short distance and then slows to a stop. The distance that is scrolled by a flick manipulation is equivalent to the size of the SurfaceScrollViewer control. That is, if the SurfaceScrollViewer control is 800 units tall, a vertical flick creates scrolling for an additional 800 units after the user's finger is removed.

Community Additions

ADD
Show: