Cómo: Usar el elemento de imagen
Actualización: noviembre 2007
En este ejemplo se muestra cómo incluir imágenes en una aplicación utilizando el elemento Image.
Ejemplo
En el ejemplo siguiente se muestra cómo representar una imagen de 200 píxeles de ancho. En este ejemplo Lenguaje de marcado de aplicaciones extensible (XAML), se utilizan la sintaxis de atributo y la sintaxis de etiquetas de propiedad para definir la imagen. Para obtener más información sobre la sintaxis de atributo y la sintaxis de propiedad, consulte Información general sobre las propiedades de dependencia. BitmapImage se utiliza para definir los datos de origen de la imagen y se define explícitamente para el ejemplo de sintaxis de etiquetas de propiedad. Además, la propiedad DecodePixelWidth de BitmapImage se establece en el mismo ancho que la propiedad Width de Image. Esto se hace para asegurarse de utilizar la mínima cantidad de memoria para representar la imagen.
Nota
En general, si desea especificar el tamaño de una imagen representada, especifique sólo Width o Height pero no ambas. Si sólo especifica una, se conserva la relación de aspecto de la imagen. De lo contrario, la imagen puede sufrir una expansión o distorsión inesperadas. Para controlar el comportamiento de expansión de la imagen, utilice las propiedades Stretch y StretchDirection.
Nota
Cuando especifique el tamaño de una imagen con Width o Height, también debe establecer DecodePixelWidth o DecodePixelHeight en el mismo tamaño correspondiente.
La propiedad Stretch determina cómo se expande el origen de la imagen para rellenar el elemento de imagen. Para obtener más información, vea la enumeración Stretch.
<!-- Simple image rendering. However, rendering an image this way may not
result in the best use of application memory. See markup below which
creates the same end result but using less memory. -->
<Image Width="200"
Source="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg"/>
<Image Width="200">
<Image.Source>
<!-- To save significant application memory, set the DecodePixelWidth or
DecodePixelHeight of the BitmapImage value of the image source to the desired
height and width of the rendered image. If you don't do this, the application will
cache the image as though it were rendered as its normal size rather then just
the size that is displayed. -->
<!-- Note: In order to preserve aspect ratio, only set either DecodePixelWidth
or DecodePixelHeight but not both. -->
<BitmapImage DecodePixelWidth="200"
UriSource="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg" />
</Image.Source>
</Image>
En el ejemplo siguiente se muestra cómo representar una imagen de 200 píxeles de ancho mediante código.
Nota
El establecimiento de las propiedades BitmapImage se debe hacer dentro de un bloque de BeginInit y EndInit.
' Create Image Element
Dim myImage As New Image()
myImage.Width = 200
' Create source
Dim myBitmapImage As New BitmapImage()
' BitmapImage.UriSource must be in a BeginInit/EndInit block
myBitmapImage.BeginInit()
myBitmapImage.UriSource = New Uri("C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg")
' To save significant application memory, set the DecodePixelWidth or
' DecodePixelHeight of the BitmapImage value of the image source to the desired
' height or width of the rendered image. If you don't do this, the application will
' cache the image as though it were rendered as its normal size rather then just
' the size that is displayed.
' Note: In order to preserve aspect ratio, set DecodePixelWidth
' or DecodePixelHeight but not both.
myBitmapImage.DecodePixelWidth = 200
myBitmapImage.EndInit()
'set image source
myImage.Source = myBitmapImage
// Create Image Element
Image myImage = new Image();
myImage.Width = 200;
// Create source
BitmapImage myBitmapImage = new BitmapImage();
// BitmapImage.UriSource must be in a BeginInit/EndInit block
myBitmapImage.BeginInit();
myBitmapImage.UriSource = new Uri(@"C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Water Lilies.jpg");
// To save significant application memory, set the DecodePixelWidth or
// DecodePixelHeight of the BitmapImage value of the image source to the desired
// height or width of the rendered image. If you don't do this, the application will
// cache the image as though it were rendered as its normal size rather then just
// the size that is displayed.
// Note: In order to preserve aspect ratio, set DecodePixelWidth
// or DecodePixelHeight but not both.
myBitmapImage.DecodePixelWidth = 200;
myBitmapImage.EndInit();
//set image source
myImage.Source = myBitmapImage;