Hotspot Xml File

The Hotspot Xml file contains information about one panorama image with all associated hotspots. It uses the XAML syntax, which makes it Expression Blend compatible. See file example.
You can open and edit XAML(Xml) files with a text editor, an XAML editor like Kaxaml, XamlPad, Exp.Blend, or an XML editor (XML Notepad).
You may also be interested in XamlExport - a free plug-in for Adobe Illustrator to export files in XAML format.
Our Editor page has a simple, text-based XAML viewer/editor - see button "Edit Xml".
Listed below are the top-level nodes of the Hotspot Xml file format:

Node	Required	Example
<UserControl>	yes	<UserControl xmlns="http://schemas.microsoft.com/client/2007"...><UserControl.Resources ...>
<Grid>	yes	<Grid>
<vlib:Viewer>	no	<vlib:Viewer BaseUrl="http://mysite.net/media/" Version="1.6" Parameters="Title=Hotspot Demo,Zoom=0.5" />
<Image Name="sloImage">	yes	<Image Name="sloImage" Source="http://mysite.net/phot9.jpg" />
<Canvas Name="sloHotspotLayer">	no	<Canvas Name="sloHotspotLayer"><Canvas.Resources><Style x:Key="RndBtn"> ... </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 Name="sloHotspotLayer"><Canvas.Resources> <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>
<vlib:include>	no	<vlib:include file="http://mysite.net/cmdlayer.xml" />
<vlib:Plugin>	no	<vlib:Plugin Url="http://mysite.net/gadget.dll" />

Root node <UserControl> has the following required attributes:

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

Node <vlib:Viewer> is for 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.
Parameters - a string of panorama parameters, as explained here. The string could be empty when the XAML content is saved inside a JPEG file.
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.
DefaultEnterSound - URL of sound file to play when mouse enters hotspots.

Image node "sloImage" has one attribute:

Source - URL of the photo panorama image

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.
Optional custom styles used by Hotspot Editor:
<Style x:Key="defaultHotspotStyle" TargetType="ContentControl"> - default hotspot style
<Style x:Key="defaultContourPathStyle" TargetType="Path"> - contour path style: line width/color, fill color/opacity
<Style x:Key="defaultShapeStyle" TargetType="Shape"> - default style name for ellipse and rectangle hotspots

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.
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"
IsDependent - true or false, default is "false". Hotspot's visibility is dependent on another hotspot.
ScaleOnly - name of scalable element inside a hotspot. This attribute defines a contour hotspot. Partly scalable in 2D only, in 3D it is equivalent to IsScalable=true.
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 Hotspot 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.

Node <vlib:include> let you include repetitive XAML code from external file.

All include files are loaded before parsing. Nested includes are not supported. Attributes are:
file - required URL of XAML file to include.
type - automatically added for 'defaultHotspotStyle' includes.

Node <vlib:Plugin> let you embed custom UserControls (XAML and code).

This VS10 project is an example of a simple clock that can be used inside a panorama. The Plugin object exposes event 'Filled', which is raised after the content has been loaded. Attribute is:
Url - required URL of DLL file.

XAML custom enhancements provided by library sloVlib
Predefined EventTriggers are available. EventTriggers are very useful to control execution from inside your XAML code. Example:
<i:EventTrigger SourceName="buttonPause" EventName="Click">
<vlib:MediaElementAction MediaOption="Pause" />
</i:EventTrigger>
Many examples of trigger usage could be found in demo files Cave, Wallace and Guadeloupe.
Attribute 'Value' can be used with all options, it defines the name of another control as target.

Options	Attributes	Description
MediaElementAction MediaOption
Play, Stop, Pause, Rewind, RewindAndPlay, Hide, PauseAndHide, ToggleAndHide, ToggleAndPlay, Mute, Unmute, Load	none	For media control. "Toggle" switches the MediaElement visibility.
FEaction FEoption - for any FrameworkElement
Show, Hide, Toggle	none	change visibility
Stretch	From = 'height', 'width' or 'both'	stretch to maximal viewable limits
ShowZoom, HideZoom, ToggleZoom	From, To, Duration	change visibility with scaling
Scale, Opacity, Color	From, To, Duration	gradual change of value
DataContext, CopyDataContext	From	DataContext from string
ScreenCenter, AdjustToSlcSize, HideSlCtrl, ToggleFullScreen, ExitFullScreen, GridFill, SetText, RunStoryB	From, To	miscellaneous, see demo Xml files

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>