Inicio rápido: Image e ImageBrush (XAML)

Applies to Windows and Windows Phone

Aprende a integrar imágenes en tu aplicación de Windows en tiempo de ejecución con C++, C# o Visual Basic y, asimismo, a usar las API de las dos principales clases de XAML: Image y ImageBrush.

Guía básica: Relación de este tema con los demás. Consulta:

Image y ImageBrush

Para representar una imagen, puedes usar los objetos Image o ImageBrush. Un objeto Image representa una imagen y un objeto ImageBrush pinta otro objeto con una imagen. En este ejemplo se muestra cómo crear una imagen con el objeto Image.


<Image Width="200" Source="licorice.jpg" />

Este es el objeto Image representado.

Un objeto de imagen representado.

En este ejemplo, la propiedad Source especifica la ubicación de la imagen que quieres mostrar. Para establecer el Source, especifica una dirección URL absoluta (por ejemplo, http://contoso.com/myPicture.jpg) o una dirección URL relativa a la estructura del empaquetado de la aplicación. En nuestro ejemplo, colocamos el archivo de imagen "licorice.jpg" en la carpeta raíz de nuestro proyecto y declaramos la configuración del proyecto que incluye el archivo de imagen como contenido.

Con el objeto ImageBrush puedes utilizar una imagen para pintar un área que abarque un objeto Brush. Por ejemplo, puedes usar ImageBrush para el valor de la propiedad Fill de una Ellipse o la propiedad Background de Canvas.

En el siguiente ejemplo se muestra cómo usar ImageBrush para pintar una Ellipse.


<Ellipse Height="200" Width="300">
   <Ellipse.Fill>
     <ImageBrush ImageSource="licorice.jpg" />
   </Ellipse.Fill>
</Ellipse>

Esta es la Ellipse pintada por ImageBrush.

Una elipse pintada por ImageBrush.

Ampliación de una imagen

Si no estableces los valores de Width o Height de una Image, esta se mostrará con las dimensiones de la imagen que especificó el Source. Al establecer los valores de Width y Height, se crea un área contenedora rectangular en la que se muestra la imagen. Puedes especificar el modo en que la imagen debe rellenar esta área contenedora mediante la propiedad Stretch. La propiedad Stretch acepta los valores siguientes, que define la enumeración Stretch:

  • None: la imagen no se amplía para rellenar las dimensiones de salida. Ten cuidado con esta configuración de Stretch: si la imagen de origen es más grande que el área contenedora, la imagen se recortará, lo cual no es óptimo ya que no tendrás control sobre la ventanilla; por el contrario, cuando realizas un Clip intencionado sí tienes el control.
  • Uniform: la imagen se escala para ajustarse a las dimensiones de salida. Pero la relación de aspecto del contenido se conserva. Este es el valor predeterminado.
  • UniformToFill: la imagen se escala para rellenar completamente el área de salida, pero se conserva la relación de aspecto original.
  • Fill: la imagen se escala para ajustarse a las dimensiones de salida. Debido a que el ancho y el alto del contenido se escalan por separado, es posible que la relación de aspecto original de la imagen no se conserve. O sea que la imagen podría distorsionarse para rellenar completamente el área de salida.
Ejemplo de configuración de ampliación.

Recorte de una imagen

Puedes usar la propiedad Clip para recortar un área de la imagen de salida. Debes establecer la propiedad Clip en una Geometry. Actualmente, no se admiten los recortes no rectangulares.

En el siguiente ejemplo se muestra cómo usar una RectangleGeometry como la región de recorte de una imagen. En este ejemplo, definimos un objeto Image con el valor de Height establecido en 200. Una RectangleGeometry define un rectángulo para el área de la imagen que se mostrará. La propiedad Rect se establece en "25,25,100,150", lo que define un rectángulo que empieza en la posición "25,25", con un ancho de 100 y un alto de 150. Solo se muestra la parte de la imagen que está dentro del área del rectángulo.


<Image Source="licorice.jpg" Height="200">
    <Image.Clip>
        <RectangleGeometry Rect="25,25,100,150" />
    </Image.Clip>
</Image>

Este es el objeto Image recortado.

Un objeto Image recortado por RectangleGeometry.

Aplicación de una opacidad

Puedes aplicar una Opacity a una imagen para que se represente semi translúcida. Los valores de opacidad van de 0,0 a 1,0; donde 1,0 es totalmente opaco y 0,0 es totalmente transparente. En este ejemplo se muestra cómo aplicar una opacidad de 0,5 a una Image.


<Image Height="200" Source="licorice.jpg" Opacity="0.5" />

Este es el objeto Image representado con una opacidad de 0,5 y un fondo negro que se ve a través de la opacidad parcial.

Un objeto Image con una opacidad de 0,5.

Formatos de archivos de imagen

Image y ImageBrush pueden mostrar los siguientes formatos de archivo de imagen:

  • Formato JPEG (Joint Photographic Experts Group)
  • Formato PNG (Portable Network Graphics)
  • Mapa de bits (BMP)
  • Formato de intercambio de gráficos (GIF)
  • Tagged Image File Format (TIFF)
  • JPEG XR
  • iconos (ICO)

La API para Image, BitmapImage y BitmapSource no incluye ningún método dedicado para codificar y descodificar formatos multimedia. Todas las operaciones de codificación y descodificación están integradas y, como mucho, mostrarán aspectos de la codificación o descodificación como parte de los datos de evento para los eventos de carga. Si quieres realizar trabajo especializado con la codificación o descodificación de imágenes, que podrías usar si tu aplicación realiza manipulaciones o conversiones de imágenes, deberías usar las API que están disponibles en el espacio de nombres Windows.Graphics.Imaging. Estas API de imágenes las pueden usar tanto las aplicaciones de Windows en tiempo de ejecución con C++, C# o Visual Basic como las aplicaciones de Windows en tiempo de ejecución con JavaScript. Además, estas API también son compatibles con el componente Windows Imaging Component (WIC) de Windows 8.

Para obtener más información sobre recursos de la aplicación y cómo empaquetar orígenes de imagen en una aplicación, consulta Definición de recursos de la aplicación.

WriteableBitmap

Un WriteableBitmap proporciona un BitmapSource que puede modificarse y que no usa la descodificación basada en archivos básica de WIC. Puedes alterar imágenes de forma dinámica y volver a representar la imagen actualizada. Para definir el contenido del búfer de un WriteableBitmap, usa la propiedad PixelBuffer para acceder al búfer, y usa un tipo de búfer de secuencia o específico del lenguaje para rellenarlo. Para ver código de ejemplo, consulta WriteableBitmap:

RenderTargetBitmap

La clase RenderTargetBitmap está disponible a partir de Windows 8.1. Esta clase captura el árbol de interfaz de usuario de XAML de una aplicación en funcionamiento y, a continuación, muestra un origen de imagen de mapa de bits. Tras la captura, dicho origen de imagen se puede aplicar a otras partes de la aplicación, guardar como un recurso o dato de la aplicación o emplear en otros escenarios. Un escenario especialmente útil es crear una miniatura en tiempo de ejecución de una página XAML para un esquema de navegación, como al proporcionar un vínculo de imagen desde un control Hub. RenderTargetBitmap presenta algunas limitaciones en cuanto al contenido que va a aparecer en la imagen capturada. Para más información, consulta the API reference topic for RenderTargetBitmap.

Orígenes y escala de las imágenes

Deberías crear los orígenes de imágenes con varios tamaños recomendados para garantizar que la aplicación tenga una apariencia excelente cuando Windows 8 cambie su escala. Cuando especifiques un Source para una Image, puedes usar una convención de nomenclatura que haga referencia automáticamente al recurso correcto para la escala actual. Para ver información más específica sobre la convención de nomenclatura y otros temas, consulta Inicio rápido: usar recursos de archivo o imagen.

Para obtener más información sobre cómo diseñar teniendo en cuenta la escala, consulta Instrucciones para el ajuste de escala a la densidad de píxeles.

Image y ImageBrush en código

Es muy frecuente especificar Image y ImageBrush mediante XAML en lugar de código. Esto es así porque estos elementos suelen ser el resultado de herramientas de diseño como parte de una definición de interfaz de usuario de XAML.

Si defines Image o ImageBrush mediante código, usa los constructores predeterminados y después establece las propiedades relevantes (Image.Source y ImageBrush.ImageSource). Estos requieren una BitmapImage (no un URI) cuando los definas mediante código. Si tu origen es una secuencia, usa el método SetSourceAsync para inicializar el valor. Si tu origen es un identificador uniforme de recursos (URI) con contenido que usa los esquemas ms-appx o ms-resource en tu aplicación, usa el constructor BitmapImage que toma un URI. Quizá también debas considerar controlar el evento ImageOpened si hay problemas de temporización con la recuperación o la descodificación del origen de la imagen, ya que puede que debas alternar contenido para mostrar hasta que el origen de la imagen esté disponible. Consulta Muestra de imágenes XAML para ver un ejemplo de código.

Nota  Si estableces imágenes mediante código, puedes usar el control automático para acceder a recursos sin calificar con calificadores de escala y referencia cultural, o puedes usar ResourceManager y ResourceMap con calificadores de escala y referencia cultural para obtener los recursos directamente. Para obtener más información, consulta Sistema de administración de recursos.

Muestras de imágenes

Para obtener más ejemplos del uso de imágenes en las aplicaciones, consulta Muestra de imágenes XAML. De igual modo, en Muestra de dibujo basado en vectores XAML encontrarás un uso de ImageBrush en la página del escenario 2.

Temas relacionados

Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C# o Visual Basic
Guía básica para crear aplicaciones de Windows en tiempo de ejecución con C++
Inicio rápido: usar recursos de archivo o imagen
Muestra de imágenes XAML
Image
BitmapSource

 

 

Mostrar:
© 2014 Microsoft