ZOIL Framework Documentation

Requirements

The current version of the ZOIL Framework references the Microsoft Surface 2.0 SDK. This will possibly be removed in future versions.

Introduction

The ZOIL Framework is actively developed by members of the Human-Computer Interaction Group at the University of Konstanz.

It’s based on theoretical foundations which can be found here: http://hci.uni-konstanz.de/permaedia

The ZOIL Namespace

If you want to use the components of the ZOIL Framework in XAML, you can specify the namespace as following:

xmlns:zoil="http://zoil.codeplex.com/schemas/2012"

This namespace prefix is used throughout the documentation.

The Information Landscape

The most important part of the ZOIL Framework is the Information Landscape, which is manifested in the class ZInformationLandscape.

The Information Landscape is basicly just a container which can be stretched (nearly) infinitely. It serves as a separate coordinate system for its children.

Using the ZInformationLandscape is as easy as this two lines:

<zoil:ZInformationLandscape x:Name="InformationLandscape">
    <Canvas/>
</zoil:ZInformationLandscape>

In order to get the behavior of a landscape, we use a canvas as child of the ZInformationLandscape. However you can use any panel you like
to layout your visuals.

Landscape Input Behavior

The ZInformationLandscape can be navigated using mouse, keyboard or the Microsoft Surface Device (more devices are to come). To activate one of these
behaviors, you can use any of the Input Behaviors which are: MouseInputBehavior, KeyboardInputBehavior, TouchInputBehavior.

Just drop any (or all) of these lines into the loaded event handler of your landscape (or window).

<zoil:ZInformationLandscape x:Name="InformationLandscape">
    <i:Interaction.Behaviors>
        <zoil:MouseInputBehavior />
        <zoil:TouchInputBehavior IsInertiaEnabled="False"/>
        <zoil:KeyboardInputBehavior />
    </i:Interaction.Behaviors>
    <Canvas/>
</zoil:ZInformationLandscape>

The interactivity namespace is required and must be added to the XAML root element.

xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"

Zoom Targets

If you want to zoom a child of the landscape full-screen using a single mouse click or a surface tap gesture, you can use the ZInformationLandscape.ZoomTarget Attached Property:

<Rectangle Fill="Red" Width="100" Height="100" Canvas.Top="500" Canvas.Left="500" zoil:ZInformationLandscape.ZoomTarget="True"/>

Zoom Margin

Sometimes it’s not useful to zoom a component full-screen as you want to preserve context. You can use the ZInformationLandscape.ZoomMargin Attached Property to set a margin for the component
that is used to prevent it from being zoomed full-screen.

<Rectangle Fill="Red" Width="100" Height="100" Canvas.Top="500" Canvas.Left="500" zoil:ZInformationLandscape.ZoomTarget="True" zoil:ZInformationLandscape.ZoomMargin="50"/>

Zoom Modifier

Every single visual of a component will be scaled the same amount, when the control is zoomed onto. If you want to define special zoom behavior for individual parts of a control, you can use one ore several of the zoom modifiers.
Every zoom modifier hooks itself into the zoom process and modifies the value of the scale factor for this component individually.

There are several Zoom Modifiers which you can use alone using the ZoomModifier Attached Property or in groups using the ZoomModifierGroup Attached Property

Scale Modifier

The scale modifier modifies the scaling behavior of Transform properties (LayoutTransform or RenderTransform). By specifying a value for the two
Properties WidthModifier and HeightModifier you decide which scale factor you want to apply for that render transform. So if you chose 2 as Modifier
the control will be scaled twice as fast, or if you chose 0 as modifier the control won’t be scaled at all.

<Rectangle Fill="Red" Width="100" Height="100" Canvas.Top="500" Canvas.Left="500" zoil:ZInformationLandscape.ZoomTarget="True" zoil:ZInformationLandscape.ZoomMargin="50">
   <zoil:ZInformationLandscape.ZoomModifier>
      <zoil:ScaleModifier Property="UIElement.RenderTransform" WidthModifier="0" HeightModifier="0"/>
   </zoil:ZInformationLandscape.ZoomModifier>
</Rectangle>

Thickness Modifier

The thickness modifier is used for all properties that are of type Thickness, especially the BorderThickness property of the Border panel. By specifying the value 0
for the modifier property you can prevent the border from being scaled, for example:

<Border Canvas.Top="500" Canvas.Left="500" BorderBrush="Green" BorderThickness="10.0">
  <zoil:ZInformationLandscape.ZoomModifier>
    <zoil:ThicknessModifier Property="Border.BorderThickness" Modifier="0"/>
  </zoil:ZInformationLandscape.ZoomModifier>
  <Rectangle Fill="Red" Width="100" Height="100"/>
