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
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="http://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
See Also
Imaging Overview
ImageBrush
MediaElement