Exportar (0) Imprimir
Expandir todo
Este artículo proviene de un motor de traducción automática. Mueva el puntero sobre las frases del artículo para ver el texto original. Más información.
Traducción
Original

Información general sobre imágenes

En este tema se proporciona una introducción a Componente Imágenes de Microsoft Windows Presentation Foundation. Imágenes WPF permite a los desarrolladores mostrar y transformar imágenes, así como darles formato.

Este tema contiene las secciones siguientes.

Imágenes WPF proporciona mejoras significativas a las funciones de creación de imágenes de Microsoft Windows. Anteriormente, las funciones de creación de imágenes, tales como mostrar un mapa de bits o utilizar una imagen en un control común, dependían de las bibliotecas de Interfaz de dispositivo gráfico de Microsoft Windows (GDI) o Microsoft Windows GDI+. Estas API proporcionan la funcionalidad de línea base para la creación de imágenes, pero carecen de características tales como compatibilidad con la extensibilidad de códec y con imágenes de alta fidelidad. La Imágenes WPF de creación de imágenes se ha rediseñado para superar las limitaciones de GDI y GDI+, y proporcionar un nuevo conjunto de API para mostrar y utilizar imágenes en las aplicaciones.

Existen dos maneras de tener acceso a la API de Imágenes WPF: un componente administrado y un componente no administrado. El componente no administrado proporciona las características siguientes.

  • Modelo de extensibilidad para los formatos de imágenes nuevos o de propietario.

  • Rendimiento mejorado y seguridad en los formatos de imagen nativos, incluidos mapa de bits (BMP), Joint Photographics Experts Group (JPEG), Formato PNG (Portable Network Graphics), Tagged Image File Format (TIFF), Microsoft Windows Media Photo, Formato de intercambio de gráficos (GIF) y los iconos (.ico).

  • Conservación de datos de imágenes de gran profundidad de hasta 8 bits por canal (32 bits por píxel).

  • Ajuste de escala, recorte y giro no destructivos de la imagen.

  • Administración del color simplificada.

  • Compatibilidad con metadatos de propietario integrados en archivos.

  • El componente administrado utiliza la infraestructura no administrada para proporcionar la integración sin problemas de las imágenes con otras características de WPF, tales como interfaz de usuario (UI), animación y gráficos. El componente administrado se beneficia asimismo del modelo de extensibilidad de códec de creación de imágenes de Windows Presentation Foundation (WPF) que permite el reconocimiento automático de nuevos formatos de imágenes en aplicaciones de WPF.

La mayoría de las API administradas de Imágenes WPF residen en el espacio de nombres System.Windows.Media.Imaging, aunque hay varios tipos importantes, como ImageBrush y ImageDrawing, que residen en el espacio de nombres System.Windows.Media, así como Image, que reside en el espacio de nombres System.Windows.Controls.

En este tema se proporciona información adicional sobre el componente administrado. Para obtener más información sobre la API no administrada, consulte la documentación de Componente no administrado de creación de imágenes de WPF.

Se utiliza un códec para descodificar o codificar cada formato multimedia concreto. Imágenes WPF incluye un códec para los formatos de imagen BMP, JPEG, PNG, TIFF, Windows Media Photo, GIF y de icono. Cada uno de estos códecs permite a las aplicaciones descodificar y, con la excepción de los iconos, codificar sus formatos de imagen respectivos.

BitmapSource es una clase importante utilizada en la descodificación y codificación de imágenes. Es la unidad de creación básica de la canalización de Imágenes WPF y representa un conjunto de píxeles único y constante a un tamaño y resolución determinados. Un BitmapSource puede ser un fotograma individual de una imagen con varios fotogramas, o puede ser el resultado de una transformación realizada en BitmapSource. Se trata del elemento primario de muchas de las clases primarias utilizadas en la creación de imágenes de WPF, como BitmapFrame.

BitmapFrame se utiliza para almacenar los datos reales del mapa de bits de un formato de imagen. Numerosos formatos de imagen únicamente admiten un BitmapFrame, aunque existen formatos, como GIF y TIFF, que admiten varios fotogramas por imagen. Los descodificadores utilizan los fotogramas como datos de entrada y se pasan a los codificadores para crear archivos de imagen.

En el ejemplo siguiente se demuestra cómo se crea un BitmapFrame a partir de un BitmapSource y, a continuación, se agrega a una imagen TIFF.


BitmapSource image5 = BitmapSource.Create(
    width,
    height,
    96,
    96,
    PixelFormats.Indexed1,
    BitmapPalettes.WebPalette,
    pixels,
    stride);

