VisualDataImage
Description
The VisualDataImage is the data template version (see VisualDataTemplate) of the VisualImage (see VisualImage). It can be used inside a VisualDataTemplate to display an image from both a URL or base64 encoded image inside the data. The VisualDataImage can only be used inside a VisualDataTemplate container.
Attributes
- BoxSize [Size]: The bounding box of the image. Default: no bounding box.
- BufferFilter [string]: The filter to apply to the input data to find the base64 encoded image file.
- BufferInput [string input]: An input that will contain the image base64 data.
- Filter [string]: The filter selects the item(s) you want to output. For example: '.rss.channel.items.title' will give all the titles in a data object that contains an RSS feed.
- FromCache [integer]: The number of seconds that a cached version of the image is valid. If a cached version is found that is younger than this amount, the cached version will be used. Default: 0 (no cached version allowed).
- ImageBuffer [base64]: The base64 encoded image file. Please note that it is 'write only'.
- ImageLoaded [event]: Event raised when the image has finished loading.
- Name [string]: The name of the block.
- ShowBox [boolean]: Whether or not the bounding box should be shown (when defined). Default: true.
- SizeMode [Default|SizeToBox|StretchToBox]: the way the image will size. Both SizeToBox and StretchToBox are only relevant when a BoxSize has been defined. Default: Default.
- Style [Style]: The style that needs to be applied to the block.
- TabStop [boolean]: Whether or not the item can receive focus. Default: true.
- Transparent [boolean]: Whether or not the color #FF00FF should be interpreted as transparent. Default: false.
Example
1 <!--
2 This example will perform a slideshow from the pictures of the 'photo highlight on Yahoo! News Photos'. Images will be sized to a 130 by 130 pixels box and remain in cache for an hour. This assures the images are not reloaded when the slideshow wraps.
3 -->
4 <DataReader Name="reader" Url="http://rss.news.yahoo.com/imgrss/441"/>
5 <DataFilter Name="filter" Input="reader" Filter=".rss.channel.item"/>
6
7 <TimerTrigger Name="timer" Interval="3" Enabled="true"/>
8 <VisualPage>
9 <VisualContent>
10 <VisualDataTemplate ViewMode="Details"
11 Input="filter"
12 NextTrigger="timer">
13 <VisualDataImage Filter=".item.media:content.url"
14 BoxSize="130,130"
15 SizeMode="SizeToBox"
16 FromCache="3600"/>
17 <VisualDataText Filter=".item.title" MultiLine="true"/>
18 </VisualDataTemplate>
19 </VisualContent>
20 </VisualPage>
User comments
In order to maximize performance, use the BoxSize and ShowBox="false" properties when you know the size of the image on beforehand. This will prevent complicated calculations when you have a lot of VisualDataImages.
Leave a comment
You need to be logged in to post a comment.

August 12th, 2008 at 9:55 a.m.