Home > MVA, Tutoriales, WP7 > Imágenes

Imágenes

Imágenes

Este artículo es una traducción del artículo original encontrado en: http://create.msdn.com/en-US/education/quickstarts/Images.

Silverlight para Windows Phone 7, dispone de varias opciones de visualización de imágenes tales como imágenes y diagramas. Este artículo describe la manera de integrar imágenes en sus aplicaciones de Silverlight para Windows Phone.

Está compuesto por las siguientes secciones:

  • Image e ImageBrush
  • Estirando una imagen
  • Recortando una imagen
  • Aplicando un OpacityMask
  • Creando WriteableBitmaps

Image e ImageBrush

Para mostrar una imagen, puedes utilizar los objetos Image o ImageBrush. El siguiente ejemplo muestra cómo mostrar una imagen llamada licorice.jpg utilizando el objeto Image.

XAML

<Image Source="licorice.JPG" />

La siguiente imagen muestra el ejemplo en el emulador

clip_image002

En este ejemplo, la propiedad Source especifica la ubicación de la imagen que deseas mostrar. Puedes establecer la propiedad Source especificando una dirección URL absoluta (por ejemplo, http://contoso.com/myPicture.jpg) o especificando el URL de un archivo que se incluye en el archivo XAP de la aplicación. Para agregar un archivo de imagen a la aplicación, realiza las siguientes acciones en Visual Studio:

·         En el menú Project, selecciona Add Existing Item.

·         Selecciona la imagen deseada y luego haz clic en Add.

·         En el Explorador de Soluciones, selecciona el archivo de imagen que se ha añadido.

·         En la ventana Propiedades, cambia la propiedad Build Action a Content.

Cuando la aplicación se compile, el archivo de imagen se incluye en el XAP.

Nota

Silverlight para Windows Phone, no admite todos los formatos de imágenes.  La clase BitmapImage puede ser usada para referenciar imágenes en formato JPEG y PNG.  Para obtener más información acerca de los tipos de fuentes de imágenes y formatos que pueden ser usados por Image,  consulta BitmapImage.

El objeto ImageBrush te permite utilizar una imagen para pintar un área que acepta un objeto de tipo Brush (Brocha).  Por ejemplo, ImageBrush puede ser usado como valor para la propiedad Background de un Panel.  Para obtener más información sobre las brochas de Silverlight para Windows Phone, consulta [Brochas.DOCX].

El siguiente ejemplo muestra cómo utilizar la imagen “Licorice” para pintar el interior de un texto. 

XAML

<!– TextBlock con una imagen brocha aplicadas al texto.–>

<TextBlock Margin="20"

Text="LICORICE"

FontFamily="Verdana"

FontSize="80"

FontWeight="Bold">

<TextBlock.Foreground>

<ImageBrush ImageSource="licorice.JPG"/>

</TextBlock.Foreground>

</TextBlock>

 La siguiente imagen muestra el ejemplo en el emulador.

clip_image004

Estirando una imagen

Si no estableces los valores de Width o Height en un Image, se muestra con las dimensiones de la imagen especificada en la propiedad Source.  Si estableces un valor para las propiedades Width y Height se crea un área rectangular en donde la imagen será visualizada en su interior. Puedes especificar cómo la imagen llena su área de contenido utilizando la propiedad Stretch. La propiedad Stretch acepta los siguientes valores, que la enumeración Stretch define:

·         None: La imagen no se estira para llenar las dimensiones de salida.

·         Uniform: La imagen se escala para ajustarse a las dimensiones de salida.  Sin embargo, la relación de aspecto del contenido se conserva.  Este es el valor por defecto.

·         UniformToFill: La imagen se escala para que rellene completamente el área de salida, pero conserva su aspecto original.

·         Fill: La imagen se ajusta a las dimensiones de salida.  Debido a que la altura y el ancho del contenido se escalan de forma independiente, la relación de aspecto original de la imagen no puede ser preservada.  Esto es, la imagen puede ser distorsionada para llenar completamente el área de salida.

En la siguiente ilustración se muestran los diferentes estiramientos:

clip_image006

Recortando una imagen

Puedes utilizar la propiedad Clip para recortar un área del Image de salida. Estableces la propiedad Clip a una Geometry, lo que significa que puedes cortar una gran variedad de formas geométricas de tu imagen (por ejemplo, una elipse, una línea o una ruta compleja). Para obtener más información acerca de cómo crear geometrías, vea la documentación de Geometrías en la documentación de Silverlight en MSDN. 

El siguiente ejemplo muestra cómo utilizar un EllipseGeometry como región de recorte de una imagen. En este ejemplo, un objeto Image se define con la propiedad Source establecida en un archivo de imagen. Un EllipseGeometry con un RadiusX de valor de 125, un RadiusY de valor de 100, y un valor Center de valor 225,175 se establece para la propiedad Clip del objeto Image. Sólo la parte de la imagen que está dentro del área de la elipse se muestra.

XAML

 

<Image Source="Licorice.JPG">

<Image.Clip>

 <EllipseGeometry RadiusX="125" RadiusY="100" Center="225,175"/>

</Image.Clip>

</Image>

 La siguiente imagen muestra el ejemplo en el emulador.

clip_image008

Aplicando un OpacityMask

Puedes aplicar un OpacityMask a un Image para crear una variedad de técnicas de enmascaramiento relacionadas con opacidad, como los efectos de viñeta.

El siguiente ejemplo muestra cómo aplicar un degradado radial a un Image para que se desvanezca en los bordes (efecto de viñeta).

XAML

 

<Image Source="licorice.jpg" >

<Image.OpacityMask>

<RadialGradientBrush GradientOrigin="0.5,0.5"

Center="0.5,0.5"

RadiusX="0.5"

RadiusY="0.5">

<!– Estos colores degradado sólo están cambiando los valores para que la imagen se desvanece hacia los borde–>

<GradientStop Color="#ffffffff" Offset="0.5" />

<GradientStop Color="#00ffffff" Offset="0.8" />

</RadialGradientBrush>

</Image.OpacityMask>

</Image>

La siguiente imagen muestra el ejemplo en el emulador.

clip_image010

Nota

Puedes utilizar una variedad de objetos Brush para una máscara de opacidad.  Para más información sobre brochas en Silverlight para Windows Phone, consulta el artículo de Brochas.

Creando WriteableBitmaps

Un WriteableBitmap proporciona un BitmapSource que puede ser modificado.  Esto te permite modificar las imágenes sobre la marcha y volver a renderizar la imagen actualizada.

Puedes pasar un BitmapSource, las dimensiones de un nuevo mapa de bits, o un UIElement en el constructor de WriteableBitmap.  Al pasar un UIElement se creará una imagen del elemento visual. Por ejemplo, si deseas un mapa de bits del árbol visual completo, podrías pasar la raíz de UIElement al constructor.

La propiedad Pixels en WriteableBitmap es una matriz que representa la textura 2D del mapa de bits. Puedes alterar la imagen de mapa de bits, cambiando los valores de los pixeles en esta matriz.

Nota

El formato utilizado por WriteableBitmap de Silverlight es ARGB32 es (RGB pre-multiplicados). Así que los pixeles de la matriz de un WriteableBitmap se almacenan como colores pre-multiplicados. Cada canal de color se pre-multiplica por el valor alfa.

Nota

Los objetos MediaElement no aparecen en las capturas WriteableBitmap.  Esto se debe a que en Silverlight para Windows Phone los MediaElement se renderizan en su totalidad a través de hardware.

El siguiente ejemplo muestra cómo crear una imagen WriteableBitmap desde un objeto Image y cómo modificar el WriteableBitmap.  Para crear el WriteableBitmap, la propiedad Source del objeto Image es convertido a un BitmapSource y se pasa al constructor de WriteableBitmap. Cuando se hace clic en el botón "Modify Pixels", el manejador del evento itera en la matriz de pixeles del mapa de bits y establece cada pixel a color negro.  El objeto Image se establece entonces al mapa de bits modificado y nuevamente renderizado.

Para probar este ejemplo, haz clic en Modify Pixels para ver cómo la imagen se distorsiona.

Nota

En este ejemplo se utiliza Silverlight en el navegador para simular el comportamiento para Windows Phone. El comportamiento real puede ser ligeramente diferente en el emulador de Windows Phone o en un dispositivo Windows Phone.

Get Microsoft Silverlight

XAML

 

<StackPanel>

<Image Name="ImageToModify" Source="licorice.jpg" />

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="30" >

<Button Name="ButtonModify" Content="Modify Pixels" Click="ButtonModify_Click" />

<Button Name="ButtonReset" Content="Reset Image" Click="ButtonReset_Click" />

</StackPanel>

</StackPanel>

 

C#

 

private void ButtonModify_Click(object sender, RoutedEventArgs e)

{

int pixelTarget = 4;

if (ImageToModify.Source != null)

{

/ / Obtener WriteableBitmap. ImageToModify que se define en MainPage.xaml

/ /WriteableBitmap bitmap =

new WriteableBitmap(ImageToModify.Source as BitmapSource);

// Iterar a través de cada píxel.

for (int x = 0; x < bitmap.Pixels.Length; x++)

{

/ / Establecer cada píxel en cuarto.

if (x % pixelTarget == 0)

{

bitmap.Pixels[x] = 0;

}

}

/ / Establecer la imagen de objeto, definido en XAML, para modificar el

/ /mapa de bits.

ImageToModify.Source = bitmap;

}

}

private void ButtonReset_Click(object sender, RoutedEventArgs e)

{

BitmapImage licoriceImage =

new BitmapImage(new Uri("licorice.jpg", UriKind.Relative));

ImageToModify.Source = licoriceImage;

}

}

  1. November 23rd, 2011 at 14:36 | #1

    OK

  2. Miguel
    March 18th, 2012 at 21:50 | #2

    para que: WriteableBitmap bitmap =new WriteableBitmap(miImagen.Source as BitmapSource);
    funcione, es necesario incluir: using System.Windows.Media.Imaging;
    al inicio en las directivas

  3. fer gauvain
    April 24th, 2012 at 11:32 | #3

    Gracias Miguel, justo me preguntaba porque no funciona

  4. May 17th, 2012 at 17:13 | #4

    Muy interesante. Gracias.

  5. Meissner
    December 15th, 2012 at 13:10 | #5

    Gracias por el dato, también le estaba echando cabeza a ese WriteableBimap

  6. Armel Peña
    April 21st, 2013 at 22:34 | #6

    Muy bién !

  7. Andres
    May 30th, 2013 at 08:44 | #7

    claro lo de la renderizacion por hardware. gracias

  8. June 6th, 2013 at 12:21 | #8

    Excelente informacion para desarrollo de Blend

  9. wjvelasquez
    July 27th, 2013 at 11:16 | #9

    mala identacion sin codigo de colores hace perder demaciado tiempo

    Hay que actualizar el contenido. Todos los link estan obsoletos

  10. luis Ort
    December 6th, 2013 at 20:52 | #10

    Worale esto esta mas avanzado xD me gusta este curso…