</Border>

Corner Radius Modifier

Similar to the thickness modifier the corner radius modifier modifies the value of all properties of type CornerRadius, especially the CornerRadius property of the Border panel.
By specifying the value 0 for the modifier property you can prevent the corner radius from being scaled, for example:

<Border Canvas.Top="500" Canvas.Left="500" BorderBrush="Green" BorderThickness="10.0" CornerRadius="10">
  <zoil:ZInformationLandscape.ZoomModifier>
    <zoil:CornerRadiusModifier Property="Border.CornerRadius" Modifier="0"/>
  </zoil:ZInformationLandscape.ZoomModifier>
  <Rectangle Fill="Red" Width="100" Height="100"/>
</Border>

Zoom Modifier Group

If you want to modify several properties of a control, you can use the ZoomModifierGroup Attached Property, which contains a collection of zoom modifiers:

<Border Canvas.Top="500" Canvas.Left="500" BorderBrush="Green" BorderThickness="10.0" CornerRadius="10">
  <zoil:ZInformationLandscape.ZoomModifierGroup>
    <zoil:ZoomModifierGroup>
      <zoil:ThicknessModifier Property="Border.BorderThickness" Modifier="0"/>
      <zoil:CornerRadiusModifier Property="Border.CornerRadius" Modifier="0"/>
    </zoil:ZoomModifierGroup>
  </zoil:ZInformationLandscape.ZoomModifierGroup>
  <Rectangle Fill="Red" Width="100" Height="100"/>
</Border>

Semantic Zooming

The power of the ZOIL Framework lies in its semantic zoom feature. It allows the representation of one object to be changed during zooming (using a smooth cross-fade animation).

For this to work, the developer needs to implement several zoom layers (called ZComponentFrame) and define a minimum width (WidthNeeded property) on each to inform the
semantic zoom algorithm, when to switch representations.

At the moment not every visual object is capable of semantic zoom. Your control needs to derive from the class ZComponent in order to use the semantic zoom feature. In Visual Studio
add a UserControl to your project then change it to derive from ZComponent (in .cs as well as in .xaml).

Moreover, the ZComponentFrames allows to set a custom transition between two frames. The FrameTransition dependency property receives an AnimationTimeline. At the moment, the OpacityProperty of each frame will be changed only according to the from and to values of the animation. You can set the duration of the animation to 00:00:00.0 if you need immediate switches between the frames.

<zoil:ZComponent x:Class="Sample.BasicConcepts.MySemanticZoomControl"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
                 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
                 mc:Ignorable="d" 
                 xmlns:zoil="http://zoil.codeplex.com/schemas/2012">

    <zoil:ZComponentFrames.FrameTransition>
        <DoubleAnimation From="1.0" To="0.0" Duration="00:00:00.5" FillBehavior="Stop" />
    </zoil:ZComponentFrames.FrameTransition>

    <zoil:ZComponentFrames Background="Aquamarine">
        <zoil:ZComponentFrame WidthNeeded="0">
            <Rectangle Fill="Black" Width="300" Height="300" />
        </zoil:ZComponentFrame>
        <zoil:ZComponentFrame WidthNeeded="200">
            <Rectangle Fill="Green" Width="300" Height="300" />
        </zoil:ZComponentFrame>
        <zoil:ZComponentFrame WidthNeeded="300">
            <Rectangle Fill="RosyBrown" Width="300" Height="300" />
        </zoil:ZComponentFrame>
    </zoil:ZComponentFrames>

</zoil:ZComponent>

Important Notes:

Make sure that every child of a ZComponentFrame has a Width and a Height set, otherwise you won’t see that zoom layer later.
Since every ZComponentFrame is a Viewbox you can specify whatever size fits best in order to layout the layer properly. It will automatically
be scaled to the right size when put into a ZInformationLandscape.

Object Manipulation Behavior

Each ZComponent can define a set of possible manipulations. The manipulations are independent from input devices. That means, the manipulation behavior is set once and it will work for all available input devices such as mouse, touch or keyboard.

<zoil:ZComponent x:Class="Sample.BasicConcepts.MySemanticZoomControl"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 xmlns:zoil="http://zoil.codeplex.com/schemas/2012"
                 xmlns:local="clr-namespace:Sample.PhotoBrowser.Components"
                 xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity">
    <i:Interaction.Behaviors>
        <zoil:ObjectManipulationBehavior IsDraggable="True"
                                         IsResizable="True"
                                         IsRotatable="True"
                                         IsInertiaEnabled="True" />
    </i:Interaction.Behaviors>
</zoil:ZComponent>