ImageView allows you to display an image. It can display an image from an internet URL, or from a local image file under App.UI\Resources folder.
<ImageView Id="MyImage" Path="Images/Something.png" />
<ImageView Id="MyImage" Path="http://mywebsite.com/images/something.png" />
<ImageView Id="MyImage" ImageData="@GetSomeByteArray()" />
You can set the stretch property to specify how the image should be rendered.
The options are:
Also in CSS you can set it using background-size.
background-size: contain; /* ----> Equivalent to Fit*/
background-size: cover; /* ----> Equivalent to Fill*/
background-size: initial; /* ----> Equivalent to OriginalRatio*/
background-size: auto; /* ----> Equivalent to AspectFill*/
When the stretch is Fit (default) or None, then you can specify where in the image view box the actual image should be aligned.
You can also set it via CSS using the background-position attribute:
Stylesheet has a boolean property named Ignored, which is false by default. When set to true it works the same as "display: none" in HTML. It means that the element will not only be invisible, but also it won't occupy space on the screen.
View has a boolean property named Enabled, which is true by default. When set to false the object will not respond to UI gesture events. But it will remain visible. Also, its PseudoCssState will be set to "disabled" which allows you to specify a visual style for it in CSS.
<ImageView BackgroundImageStretch="OriginalRatio" BackgroundImagePath="Images/VS.jpg" Enabled="false" />
<ImageView BackgroundImageStretch="OriginalRatio" BackgroundImagePath="Images/VS.jpg" Visible="false"/>
<ImageView BackgroundImageStretch="OriginalRatio" BackgroundImagePath="Images/VS.jpg" Ignored="true"/>
<ImageView BackgroundImageStretch="OriginalRatio" BackgroundImagePath="Images/VS.jpg"/>
Loading and displaying images (even from the local disk) is time-consuming and can slow down the page render time.
Zebble offers the following to solve this problem:
To get the best result, you should include all decorative app images related to the design of the app inside the Icons folder. Alternatively, you can register additional folders to be treated like the Icons folder for immediate loading and caching in memory using the following:
Alternatively you can add a specific image file or URL to be cached:
Instead of using an ImageView tag you can of course use the backgroundImagePath property of any other view type. In that scenario if you need to cache the background image, then you can use the following attribute:
When it's a URL, then:
Since memory management is fierce on mobile devices (especially iOS devices) all the lazy loading you can implement will give your app a better memory footprint. You can use IsLazyLoading property to increase the performance of image loading.
It is recemonded that set it to True always.
You can control the position of ImageView by setting Style.X and Style.Y properties:
You can set the image file with Path property.
You can see some information about rotation in Zebble here: http://zebble.net/docs/rotation-in-zebble
You can see some information about Margin & Padding in Zebble here: http://zebble.net/docs/margin-padding