Export (0) Print
Expand All

Changing a ScatterView Control's Properties

Surface 1.0 SP1

You can use a basic implementation of ScatterView in your Microsoft Surface application, similar to the basic basic ScatterView code example. You can extend this example by changing various ScatterView properties, including constraining and limiting the manipulations on a ScatterView control or explicitly setting the position or rendering of a ScatterView control.

Constraining Manipulations

The image that is added to the ScatterView control in the basic ScatterView code example is quite large, but the ScatterView control automatically constrains its default size. You can also set the size constraints on ScatterViewItem elements by setting any combination of the MinHeight, MinWidth, MaxHeight, and MaxWidth properties.

You could also modify the basic code example to make sure that the image is never smaller than 200 units wide and never larger than 600 units high by explicitly wrapping the image (Image) in a ScatterViewItem element and setting the size properties. For example, consider the following updated code 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>
      <s:ScatterViewItem MinWidth="200" MaxHeight="600">
        <Image Source="Desert Landscape.jpg"/>
      </s:ScatterViewItem>
    </s:ScatterView>

</s:SurfaceWindow>

Limiting Manipulations

You can also use ScatterViewItem properties to prevent users from resizing or rotating the ScatterViewItem element. When ScatterViewItem elements represent physical objects (such as puzzle pieces, playing cards, or album covers), you might want to enable users to rotate the objects, but not resize them. You can set up this scenario by setting the CanRotate and CanScale properties, as the following code example shows.

<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>
      <s:ScatterViewItem CanRotate="true" CanScale="false">
        <Image Source="Desert Landscape.jpg"/>
      </s:ScatterViewItem>
    </s:ScatterView>

</s:SurfaceWindow>

Setting Explicit Positions

The previous sections have shown how you can assign default values to the read-only ActualHeight, ActualWidth, ActualCenter, and ActualOrientation properties on a ScatterViewItem element and how these properties are dynamically updated when users manipulate the item.

You can also use code or XAML to configure the location, size, and orientation of ScatterViewItem elements by setting the Height, Width, Center, and Orientation properties of the ScatterViewItem control, as the following update version of the basic ScatterView code example shows.

<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>
      <s:ScatterViewItem Width="200" Height="200" Center="100,100" Orientation="0">
        <Image Source="Desert Landscape.jpg" Stretch="Fill"/>
      </s:ScatterViewItem>
    </s:ScatterView>

</s:SurfaceWindow>
70f55d5d-965e-4e13-9be4-55154aab7b60

The image is explicitly wrapped in a ScatterViewItem element in which the example sets the initial positioning properties. Additionally, the example sets the Stretch property on the image so that it fits the square size of the ScatterViewItem control.

When you run this code example, the image now always appears in the upper-left corner of the screen with a height and width of 200 and no rotation. However, you can still fully manipulate the image. Those manipulations alter the actual set of properties and the assigned properties. Changes to the assigned properties are immediately replicated on the actual properties. That is, you can set the assigned properties in XAML when an item is created, and you can set them at any time through code, triggers, and even animation.

Other than the actual properties being read-only, the only difference between the actual properties and the assigned properties is that the actual properties are given default values, as previously described, if the assigned properties are not set when the item is placed in a ScatterView control. As a result, when you try to query the position of an item, you should typically use the actual properties.

 

  Actual properties Assigned properties

Names

ActualCenter

ActualHeight

ActualWidth

ActualOrientation

Center

Height

Width

Orientation

When a user manipulates the control

The property is updated to match the result of the manipulation.

The property is updated to match the result of the manipulation.

When the property is set by code, XAML, or animation

The property is read-only; it cannot be set.

The actual property is updated to match the new value and the item is redrawn on the screen.

When an item is added to a ScatterView control

The property is set to match the assigned property or, if the assigned property is not set, set to a default value.

The property is not changed.

Comparison of actual and assigned properties of ScatterViewItem

You can also explicitly set only some properties and let other properties take on default values. The following code example sets the Center property to the same point but uses the default value for other properties.

<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>
      <s:ScatterViewItem Center="512,384" BorderBrush="Brown" BorderThickness="3">
        <Image Source="Desert Landscape.jpg"/>
      </s:ScatterViewItem>
      <s:ScatterViewItem Center="512,384" BorderBrush="Brown" BorderThickness="3">
        <Image Source="Desert Landscape.jpg"/>
      </s:ScatterViewItem>
      <s:ScatterViewItem Center="512,384" BorderBrush="Brown" BorderThickness="3">
        <Image Source="Desert Landscape.jpg"/>
      </s:ScatterViewItem>
      <s:ScatterViewItem Center="512,384" BorderBrush="Brown" BorderThickness="3">
        <Image Source="Desert Landscape.jpg"/>
      </s:ScatterViewItem>
      <s:ScatterViewItem Center="512,384" BorderBrush="Brown" BorderThickness="3">
        <Image Source="Desert Landscape.jpg"/>
      </s:ScatterViewItem>
      <!-- ... -->
      <s:ScatterViewItem Center="512,384" BorderBrush="Brown" BorderThickness="3">
        <Image Source="Desert Landscape.jpg"/>
      </s:ScatterViewItem>
    </s:ScatterView>

</s:SurfaceWindow>
ScatterView - Items with same Center

Just like the basic ScatterView code example where no properties were set, the ActualWidth and ActualHeight properties default to 20% of the ScatterView control and the ActualOrientation property defaults to a random value. Additionally, this example sets the BorderBrush and BorderThickness properties on each ScatterViewItem element so the edges of overlapping items are clearly visible.

The preceding XAML code example works, but it is verbose and makes it difficult to apply changes across all items. For example, suppose that you want to change the border color from brown to white. You could update the XAML for every ScatterViewItem control. Or, you could take advantage of WPF support for control customization by defining an ItemContainerStyle style.

<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>
      <s:ScatterView.ItemContainerStyle>
        <Style TargetType="{x:Type s:ScatterViewItem}">
          <Setter Property="Center" Value="512,384"/>
          <Setter Property="BorderBrush" Value="White"/>
          <Setter Property="BorderThickness" Value="3"/>
        </Style>
      </s:ScatterView.ItemContainerStyle>
      <Image Source="Desert Landscape.jpg"/>
      <Image Source="Desert Landscape.jpg"/>
      <Image Source="Desert Landscape.jpg"/>
      <Image Source="Desert Landscape.jpg"/>
      <Image Source="Desert Landscape.jpg"/>
      <!-- ... -->
      <Image Source="Desert Landscape.jpg"/>
    </s:ScatterView>

</s:SurfaceWindow>
Using ItemContainerStyle to specify properties for

ZIndex and RenderTransform

You can programmatically set the basic positioning properties, but these properties are not the only factors in how and where an item appears. The ZIndex and RenderTransform properties also help determine the location and appearance. However, these properties are often set on items by the ScatterView element itself.

  • Your application can explicitly set the ZIndex property of an item by calling the static SetZIndex method. The ScatterView element sets the ZIndex property of items (clearing any values that your application explicitly set) when the item is added to the ScatterView control, when the item is activated, and when the item is deactivated.

  • The RenderTransform property of each ScatterViewItem element reflects the result of certain manipulations. Applications should never adjust this property directly. Instead, applications should use the Center and Orientation properties.

Community Additions

ADD
Show:
© 2014 Microsoft