Compartir a través de

Cómo: Usar el elemento de imagen

  • Artículo

En este ejemplo se muestra cómo incluir imágenes en una aplicación mediante el elemento Image.

Definición de una imagen

En el siguiente ejemplo se muestra cómo representar una imagen de 200 píxeles de ancho. En este ejemplo de lenguaje XAML, tanto la sintaxis de atributo como la sintaxis de etiquetas de propiedad se usan para definir la imagen. Para más información sobre la sintaxis de atributo y la sintaxis de propiedad, consulte Información general sobre las propiedades de dependencia. Un elemento BitmapImage se usa para definir los datos de origen de la imagen y se define de forma explícita para el ejemplo de sintaxis de etiquetas de propiedad. Además, el DecodePixelWidth de BitmapImage se establece en el mismo ancho que el Width de Image. Esto se hace para garantizar que la cantidad mínima de memoria se use para representar la imagen.

Nota:

En general, si quiere especificar el tamaño de una imagen representada, especifique solo Width o Height, pero no ambos. Si solo especifica uno, se conserva la relación de aspecto de la imagen. De lo contrario, la imagen puede aparecer ajustada o distorsionada de forma inesperada. Utilice las propiedades Stretch y StretchDirection para controlar la forma en la que se ajusta la imagen.

Nota:

Cuando especifica el tamaño de una imagen con Width o Height, debe establecer DecodePixelWidth o DecodePixelHeight en el mismo tamaño respectivo.

La propiedad Stretch determina cómo se ajusta el origen de 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 than 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>

Representación de una imagen

En el siguiente ejemplo se muestra cómo representar una imagen de 200 píxeles de ancho mediante código.

Nota:

La configuración BitmapImage de las propiedades debe realizarse dentro de un bloque BeginInit y EndInit.

// 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 than 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
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 than 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

Vea también