SilverlightOnly Show your photos with hotspots in style Home   Contents

sloVH XML File Format

A sloVH XML file (example) contains information about one photo image and all associated hotspots. It uses the XAML syntax, which makes it Expression Blend compatible.
Here below are documented the top-level nodes of the XML format. You can open and edit XML files with a text editor or preferably with an XML editor like the free XML Notepad. The Editor page has also a simple XML viewer/editor.
The overall structure of the file is:

NodeRequiredExample
<UserControl> yes <UserControl xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vlib="clr-namespace:sloVlib;assembly=sloVlib"...>
      <vlib:Viewer> no <vlib:Viewer BaseUrl="Image=http://mysite.net/" Version="1.3"/>
      <Image Name="sloImage"> yes <Image Name="sloImage" Source="Image=http://mysite.net/phot9.jpg" Tag="Title=Hotspot Demo,Zoom=0.5"/>
      <Canvas Name="sloHotspotLayer">no <Canvas.Resources><Style x:Key="RndBtn"...> <Storyboard x:Key="r4" Duration="0:0:2">...</Canvas.Resources>
               <vlib:Hotspot> no<vlib:Hotspot Name="lamp" Canvas.Left="45" EnterSound="xml/blink.mp3"> <Image Name="lamp1" Source="http://mysite.net/pin3.png"/>...</vlib:Hotspot>
      <Canvas Name="sloCommandLayer">no <Canvas.Resources><Style x:Key="RndBtn"...> <Storyboard x:Key="r4" Duration="0:0:2">...</Canvas.Resources>
               <vlib:Hotspot> no<vlib:Hotspot Name="menu" Canvas.Left="405" EnterSound="xml/mew.mp3"> <Image Name="m1" Source="http://mysite.net/menu.png"/>...</vlib:Hotspot>

Root node <UserControl> has the following required attributes:

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vlib="clr-namespace:sloVlib;assembly=sloVlib" - used for hotspots and triggers

Image node sloImage attributes are:

Source - URL of the photo panorama image
Tag - a string of panorama parameters, as explained here. The string could be empty when the XAML content is saved inside the JPEG file.

Node <vlib:Viewer> is for Viewer customizable settings. The following attributes are currently supported:


BaseUrl - absolute URL as a base for relative references in Image, MediaElement, HyperlinkButton, EnterSound and Click. Absolute URL references are not affected. If omitted, the path URL of the XML file is taken as base. If set, it should precede all other attributes and Viewer node should be positioned before the others.
DataFile - URL of xml file with hotspot data (example). The file contains a collection of data sets differenciated by node name. The node name is referenced in hotspots as DataItemName. This scenario allows multiple sets of hotspots to be displayed at once.
IsDataReadOnLoad - load the data for all hotspots at start. Otherwise data is filled on user action for each hotspot. Default is false.
DefaultEnterSound - URL of sound file to play when mouse enters hotspots.
 Hotspot Editor settings:
Version - version number of Editor, automatically added.
edIsDeleteKeyEnabled - "true" enables keyboard key "Delete" in Edit Mode, default is "false".
edTextStyle - user can define OnEnter text for each hotspot. This is the default style name for the text.
edShapeStyle - default style name for ellipse and rectangle hotspots.
 Optional custom tempates used by Hotspot Editor:
<vlib:Hotspot Name="defaultSimple"> - default hotspot template.
<vlib:Hotspot Name="defaultContour"> - contour hotspot template: line width/color, fill color/opacity, optional marker, etc.
<vlib:Hotspot Name="defaultImage"> - image hotspot template, contains either <Image> or <MediaElement> control.

Canvas nodes <sloHotspotLayer> and <sloCommandLayer> contain all the hotspots.