FileStream stream5 = new FileStream("palette.tif", FileMode.Create);
TiffBitmapEncoder encoder5 = new TiffBitmapEncoder();
encoder5.Frames.Add(BitmapFrame.Create(image5));
encoder5.Save(stream5);


ms748873.collapse_all(es-es,VS.110).gifDescodificación de formatos de imagen

La descodificación de imágenes consiste en convertir un formato de imagen en datos de imagen que pueden ser utilizados por el sistema. A continuación, los datos de imagen se pueden utilizar para mostrarlos, procesarlos o codificarlos a un formato diferente. La selección del descodificador se basa en el formato de la imagen. La selección del códec es automática a menos que se especifique un descodificador concreto. En los ejemplos de la sección Mostrar imágenes en WPF se muestra la descodificación automática. Los descodificadores de formato personalizados programados mediante interfaces de Imágenes WPF no administradas y registradas con el sistema participan automáticamente en la selección del descodificador. Esto permite mostrar los formatos personalizados automáticamente en las aplicaciones de WPF.

En el ejemplo siguiente se muestra el uso de un descodificador de mapa de bits para descodificar una imagen en formato BMP.



// Open a Uri and decode a BMP image
Uri myUri = new Uri("tulipfarm.bmp", UriKind.RelativeOrAbsolute);
BmpBitmapDecoder decoder2 = new BmpBitmapDecoder(myUri, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
BitmapSource bitmapSource2 = decoder2.Frames[0];

// Draw the Image
Image myImage2 = new Image();
myImage2.Source = bitmapSource2;
myImage2.Stretch = Stretch.None;
myImage2.Margin = new Thickness(20);


ms748873.collapse_all(es-es,VS.110).gifCodificación de formatos de imagen

La codificación de imágenes consiste en convertir los datos de una imagen en un formato de imagen concreto. A continuación, los datos de imagen codificados se pueden utilizar para crear nuevos archivos de imagen. Imágenes WPF proporciona codificadores para cada uno de los formatos de imagen descritos anteriormente.

En el ejemplo siguiente se muestra el uso de un codificador para guardar una imagen de mapa de bits recién creada.


FileStream stream = new FileStream("new.bmp", FileMode.Create);
BmpBitmapEncoder encoder = new BmpBitmapEncoder();
TextBlock myTextBlock = new TextBlock();
myTextBlock.Text = "Codec Author is: " + encoder.CodecInfo.Author.ToString();
encoder.Frames.Add(BitmapFrame.Create(image));
encoder.Save(stream);


Hay varias maneras de mostrar una imagen en una aplicación de Windows Presentation Foundation (WPF). Las imágenes se pueden mostrar mediante un control Image, pintado en un objeto visual con un objeto ImageBrush, o dibujado con un objeto ImageDrawing.

ms748873.collapse_all(es-es,VS.110).gifUtilizar el control de imagen

Image es un elemento de marco de trabajo y la manera principal de mostrar imágenes en aplicaciones. En XAML, Image se puede utilizar de dos maneras; sintaxis de atributo o sintaxis de propiedad. En el ejemplo siguiente se muestra cómo representar una imagen de 200 píxeles de ancho mediante la sintaxis de atributo y la sintaxis de etiqueta de propiedad. 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.


<!-- 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 muchos de los ejemplos se utiliza un objeto BitmapImage para hacer referencia a un archivo de imagen. BitmapImage es un BitmapSource especializado que se optimiza para la carga en Lenguaje XAML y constituye una manera fácil de mostrar imágenes como la propiedad Source de un control Image.

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

Nota Nota

BitmapImage implementa la interfaz ISupportInitialize para optimizar la inicialización basándose en varias propiedades. Los cambios de propiedad sólo pueden producirse durante la inicialización del objeto. Llame a BeginInit para indicar que la inicialización ha empezado, y a EndInit para señalar que la inicialización se ha completado. Una vez inicializada, los cambios de propiedad se omiten.


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


ms748873.collapse_all(es-es,VS.110).gifGirar, convertir y recortar imágenes

WPF permite a los usuarios transformar imágenes utilizando las propiedades de BitmapImage o mediante objetos BitmapSource adicionales, tales como CroppedBitmap o FormatConvertedBitmap. Estas transformaciones de imagen pueden girar una imagen, ajustar su escala, cambiar su formato de píxel o recortarla.

Los giros de imagen se realizan mediante la propiedad Rotation de BitmapImage. Los giros sólo se pueden hacer en incrementos de 90 grados. En el ejemplo siguiente, una imagen se gira 90 grados.


<Image Width="150" Margin="5" Grid.Column="0" Grid.Row="1">
  <Image.Source>
    <TransformedBitmap Source="/sampleImages/watermelon.jpg" >
      <TransformedBitmap.Transform>
        <RotateTransform Angle="90"/>
      </TransformedBitmap.Transform>
    </TransformedBitmap>
  </Image.Source>
</Image>



' Create Image element.
Dim rotated90 As New Image()
rotated90.Width = 150

' Create the TransformedBitmap to use as the Image source.
Dim tb As New TransformedBitmap()

' Create the source to use as the tb source.
Dim bi As New BitmapImage()
bi.BeginInit()
bi.UriSource = New Uri("sampleImages/watermelon.jpg", UriKind.RelativeOrAbsolute)
bi.EndInit()

' Properties must be set between BeginInit and EndInit calls.
tb.BeginInit()
tb.Source = bi
' Set image rotation.
Dim transform As New RotateTransform(90)
tb.Transform = transform
tb.EndInit()
' Set the Image source.
rotated90.Source = tb



// Create Image element.
Image rotated90 = new Image();
rotated90.Width = 150;

// Create the TransformedBitmap to use as the Image source.
TransformedBitmap tb = new TransformedBitmap();

// Create the source to use as the tb source.
BitmapImage bi = new BitmapImage();
bi.BeginInit();
bi.UriSource = new Uri(@"sampleImages/watermelon.jpg", UriKind.RelativeOrAbsolute);
bi.EndInit();

// Properties must be set between BeginInit and EndInit calls.
tb.BeginInit();
tb.Source = bi;
// Set image rotation.
RotateTransform transform = new RotateTransform(90);
tb.Transform = transform;
tb.EndInit();
// Set the Image source.
rotated90.Source = tb;


Convertir una imagen en un formato de píxel diferente, como la escala de grises, se hace mediante FormatConvertedBitmap. En los ejemplos siguientes, se convierte una imagen a Gray4.


<!-- Grayscale XAML Image -->
<Image Width="200" Grid.Column="0" Grid.Row="1">
   <Image.Source>
      <FormatConvertedBitmap Source="/sampleImages/rocks.jpg"  DestinationFormat="Gray4" />
   </Image.Source>
</Image>



'Create Image Element
Dim grayImage As New Image()
grayImage.Width = 200
grayImage.Margin = New Thickness(5)

'Create source using xaml defined resource.
Dim fcb As New FormatConvertedBitmap(CType(Me.Resources("masterImage"), BitmapImage), PixelFormats.Gray4, Nothing, 0)
'set image source
grayImage.Source = fcb



//Create Image Element
Image grayImage = new Image();
grayImage.Width = 200;
grayImage.Margin = new Thickness(5);

//Create source using xaml defined resource.
FormatConvertedBitmap fcb = new FormatConvertedBitmap(
   (BitmapImage)this.Resources["masterImage"],PixelFormats.Gray4,null,0);
//set image source
grayImage.Source = fcb;


Para recortar una imagen, se puede utilizar la propiedad Clip de Image o CroppedBitmap. Normalmente, si únicamente desea mostrar una parte de una imagen, debe utilizar Clip. Si necesita codificar y guardar una imagen recortada, debe utilizar CroppedBitmap. En el ejemplo siguiente, se recorta una imagen mediante la propiedad Clip y un objeto EllipseGeometry.


<!-- Cropping an Image using Clip -->
<Image Width="200" Grid.Column="0" Grid.Row="5" Margin="5"
   Source="/sampleImages/gecko.jpg">
  <Image.Clip>
    <EllipseGeometry Center="75,50" RadiusX="50" RadiusY="25" />
  </Image.Clip>
</Image>



' Create the image for clipping
Dim clipImage As New Image()
clipImage.Width = 200
clipImage.Margin = New Thickness(5)

'Create & Set source
Dim bi As New BitmapImage()
' BitmapImage properties must be in a BeginInit/EndInit block
bi.BeginInit()
bi.UriSource = New Uri("pack://application:,,/sampleImages/gecko.jpg")
bi.EndInit()
clipImage.Source = bi

' Clip the using an EllipseGeometry
Dim clipGeometry As New EllipseGeometry(New System.Windows.Point(75, 50), 50, 25)
clipImage.Clip = clipGeometry



//Create the image for clipping
Image clipImage = new Image();
clipImage.Width = 200;
clipImage.Margin = new Thickness(5);

//Create & Set source
BitmapImage bi = new BitmapImage();
//BitmapImage.UriSource must be in a BeginInit/EndInit block
bi.BeginInit();
bi.UriSource = new Uri("pack://application:,,/sampleImages/gecko.jpg");
bi.EndInit();
clipImage.Source = bi;

//Clip the using an EllipseGeometry
EllipseGeometry clipGeometry = new EllipseGeometry(new Point(75, 50), 50, 25);
clipImage.Clip = clipGeometry;


ms748873.collapse_all(es-es,VS.110).gifAjustar imágenes

La propiedad Stretch controla cómo se ajusta una imagen para rellenar su contenedor. La propiedad Stretch acepta los valores siguientes, definidos por la enumeración Stretch:

  • None : la imagen no se ajusta para rellenar el área de salida. Si la imagen es mayor que el área de salida, la imagen se dibuja en el área de salida, y se recorta lo que sobra.

  • Fill : se ajusta la escala de la imagen al área de salida. Dado que la escala se aplica de manera independiente al alto y al ancho de la imagen, puede que no se conserve su relación de aspecto original. Es decir, es posible que la imagen se distorsione para rellenar totalmente el contenedor de salida.

  • Uniform : se cambia la escala de la imagen de modo que se ajuste completamente al área de salida. Se conserva la relación de aspecto de la imagen.

  • UniformToFill : la escala de la imagen se ajusta hasta rellenar completamente el área de salida y se conserva la relación de aspecto original de la imagen.

En el ejemplo siguiente se aplican todas las enumeraciones Stretch disponibles a Image.

La imagen siguiente muestra el resultado del ejemplo y el efecto que ejercen los distintos valores de Stretch al aplicarlos a una imagen.

Diferentes valores de ajuste

Diferentes valores de Stretch para TileBrush

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
  <DockPanel>

    <Border DockPanel.Dock="Top" Background="Black">
      <TextBlock Foreground="White" HorizontalAlignment="Stretch" FontSize="20">
        Stretching an Image
      </TextBlock>
    </Border>

    <Grid Name="simpleGrid" Background="{StaticResource CheckeredBrushResource}" 
       Margin="10" 
       ShowGridLines="True"
       VerticalAlignment="Center"
       HorizontalAlignment="Center">
      <Grid.ColumnDefinitions>
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
        <ColumnDefinition Width="175" />
      </Grid.ColumnDefinitions>
      <Grid.RowDefinitions>
        <RowDefinition />
        <RowDefinition Height="200"/>
      </Grid.RowDefinitions>
      <!-- Labels -->
      <TextBlock Style="{StaticResource Header1}" 
        Grid.Column="0" Grid.Row="0">None</TextBlock>
      <TextBlock Style="{StaticResource Header1}" 
        Grid.Column="1" Grid.Row="0">Uniform</TextBlock>
      <TextBlock Style="{StaticResource Header1}" 
        Grid.Column="2" Grid.Row="0">UniformToFill</TextBlock>
      <TextBlock Style="{StaticResource Header1}"
        Grid.Column="3" Grid.Row="0">Fill</TextBlock>
      <Border Grid.Column="0" Grid.Row="1" BorderThickness="1" BorderBrush="Black">
        <!-- None: Image is not scaled. If image is larger than the
             output area, the image will be cropped to the size of the output area.-->
        <Image
          Source="sampleImages/gecko.jpg" 
          Stretch="None" />
      </Border>
      <Border Grid.Column="1" Grid.Row="1" BorderThickness="1" BorderBrush="Black">
        <!-- Uniform: Scale to fit output area.
             Aspect ratio is preserved.-->
        <Image
          Source="sampleImages/gecko.jpg" 
          Stretch="Uniform" />
      </Border>
      <Border Grid.Column="2" Grid.Row="1" BorderThickness="1" BorderBrush="Black">
        <!-- UniformToFill: Scale to completely fill output area.
             Aspect ratio is preserved. Cropping may occur.-->
        <Image  
          Source="sampleImages/gecko.jpg" 
        Stretch="UniformToFill" />
      </Border>
      <Border Grid.Column="3" Grid.Row="1" BorderThickness="1" BorderBrush="Black">
      <!-- Fill: Scale to completely fill output area.
             Aspect ratio may not be preserved.-->
      <Image 
        Source="sampleImages/gecko.jpg" 
        Stretch="Fill" />
      </Border>
    </Grid>
  </DockPanel>
</Page>


ms748873.collapse_all(es-es,VS.110).gifPintar con imágenes

Las imágenes también se pueden mostrar en una aplicación pintándolas con un objeto Brush. Los pinceles permiten pintar los objetos de una interfaz de usuario con cualquier cosa desde simples colores sólidos hasta conjuntos complejos de tramas e imágenes. Para pintar con imágenes, utilice un ImageBrush. Un ImageBrush es un tipo de TileBrush que define su contenido como una imagen de mapa de bits. Un ImageBrush muestra una imagen única, que se especifica mediante su propiedad ImageSource. Puede controlar cómo se ajusta, alinea o coloca en mosaico la imagen, a fin de evitar la distorsión y crear tramas y otros efectos. En la ilustración siguiente se muestran algunos efectos que se pueden lograr con ImageBrush.

Los pinceles de imagen pueden rellenar formas, controles, texto, etc.

Ejemplos de resultados de ImageBrush

En el ejemplo siguiente se muestra cómo pintar el fondo de un botón con una imagen mediante ImageBrush.


<!-- Sets the button's Background property with an ImageBrush. The resulting
     button has an image as its background. -->
<Button Grid.Row="3" Grid.Column="2" 
 Height="75" Width="100" Foreground="White" FontWeight="Bold"
 HorizontalAlignment="Left">
  A Button
  <Button.Background>
    <ImageBrush ImageSource="sampleImages\blueberries.jpg" />
  </Button.Background>
</Button>


Para obtener información adicional acerca de ImageBrush y de cómo pintar imágenes, consulte Pintar con imágenes, dibujos y elementos visuales.

Algunos archivos de imagen contienen metadatos que describen el contenido o las características del archivo. Por ejemplo, la mayoría de las cámaras digitales crean imágenes que contienen metadatos relativos a la marca y el modelo de la cámara empleada para capturar la imagen. Cada formato de imagen administra de manera diferente los metadatos, pero Imágenes WPF proporciona una manera uniforme de almacenar y recuperar los metadatos de cada formato de imagen compatible.

El acceso a los metadatos se proporciona a través de la propiedad Metadata de un objeto BitmapSource. Metadata devuelve un objeto BitmapMetadata que incluye todos los metadatos contenidos en la imagen. Estos datos pueden pertenecer a un esquema de metadatos o a una combinación de esquemas diferentes. Imágenes WPF admite los esquemas de metadatos de imagen siguientes: Archivo de imagen intercambiable (Exif), tEXt (datos de texto PNG), directorio de archivos de imagen (IFD), International Press Telecommunications Council (IPTC) y Plataforma de metadados extensible (XMP).

Para simplificar el proceso de leer los metadatos, BitmapMetadata proporciona varias propiedades con nombre a las que resulta fácil tener acceso, como Author, Title y CameraModel. Muchas de estas propiedades con nombre también se pueden utilizar para escribir metadatos. El lector de consulta de metadatos proporciona compatibilidad adicional con la lectura de metadatos. El método GetQuery se utiliza para recuperar un lector de consulta de metadatos proporcionando una consulta de cadena, como "/app1/exif/". En el ejemplo siguiente, se utiliza el método GetQuery para obtener el texto almacenado en la ubicación "/Text/Description"."



// Add the metadata of the bitmap image to the text block.
TextBlock myTextBlock = new TextBlock();
myTextBlock.Text = "The Description metadata of this image is: " + pngInplace.GetQuery("/Text/Description").ToString();


Para escribir metadatos, se utiliza un sistema de escritura de consulta de metadatos. SetQuery obtiene el sistema de escritura de consulta y establece el valor deseado. En el ejemplo siguiente, se utiliza el método SetQuery para escribir el texto almacenado en la ubicación "/Text/Description"."


Stream pngStream = new System.IO.FileStream("smiley.png", FileMode.Open, FileAccess.ReadWrite, FileShare.ReadWrite);
PngBitmapDecoder pngDecoder = new PngBitmapDecoder(pngStream, BitmapCreateOptions.PreservePixelFormat, BitmapCacheOption.Default);
BitmapFrame pngFrame = pngDecoder.Frames[0];
InPlaceBitmapMetadataWriter pngInplace = pngFrame.CreateInPlaceBitmapMetadataWriter();
if (pngInplace.TrySave() == true)
{ pngInplace.SetQuery("/Text/Description", "Have a nice day."); }
pngStream.Close();


Una característica principal de Imágenes WPF es el modelo de extensibilidad para los nuevos códecs de imagen. Estas interfaces no administradas permiten a los desarrolladores de códec integrar los códecs con WPF, para que las aplicaciones de WPF puedan utilizar automáticamente los nuevos formatos de imagen.

Para obtener un ejemplo de API de extensibilidad, vea Win32 Sample Codec. En este ejemplo se muestra cómo crear un descodificador y codificador para un formato de imagen personalizado.

Nota Nota

El códec debe estar firmado digitalmente para que el sistema lo reconozca.

Adiciones de comunidad

AGREGAR
Mostrar:
© 2014 Microsoft