• Article

Image

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Represents an image that is displayed.

<Image .../>

Properties

Canvas.Left, Canvas.Top, Canvas.ZIndex, Clip, Cursor, DownloadProgress (Image), Effect (Silverlight 3), Grid.Column (Silverlight 2), Grid.ColumnSpan (Silverlight 2), Grid.Row (Silverlight 2), Grid.RowSpan (Silverlight 2), Height (UIElement), HorizontalAlignment (Silverlight 2), Margin (Silverlight 2), MaxHeight (Silverlight 2), MaxWidth (Silverlight 2), MinHeight (Silverlight 2), MinWidth (Silverlight 2), Name (DependencyObject), Opacity (UIElement), OpacityMask, Projection (Silverlight 3), RenderTransform, RenderTransformOrigin, Resources, Source (Image), Stretch (Image), Style (Silverlight 2), Tag, Triggers, VerticalAlignment (Silverlight 2), Visibility, Width (UIElement)

Managed Equivalent

Image

Remarks

You can use the Source property to reference images in the JPEG and PNG file formats.

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

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

  • Indexed color—1-bit, 4-bit, or 8-bit color depth (per channel).

  • TrueColor: 24-bit color depth, or 32-bit color depth (per channel) for TrueColor plus alpha.

NoteNote:

Silverlight does not support gray scale (with or without alpha) or 64-bit TrueColor.

Height or Width for an image may not be valid until ImageOpened is raised, because the image takes a short time to decode the source.

Example

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

<Canvas
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  Background="Wheat">

  <!-- Photo of Cat. -->
  <Image
    Source="CatInTheSnow.png"
    Canvas.Left="30" Canvas.Top="30" />

  <!-- Caption of the photo consists of shadow text and image text. -->
  <!-- Offset the shadow text by using a TranslateTransform. -->
  <TextBlock
    Text="Cat'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="Cat's Day in the Snow"
    Canvas.Left="34" Canvas.Top="336"
    FontFamily="Verdana"
    FontWeight="Bold"
    FontSize="30">
    <TextBlock.Foreground>
      <ImageBrush ImageSource="CatInTheSnow.png" />
    </TextBlock.Foreground>
  </TextBlock>

</Canvas>

See Also

Reference

ImageBrush

MediaElement