Each can include a <Canvas.Resources> sub-section with styles and storyboards. Every Style and Storyboard should have a key defined in x:Key, otherwise they are ignored. You can apply a Storyboard to any hotspot element with a defined Name attribute.
sloHotspotLayer hosts hotspots positioned on the panorama image.
sloCommandLayer consist of hotspots not related to the panorama image. They could be arranged to form thumbnail image strips for navigation, control sloHotspotLayer visibility, etc. Command hotspots cannot be type 'contour' or scalable. When a new XML is loaded and a sloCommandLayer is found, the current one is replaced, otherwise it remains active. You can also remove the command layer from the next image load by adding Tag='DoNotKeep'.
Both sections contain one or more <vlib:Hotspot> nodes, described below.

Node <vlib:Hotspot> contains the visible elements of a hotspot. It's attributes are:

Name - required. Other FrameworkElement properties like Style,Opacity,etc. are also supported.
IsCommand - true or false, default is "false". If true, the hotspot is placed on the CommandLayer.
IsScalable - true or false, default is "false"
ContourPath - name of the contour Path element inside. This attribute defines a contour hotspot.
ScaleOnly - if same as ContourPath, this is the only scalable element inside the hotspot. Takes precedence over IsScalable.
DataItemName - node name from XML data file (defined in Viewer node). Used only when multiple data sets are present.
DataID - references DataID key of data item in XML data file. The data item found becomes DataContext for the hotspot.
EnterSound - URL of sound file of type MP3, WAV, WMA or ACC (learn more)
EnterAnim - action to take when mouse enters the hotspot area. Format is [storyboard]:[name] or [storyboard] or [action]:[name].
LeaveAnim - action to take when mouse leaves the hotspot area. Format is [storyboard]:[name] or [storyboard] or [action]:[name].
ClickType - three types are available: "web", "xml" and "anim" (see below)
Click - navigation target when hotspot is clicked. Could be one of the following:
    when ClickType = "web" - URL to a web page,
    when ClickType = "xml" - URL to another sloVH XML file,
    when ClickType = "anim" - Storyboard animation(s) or action(s),
There are some predefined actions for EnterAnim, LeaveAnim or Click (when ClickType="anim"):
    visible - displays collapsed item(s)
    collapse - collapses displayed item(s)
    toggle - toggle visibility of item(s)
    play - plays a video or sound from a MediaElement
Action keywords are followed by one or more control names separated by a comma, like EnterAnim="visible:txt1,img1". Actions and storyboards could be chained together with separator semi-colon, like EnterAnim="visible:txt1,img1;play:tune1".
Any type of XAML control can be included in vlib:Hotspot. The control Name attribute is required when Style is specified as StaticResource.


XAML custom enhancements provided by the sloVlib library
  1. Certain predefined triggers are available. Example:
        <i:EventTrigger SourceName="buttonPause" EventName="Click">
            <vlib:MediaElementAction MediaOption="Pause" />
        </i:EventTrigger>
    For more examples of trigger usage see demo file.
    OptionsAddnl AttributesDescription
        MediaElementAction   MediaOption
    Play, Stop, Pause, Rewind, RewindAndPlay, Hide, PauseAndHide, ToggleAndHide, ToggleAndPlay, Mute, Unmute, Load noneFor media control. "Toggle" switches the MediaElement visibility.
        FEaction   FEoption - for any FrameworkElement
    ToggleScaleLowScale, HighScale, Durationtoggle scale max to min with duration
    StretchValue = 'height', 'width' or 'both'stretch to maximal viewable limits
    Show, Hide, Togglenonechange visibility
    ShowZoom, HideZoom, ToggleZoomFrom, To, Durationchange visibility with scaling
    Scale, Opacity, ColorFrom, To, Durationgradual change of value

     
  2. There is also one custom MediaElement video effect - the ChromaEffect, which replaces one color(ColorKey) with transparency. Usage is:
        <MediaElement.Effect>
            <vlib:ChromaEffect ColorKey="#FF03257B" Tolerance="0.5" />
        </MediaElement.Effect>