Image Object

Represents an image which is displayed.

XAML
<Image .../>
Scripting
To create an object using scripting, see CreateFromXAML.

Properties

Canvas.Left, Canvas.Top, Canvas.ZIndex, Clip, Cursor, DownloadProgress, Height, Name, Opacity, OpacityMask, RenderTransform, RenderTransformOrigin, Resources, Source, Stretch, Tag, Triggers, Width

Methods

AddEventListener, CaptureMouse, Equals, FindName, GetHost, GetParent, GetValue, ReleaseMouseCapture, RemoveEventListener, SetSourceSetValue

Events

Loaded, DownloadProgressChanged, MouseEnter, MouseLeave, MouseLeftButtonDown, MouseLeftButtonUp, MouseMove, ImageFailed

Remarks

The Source property can be used to reference images in the JPEG and PNG file formats.

If the Source property is set to an invalid format, or is specified to a URI that cannot be resolved, then the ImageFailed event is raised. Also, an error is thrown, reporting a failure in SetValue for Source.

PNG Color Depth

Silverlight 1.0 does not support all possible color depths that are included in the PNG specification. The following are the PNG color depths supported in Silverlight 1.0.:

  • Indexed color: 1, 4, or 8 bit color depth (per channel).
  • Truecolor: 24 bit color depth, or 32 bit color depth (per channel) for truecolor plus alpha.

Notably, gray scale (with or without alpha), and 64-bit truecolor, are not supported in Silverlight 1.0.

Examples

The following XAML example shows how to set the Source property of the Image object to a PNG file. In addition, the same PNG image file is used as an ImageBrush for the TextBlock that is used to display a photo caption:

XAML
<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  Background="Wheat">
  <!-- Photo of Coco. -->
  <Image
    Source="CocoInTheSnow.png"
    Canvas.Left="30" Canvas.Top="30" />
  <!-- Caption of the photo consists of shadow text and image text. -->
  <!-- Offset the shadow text using a TranslateTransform. -->
  <TextBlock
    Text="Coco's Day in the Snow"
    Canvas.Left="34" Canvas.Top="336"
    FontFamily="Verdana"
    FontWeight="Bold"
    FontSize="30">
    <TextBlock.RenderTransform>
      <TranslateTransform X="2" Y="2" />
    </TextBlock.RenderTransform>
  </TextBlock>
  <!-- Use an ImageBrush for the fill of the TextBlock. -->
  <TextBlock
    Text="Coco's Day in the Snow"
    Canvas.Left="34" Canvas.Top="336"
    FontFamily="Verdana"
    FontWeight="Bold"
    FontSize="30">
    <TextBlock.Foreground>
      <ImageBrush ImageSource="CocoInTheSnow.png" />
    </TextBlock.Foreground>
  </TextBlock>
</Canvas>

The following screenshot shows the results of the previous XAML example.

An image file used by Image and ImageBrush objects

An image file used by Image and ImageBrush objects

See Also

Imaging Overview
ImageBrush
MediaElement