Imagen Class

Representa un control que muestra una imagen. El origen de la imagen se especifica haciendo referencia a un archivo de imagen, utilizando varios formatos admitidos. El origen de la imagen también se puede establecer con una secuencia. Vea los Comentarios para la lista de formatos de origen de imagen admitidos.

Herencia

Object
  DependencyObject
    UIElement
      FrameworkElement
        Image

Sintaxis


public sealed class Image : FrameworkElement

Atributos

[MarshalingBehavior(Agile)]
[Threading(Both)]
[Version(0x06020000)]
[WebHostHidden()]

Members

A continuación se indican los tipos de miembros de Image (Clase):

Constructores

A continuación se indican los constructores de Image (Clase).

ConstructorDescripción
Image Initializes a new instance of the Image class.

 

Eventos

A continuación se indican los eventos de Image (Clase).

EventoDescripción
DataContextChanged Occurs when the value of the FrameworkElement.DataContext property changes. (Se hereda de FrameworkElement)
DoubleTapped Occurs when an otherwise unhandled DoubleTap interaction occurs over the hit test area of this element. (Se hereda de UIElement)
DragEnter Occurs when the input system reports an underlying drag event with this element as the target. (Se hereda de UIElement)
DragLeave Occurs when the input system reports an underlying drag event with this element as the origin. (Se hereda de UIElement)
DragOver Occurs when the input system reports an underlying drag event with this element as the potential drop target. (Se hereda de UIElement)
Drop Occurs when the input system reports an underlying drop event with this element as the drop target. (Se hereda de UIElement)
GotFocus Occurs when a UIElement receives focus. (Se hereda de UIElement)
Holding Occurs when an otherwise unhandled Hold interaction occurs over the hit test area of this element. (Se hereda de UIElement)
ImageFailed Occurs when there is an error associated with image retrieval or format.
ImageOpened Occurs when the image source is downloaded and decoded with no failure. You can use this event to determine the natural size of the image source.
KeyDown Occurs when a keyboard key is pressed while the UIElement has focus. (Se hereda de UIElement)
KeyUp Occurs when a keyboard key is released while the UIElement has focus. (Se hereda de UIElement)
LayoutUpdated Occurs when the layout of the visual tree changes, due to layout-relevant properties changing value or some other action that refreshes the layout. (Se hereda de FrameworkElement)
Loaded Occurs when a FrameworkElement has been constructed and added to the object tree, and is ready for interaction. (Se hereda de FrameworkElement)
LostFocus Occurs when a UIElement loses focus. (Se hereda de UIElement)
ManipulationCompleted Occurs when a manipulation on the UIElement is complete. (Se hereda de UIElement)
ManipulationDelta Occurs when the input device changes position during a manipulation. (Se hereda de UIElement)
ManipulationInertiaStarting Occurs when the input device loses contact with the UIElement object during a manipulation and inertia begins. (Se hereda de UIElement)
ManipulationStarted Occurs when an input device begins a manipulation on the UIElement. (Se hereda de UIElement)
ManipulationStarting Occurs when the manipulation processor is first created. (Se hereda de UIElement)
PointerCanceled Occurs when a pointer that made contact abnormally loses contact. (Se hereda de UIElement)
PointerCaptureLost Occurs when pointer capture previously held by this element moves to another element or elsewhere. (Se hereda de UIElement)
PointerEntered Occurs when a pointer enters the hit test area of this element. (Se hereda de UIElement)
PointerExited Occurs when a pointer leaves the hit test area of this element. (Se hereda de UIElement)
PointerMoved Occurs when a pointer moves while the pointer remains within the hit test area of this element. (Se hereda de UIElement)
PointerPressed Occurs when the pointer device initiates a Press action within this element. (Se hereda de UIElement)
PointerReleased Occurs when the pointer device that previously initiated a Press action is released, while within this element. (Se hereda de UIElement)
PointerWheelChanged Occurs when the delta value of a pointer wheel changes. (Se hereda de UIElement)
RightTapped Occurs when a right-tap input stimulus happens while the pointer is over the element. (Se hereda de UIElement)
SizeChanged Occurs when either the ActualHeight or the ActualWidth property changes value on a FrameworkElement. (Se hereda de FrameworkElement)
Tapped Occurs when an otherwise unhandled Tap interaction occurs over the hit test area of this element. (Se hereda de UIElement)
Unloaded Occurs when this object is no longer connected to the main object tree. (Se hereda de FrameworkElement)

 

Métodos

The Image Clase tiene estos métodos. También hereda métodos de Object Clase.

MétodoDescripción
AddHandler Adds a routed event handler for a specified routed event, adding the handler to the handler collection on the current element. Specify handledEventsToo as true to have the provided handler be invoked even if the event is handled elsewhere. (Se hereda de UIElement)
Arrange Positions child objects and determines a size for a UIElement. Parent objects that implement custom layout for their child elements should call this method from their layout override implementations to form a recursive layout update. (Se hereda de UIElement)
ArrangeOverride Provides the behavior for the Arrange pass of layout. Classes can override this method to define their own Arrange pass behavior. (Se hereda de FrameworkElement)
CancelDirectManipulations Cancels ongoing direct manipulation processing (system-defined panning/zooming) on any ScrollViewer parent that contains the current UIElement. (Se hereda de UIElement)
CapturePointer Sets pointer capture to a UIElement. Once captured, only the element that has capture will fire pointer-related events. (Se hereda de UIElement)
ClearValue Clears the local value of a dependency property. (Se hereda de DependencyObject)
FindName Retrieves an object that has the specified identifier name. (Se hereda de FrameworkElement)
FindSubElementsForTouchTargeting Enables a UIElement subclass to expose child elements that assist with resolving touch targeting. (Se hereda de UIElement)
GetAnimationBaseValue Returns any base value established for a dependency property, which would apply in cases where an animation is not active. (Se hereda de DependencyObject)
GetBindingExpression Returns the BindingExpression that represents the binding on the specified property. (Se hereda de FrameworkElement)
GetValue Returns the current effective value of a dependency property from a DependencyObject. (Se hereda de DependencyObject)
GoToElementStateCore When implemented in a derived class, enables per-state construction of a visual tree for a control template in code, rather than by loading XAML for all states at control startup. (Se hereda de FrameworkElement)
InvalidateArrange Invalidates the arrange state (layout) for a UIElement. After the invalidation, the UIElement will have its layout updated, which will occur asynchronously. (Se hereda de UIElement)
InvalidateMeasure Invalidates the measurement state (layout) for a UIElement. (Se hereda de UIElement)
Measure Updates the DesiredSize of a UIElement. Typically, objects that implement custom layout for their layout children call this method from their own MeasureOverride implementations to form a recursive layout update. (Se hereda de UIElement)
MeasureOverride Provides the behavior for the Measure pass of the layout cycle. Classes can override this method to define their own Measure pass behavior. (Se hereda de FrameworkElement)
OnApplyTemplate Invoked whenever application code or internal processes (such as a rebuilding layout pass) call ApplyTemplate. In simplest terms, this means the method is called just before a UI element displays in your app. Override this method to influence the default post-template logic of a class. (Se hereda de FrameworkElement)
OnCreateAutomationPeer When implemented in a derived class, returns class-specific AutomationPeer implementations for the Microsoft UI Automation infrastructure. (Se hereda de UIElement)
OnDisconnectVisualChildren Override this method to implement how layout and logic should behave when items are removed from a class-specific content or children property. (Se hereda de UIElement)
ReadLocalValue Returns the local value of a dependency property, if a local value is set. (Se hereda de DependencyObject)
ReleasePointerCapture Releases pointer captures for capture of one specific pointer by this UIElement. (Se hereda de UIElement)
ReleasePointerCaptures Releases all pointer captures held by this element. (Se hereda de UIElement)
RemoveHandler Removes the specified routed event handler from this UIElement. Typically the handler in question was added by AddHandler. (Se hereda de UIElement)
SetBinding Attaches a binding to a FrameworkElement, using the provided binding object. (Se hereda de FrameworkElement)
SetValue Sets the local value of a dependency property on a DependencyObject. (Se hereda de DependencyObject)
TransformToVisual Returns a transform object that can be used to transform coordinates from the UIElement to the specified object. (Se hereda de UIElement)
UpdateLayout Ensures that all positions of child objects of a UIElement are properly updated for layout. (Se hereda de UIElement)

 

Propiedades

ImageClase tiene estas propiedades.

PropiedadTipo de accesoDescripción

ActualHeight

De sólo lecturaGets the rendered height of a FrameworkElement. (Se hereda de FrameworkElement)

ActualWidth

De sólo lecturaGets the rendered width of a FrameworkElement. (Se hereda de FrameworkElement)

AllowDrop

Lectura/escrituraGets or sets a value that determines whether this UIElement can be a drop target for purposes of drag-and-drop operations. (Se hereda de UIElement)

BaseUri

De sólo lecturaGets a Uniform Resource Identifier (URI) that represents the base Uniform Resource Identifier (URI) for an XAML-constructed object at XAML load time. This property is useful for Uniform Resource Identifier (URI) resolution at run time. (Se hereda de FrameworkElement)

CacheMode

Lectura/escrituraGets or sets a value that indicates that rendered content should be cached as a composited bitmap when possible. (Se hereda de UIElement)

Clip

Lectura/escrituraGets or sets the RectangleGeometry used to define the outline of the contents of a UIElement. (Se hereda de UIElement)

CompositeMode

Lectura/escrituraGets or sets a property that declares alternate composition and blending modes for the element in its parent layout and window. This is relevant for elements that are involved in a mixed XAML / Microsoft DirectX UI. (Se hereda de UIElement)

DataContext

Lectura/escrituraGets or sets the data context for a FrameworkElement when it participates in data binding. (Se hereda de FrameworkElement)

DesiredSize

De sólo lecturaGets the size that this UIElement computed during the measure pass of the layout process. (Se hereda de UIElement)

Dispatcher

De sólo lecturaGets the CoreDispatcher that this object is associated with. (Se hereda de DependencyObject)

FlowDirection

Lectura/escrituraGets or sets the direction in which text and other UI elements flow within any parent element that controls their layout. This property can be set to either LeftToRight or RightToLeft. Setting FlowDirection to RightToLeft on any element sets the alignment to the right, the reading order to right-to-left and the layout of the control to flow from right to left. (Se hereda de FrameworkElement)

Height

Lectura/escrituraGets or sets the suggested height of a FrameworkElement. (Se hereda de FrameworkElement)

HorizontalAlignment

Lectura/escrituraGets or sets the horizontal alignment characteristics that are applied to a FrameworkElement when it is composed in a layout parent, such as a panel or items control. (Se hereda de FrameworkElement)

IsDoubleTapEnabled

Lectura/escrituraGets or sets a value that determines whether the DoubleTapped event can originate from that element. (Se hereda de UIElement)

IsHitTestVisible

Lectura/escrituraGets or sets whether the contained area of this UIElement can return true values for hit testing. (Se hereda de UIElement)

IsHoldingEnabled

Lectura/escrituraGets or sets a value that determines whether the Holding event can originate from that element. (Se hereda de UIElement)

IsRightTapEnabled

Lectura/escrituraGets or sets a value that determines whether the RightTapped event can originate from that element. (Se hereda de UIElement)

IsTapEnabled

Lectura/escrituraGets or sets a value that determines whether the Tapped event can originate from that element. (Se hereda de UIElement)

Language

Lectura/escrituraGets or sets localization/globalization language information that applies to a FrameworkElement, and also to all child elements of the current FrameworkElement in the object representation and in UI. (Se hereda de FrameworkElement)

ManipulationMode

Lectura/escrituraGets or sets the ManipulationModes value used for UIElement behavior and interaction with gestures. Setting this value enables handling the manipulation events from this element in app code. (Se hereda de UIElement)

Margin

Lectura/escrituraGets or sets the outer margin of a FrameworkElement. (Se hereda de FrameworkElement)

MaxHeight

Lectura/escrituraGets or sets the maximum height constraint of a FrameworkElement. (Se hereda de FrameworkElement)

MaxWidth

Lectura/escrituraGets or sets the maximum width constraint of a FrameworkElement. (Se hereda de FrameworkElement)

MinHeight

Lectura/escrituraGets or sets the minimum height constraint of a FrameworkElement. (Se hereda de FrameworkElement)

MinWidth

Lectura/escrituraGets or sets the minimum width constraint of a FrameworkElement. (Se hereda de FrameworkElement)

Name

Lectura/escrituraGets or sets the identifying name of the object. When a XAML processor creates the object tree from XAML markup, run-time code can refer to the XAML-declared object by this name. (Se hereda de FrameworkElement)

NineGrid

Lectura/escrituraGets or sets a value for a nine-grid metaphor that controls how the image can be resized. The nine-grid metaphor enables you to stretch edges and corners of an image differently than its center.

NineGridProperty

De sólo lecturaIdentifies the NineGrid dependency property.

Opacity

Lectura/escrituraGets or sets the degree of the object's opacity. (Se hereda de UIElement)

Parent

De sólo lecturaGets the parent object of this FrameworkElement in the object tree. (Se hereda de FrameworkElement)

PlayToSource

De sólo lecturaGets the information that is transmitted if the Image is used for a Play To scenario.

PlayToSourceProperty

De sólo lecturaIdentifies the PlayToSource dependency property.

PointerCaptures

De sólo lecturaGets the set of all captured pointers, represented as Pointer values. (Se hereda de UIElement)

Projection

Lectura/escrituraGets or sets the perspective projection (3-D effect) to apply when rendering this element. (Se hereda de UIElement)

RenderSize

De sólo lecturaGets the final render size of a UIElement. (Se hereda de UIElement)

RenderTransform

Lectura/escrituraGets or sets transform information that affects the rendering position of a UIElement. (Se hereda de UIElement)

RenderTransformOrigin

Lectura/escrituraGets or sets the origin point of any possible render transform declared by RenderTransform, relative to the bounds of the UIElement. (Se hereda de UIElement)

RequestedTheme

Lectura/escrituraGets or sets the UI theme that is used by the UIElement (and its child elements) for resource determination. The UI theme you specify with RequestedTheme can override the app-level RequestedTheme. (Se hereda de FrameworkElement)

Resources

Lectura/escrituraGets the locally defined resource dictionary. In XAML, you can establish resource items as child object elements of a frameworkElement.Resources property element, through XAML implicit collection syntax. (Se hereda de FrameworkElement)

Source

Lectura/escrituraGets or sets the source for the image.

SourceProperty

De sólo lecturaIdentifies the Source dependency property.

Stretch

Lectura/escrituraGets or sets a value that describes how an Image should be stretched to fill the destination rectangle.

StretchProperty

De sólo lecturaIdentifies the Stretch dependency property.

Style

Lectura/escrituraGets or sets an instance Style that is applied for this object during layout and rendering. (Se hereda de FrameworkElement)

Tag

Lectura/escrituraGets or sets an arbitrary object value that can be used to store custom information about this object. (Se hereda de FrameworkElement)

Transitions

Lectura/escrituraGets or sets the collection of Transition style elements that apply to a UIElement. (Se hereda de UIElement)

Triggers

De sólo lecturaGets the collection of triggers for animations that are defined for a FrameworkElement. Not commonly used. (Se hereda de FrameworkElement)

UseLayoutRounding

Lectura/escrituraGets or sets a value that determines whether rendering for the object and its visual subtree should use rounding behavior that aligns rendering to whole pixels. (Se hereda de UIElement)

VerticalAlignment

Lectura/escrituraGets or sets the vertical alignment characteristics that are applied to a FrameworkElement when it is composed in a parent object such as a panel or items control. (Se hereda de FrameworkElement)

Visibility

Lectura/escrituraGets or sets the visibility of a UIElement. A UIElement that is not visible is not rendered and does not communicate its desired size to layout. (Se hereda de UIElement)

Width

Lectura/escrituraGets or sets the width of a FrameworkElement. (Se hereda de FrameworkElement)

 

Comentarios

Formatos de archivo de imágenes

Un control Image puede mostrar estos formatos de archivo de imagen:

  • JPEG (Joint Photographic Experts Group, grupo conjunto de expertos en fotografía)
  • Formato PNG (Portable Network Graphics)
  • mapa de bits (BMP)
  • GIF (Graphics Interchange Format, formato de intercambio de gráficos)
  • Formato de archivo de imagen etiquetado (TIFF)
  • JPEG XR
  • iconos (ICO)

Configuración de Image.Source

Para establecer el archivo de origen de la imagen que muestra Image, establezca su propiedad Source, en XAML o en código. A continuación se muestra un ejemplo del establecimiento de Source en XAML:


<Image Width="200" Source="Images/myimage.png" />

Este uso estable la propiedad Source mediante el identificador uniforme de recursos (URI), que es un acceso directo que se habilita mediante XAML. Observe que el URI aquí parece ser un URI relativo; la admisición de URI parciales es otro acceso directo XAML. La raíz de este URI es la carpeta base de un proyecto de aplicación. Suele ser la misma ubicación desde la que se carga el archivo XAML que contiene la etiqueta Image. En este ejemplo, el archivo de origen de la imagen está en una subcarpeta Images dentro de la estructura del archivo de la aplicación.

Establecer la propiedad Source es una acción asincrónica inherentemente. Puesto que se trata de una propiedad, no existe ninguna sintaxis que admita await, aunque para la mayoría de los escenarios no necesitará interactuar con los aspectos asincrónicos de la carga de imagen. El fotograma esperará a que se devuelva el origen de imagen y comenzará un ciclo de diseño cuando el archivo de origen de la imagen esté disponible y descodificado.

Establecer el origen en un valor de URI que no se puede resolver en un archivo de origen de imágenes válido no produce una excepción. En su lugar, desencadena un evento ImageFailed. Puede escribir un controlador de ImageFailed y adjuntarlo al objeto Image y posiblemente utilizar el ErrorMessage en datos de evento para determinar la naturaleza del error. Un error en la descodificación también puede desencadenar ImageFailed. Si desea comprobar si un archivo de origen de imagen se ha cargado correctamente, puede controlar el evento ImageOpened en el elemento Image.

Normalmente utilizará archivos de origen de imagen que haya incluido como parte del paquete de descarga de la aplicación. Para archivos grandes, podría haber un retraso muy pequeño mientras se descodifica el archivo de origen de la imagen, si esta es la primera vez que se utiliza el origen. Para obtener más información sobre recursos de la aplicación y sobre cómo empaquetar archivos de origen de imagen en un paquete de aplicación, vea Definir recursos de la aplicación.

También puede utilizar archivos de origen de imagen que no forman parte de la aplicación, como por ejemplo imágenes de servidores externos. Estas imágenes se descargan mediante una solicitud HTTP interna y, a continuación, se descodifican. Si el archivo de origen de imagen es un archivo grande, o si hay problemas de conexión, podría producirse un retraso antes de que se pueda mostrar una imagen externa en un elemento Image.

Configuración de Image.Source con código

Si crea un objeto Image mediante código, llame al constructor predeterminado y, a continuación, establezca la propiedad Image.Source. El establecimiento de la propiedad Image.Source requiere una instancia de la clase BitmapImage, que también debe construir. Si su origen de la imagen es un archivo al que hace referencia el URI, use el constructor BitmapImage que toma un parámetro URI. Cuando se hace referencia a contenido local, se debe incluir el esquema ms-appx: en el URI absoluto que se utiliza como parámetro de constructor de BitmapImage. En código, no obtiene los accesos directos de procesamiento para combinar elementos de URI relativos y el esquema de ms-appx: que ocurre automáticamente si especifica Source como atributo XAML. En su lugar, debe construir de manera explícita un URI absoluto con el esquema adecuado. Normalmente utilizará el esquema ms-appx: para un archivo de imagen empaquetado como parte de la aplicación.

Sugerencia  Si utiliza C# o Microsoft Visual Basic, puede obtener la propiedad BaseUri de la Image y pasarla como el parámetro baseUri para los constructores System.Uri que combinan una ubicación base de URI y una ruta de acceso relativa desde dicha ubicación.

Este es un ejemplo del establecimiento de Image.Source en C#. En este ejemplo, el objeto Image se creó en XAML pero no tiene un origen ni ningún valor de propiedad; en su lugar, estos valores se proporcionan en tiempo de ejecución cuando se carga el objeto Image desde XAML.


void Image_Loaded(object sender, RoutedEventArgs e)
{
    Image img = sender as Image; 
    BitmapImage bitmapImage = new BitmapImage();
    img.Width = bitmapImage.DecodePixelWidth = 80; //natural px width of image source
    // don't need to set Height, system maintains aspect ratio, and calculates the other
    // dimension, so long as one dimension measurement is provided
    bitmapImage.UriSource = new Uri(img.BaseUri,"Images/myimage.png");
}

Usar un origen de secuencia para un origen de imagen

Si el origen de la imagen es una secuencia, debe escribir código que establezca su instancia de Image para usar la secuencia. Esto no se puede hacer solo con XAML. Cree la Image que se va a usar, o haga referencia a una instancia de Image existente (que puede haberse definido en el marcado XAML, pero sin un origen). Después utilice el método asincrónico SetSourceAsync de BitmapImage para definir la información de imagen de una secuencia, pasando la secuencia que se va a utilizar como parámetro streamSource. Es bastante común usar una secuencia para un origen de imagen. Por ejemplo, si la aplicación permite a un usuario elegir un archivo de imagen utilizando un control FileOpenPicker, el objeto que obtiene y que representa el archivo que el usuario eligió se puede haber iniciado como secuencia, pero no proporciona una referencia de URI al archivo.

En este ejemplo, el código ya admitía await porque está esperando a que el usuario elija un archivo y solo se ejecuta una vez que se produce. El flujo que se debe utilizar procede de StorageFile.OpenAsync después de que las acciones del selector asincrónico devuelvan una instancia de StorageFile.


FileOpenPicker open = new FileOpenPicker(); 
// Open a stream for the selected file 
StorageFile file = await open.PickSingleFileAsync(); 
// Ensure a file was selected 
if (file != null) 
{ 
    using (IRandomAccessStream fileStream = await file.OpenAsync(Windows.Storage.FileAccessMode.Read)) 
    { 
        // Set the image source to the selected bitmap 
         BitmapImage bitmapImage = new BitmapImage(); 
         bitmapImage.DecodePixelWidth = 600; //match the target Image.Width, not shown
         await bitmapImage.SetSourceAsync(fileStream); 
         Scenario2Image.Source = bitmapImage; 
    } 
}

Sugerencia  Si utiliza C# o Visual Basic, las secuencias pueden utilizar el tipo System.IO.Stream con el que puede estar familiarizado de la experiencia de programación de Microsoft .NET anterior. Puede llamar al método de extensión AsStream como método de instancia en cualquier objeto de tipo IRandomAccessStream obtenido a partir de una API de Windows en tiempo de ejecución. El ejemplo anterior ha utilizado IRandomAccessStream para el parámetro que se está pasando y no tenía que utilizar AsStream. Pero si alguna vez necesita manipular la secuencia, se puede usar AsStream como utilidad para convertir en una System.IO.Stream si lo necesita.

Vea Ejemplo de imágenes XAML para obtener más código de ejemplo.

Rendimiento y archivos de imagen

Los archivos de imagen grandes pueden afectar al rendimiento porque se cargan en la memoria. Si se hace referencia a un archivo de imagen donde sabe que el archivo de origen es una imagen grande de alta resolución, pero la aplicación la está mostrando en una región de la interfaz de usuario que es menor que el tamaño natural de la imagen, debe establecer la propiedad DecodePixelWidth o DecodePixelHeight. Las propiedades de DecodePixel* permiten pasar información directamente al códec específico de formato, y el códec puede utilizar esta información para descodificar con mayor eficacia y en una superficie de memoria menor. Establezca DecodePixelWidth al mismo ancho de píxeles del área que desea que su aplicación muestre realmente. En otras palabras, DecodePixelWidth para el origen BitmapImage debe ser el mismo valor que el Width o el ActualWidth del control Image que muestra ese origen.

Puede establecer DecodePixelWidth o DecodePixelHeight. Si establece de estas dos propiedades, el sistema calcula la propiedad correspondiente para mantener la relación de aspecto correcta. También puede establecer ambas propiedades, pero normalmente debería usar valores que mantienen esa relación de aspecto. Si desea cambiar las relaciones de aspecto hay mejores maneras para ello, por ejemplo, mediante una TranslateTransform como una RenderTransform.

Para establecer DecodePixelWidth (o DecodePixelHeight) en XAML, debe usar una sintaxis XAML algo más detallada que incluya un elemento BitmapImage explícito como valor de elemento de la propiedad, según se indica a continuación:


<Image>
  <Image.Source>
    <BitmapImage DecodePixelWidth="200" UriSource="images/myimage.png" />
  </Image.Source>
</Image>


DecodePixelWidth (o DecodePixelHeight) son propiedades de BitmapImage, por lo que necesita un elemento de objeto XAML BitmapImage explícito para establecer las propiedades de DecodePixel* como atributos en XAML.

Si está creando una instancia de Image en código, probablemente está creando todavía una instancia de BitmapImage como valor para ofrecer para la propiedad Source, por lo que solo tiene que establecer DecodePixelWidth establecido (DecodePixelHeight) en la instancia de BitmapImage antes de establecer la propiedad UriSource. La propiedad DecodePixelType también afecta a la manera en que los valores de píxeles se interpretan por las operaciones de descodificación.

Para evitar que las imágenes se descodifiquen más de una vez, siempre que pueda asigne la propiedad de origen de la imagen mediante identificadores URI en lugar de usar secuencias de memoria. El marco de trabajo XAML puede asociar el mismo URI en varios lugares con una imagen descodificada, pero no puede hacer lo mismo para varias secuencias de memoria aunque contengan los mismos datos.

Puede quitar archivos de imagen de la memoria caché de imágenes estableciendo todos los valores de Image.Source asociados en null.

Para obtener más información sobre la clase y el rendimiento de la Image, vea Optimizar los recursos multimedia.

Codificación y descodificación de archivos de imagen

La API de Windows Imaging Component (WIC) proporciona compatibilidad de códec subyacente para los archivos de imagen. Para obtener más información sobre formatos de imagen específicos, tal como se documenta para los códecs, vea Códecs WIC nativos.

La API de Image, BitmapImage y BitmapSource no incluye ningún método dedicado para la codificación y descodificación de formatos multimedia. Todas las operaciones de descodificación son integran como acciones que resultan cuando se establece o restablece el origen. Esto facilita el uso de las clases para crear la interfaz de usuario, porque admiten un conjunto de formatos de archivo de origen y un comportamiento de descodificación predeterminados. Las clases como BitmapImage exponen algunas de las opciones de descodificación y lógica como parte de los datos de evento para los eventos ImageOpened o ImageFailed. Si necesita descodificación de archivo de imagen avanzadas, o codificación de imágenes, debe utilizar las API del espacio de nombres de Windows.Graphics.Imaging. Podría necesitar estas API si el escenario de la aplicación implica conversiones de formato de archivos de imagen o la manipulación de una imagen donde el usuario puede guardar el resultado como archivo. Las API de codificación también son compatibles con el componente WIC de Windows.

Image ancho y alto

La clase Image hereda las propiedades Width y Height de FrameworkElement, y estas propiedades controlan potencialmente el tamaño que su control Image presentará cuando aparezca en la interfaz de usuario. Si no establece un Width o un Height, el ancho y el alto los determina el tamaño natural del origen de la imagen. Por ejemplo, si carga una imagen de mapa de bits de 300 píxeles de alto y 400 píxeles de ancho, según lo registrado en su formato de archivo de origen, estas medidas se utilizan para el ancho y el alto cuando el control Image calcula su tamaño natural. Puede comprobar ActualHeight y ActualWidth en tiempo de ejecución después de que se represente la imagen para obtener la información de medición. O bien, puede controlar ImageOpened y comprobar las propiedades de archivo de imagen como PixelHeight y PixelWidth inmediatamente antes de que se presente la imagen.

Si establecido solo unas de las propiedades Width o Height pero no ambas, el sistema puede utilizar dicha dimensión como guía y calcular la otro, conservando la relación de aspecto. Si no está seguro de las dimensiones de archivo de origen, elija la dimensión que sea la más importante para controlar en el escenario de diseño y deje el sistema calcule la otra dimensión, y entonces el comportamiento de diseño del contenedor se adaptará normalmente al diseño al que hay que ajustarse.

Si no establece Width y/o Height, y deja la imagen como su tamaño natural, la propiedad Stretch de la imagen puede controlar la manera en que el archivo de origen de la imagen rellenará el espacio que especifique como Width y Height. El valor Stretch predeterminado es Uniform, que conserva la relación de aspecto cuando ajusta la imagen a un contenedor de diseño. Si las dimensiones del contenedor no tienen la misma relación de aspecto, habrá espacio vacío que seguirá siendo parte de Image pero no muestra ningún píxel de imagen, por lo menos mientras se utiliza el valor de Uniform para Stretch. UniformToFill para Stretch no dejará espacio vacío, pero podría recortar la imagen si las dimensiones son diferentes. Fill para Stretch no dejará el espacio vacío pero podría cambiar la relación de aspecto. Puede experimentar con estos valores para ver cuál es el mejor para la presentación de imágenes en el escenario de diseño. Además, tenga en cuenta que algunos contenedores de diseño pueden ajustar el tamaño de una imagen que no tenga ningún Width y Height específicos para rellenar todo el espacio de diseño; en este caso puede elegir para establecer tamaños concretos en la imagen o su contenedor.

NineGrid

Utilizar la técnica NineGrid es otra opción para ajustar el tamaño de las imágenes cuando este no coincide con el del área de presentación, si la imagen tiene zonas cuyo tamaño no se debería ajustar uniformemente. Por ejemplo, puede utilizar una imagen de fondo que tenga un borde inherente que solo debe estirar en una dimensión, y esquinas que no deben ajustarse en absoluto, pero el centro de la imagen puede ajustarse para adaptarse a los requisitos de diseño en ambas dimensiones. Para obtener más información, vea NineGrid.

Calificación y localización de recursos para Image

Archivos de imagen y ajuste de escala Image

Debe crear orígenes de imagen en varios tamaños recomendados, para garantizar que la aplicación tenga una apariencia adecuada cuando Windows 8 la escale. Al especificar un Source para Image, puede utilizar una convención de nomenclatura para recursos que usará el recurso correcto para los factores de ajuste de escala específicos de dispositivo. La aplicación lo determina automáticamente en tiempo de ejecución. Para obtener información específica sobre las convenciones de nomenclatura que se van a usar y más información, vea Inicio rápido: usar recursos de archivo o de imágenes.

Para obtener más información sobre cómo diseñar imágenes adecuadamente para escalar, vea Directrices para el ajuste de la escala a la densidad de píxeles.

Utilizar recursos no calificados

Puede emplear la técnica de los recursos no calificados cuando la referencia básica del recurso haga referencia a un recurso predeterminado y el proceso de administración de recursos pueda encontrar el recurso localizado equivalente automáticamente. Puede utilizar control automático para obtener acceso a recursos incompletos con los calificadores actuales de escala y referencia cultural, o puede utilizar ResourceManager y ResourceMap con calificadores para la referencia cultural y la escala para obtener los recursos directamente. Para obtener más información vea Sistema de administración de recursos.

FlowDirection para Image

Si establece FlowDirection en RightToLeft para un objeto Image, el contenido visual de un objeto Image se voltea horizontalmente. Sin embargo, un elemento Image no hereda el valor de FlowDirection de ningún elemento primario. Normalmente, solo deseará un comportamiento de volteo de imagen en imágenes relevantes para el diseño, pero no necesariamente en los elementos que tienen insertado el texto u otros componentes que no tendría sentido voltear para una audiencia que lee de derecha a izquierda. Para obtener un comportamiento de imagen volteada, debe establecer el elemento FlowDirection del elemento Image específicamente en RightToLeft o establecer la propiedad FlowDirection en código subyacente. Considere la posibilidad de identificar el elemento Image mediante x: UID y especificar valores de FlowDirection como un recurso de Windows en tiempo de ejecución, de modo que los expertos en localización puedan cambiar este valor más adelante sin modificar el XAML o el código.

La accesibilidad y la clase Imagen

La clase Image no es una clase de control verdadero, ya que no es una clase descendiente de Control. No puede llamar al foco para un elemento Image ni colocar un elemento Image en una secuencia de la pestaña. Para obtener más información sobre aspectos de accesibilidad del uso de imágenes y el elemento Image en la interfaz de usuario, vea Exponer información básica sobre los elementos de la interfaz de usuario.

Comportamiento de Windows 8

Para Windows 8, los recursos pueden usar un patrón de calificador de recursos para cargar recursos diferentes en función del ajuste de escala específico del dispositivo. Sin embargo, los recursos no se recargan automáticamente si el factor de escala cambia mientras se ejecuta la aplicación. En este caso, las aplicaciones deberán preocuparse de volver a cargar los recursos, controlando el evento DpiChanged (o el evento desusado LogicalDpiChanged) y usando las API ResourceManager para recargar manualmente el recurso adecuado para el nuevo factor de escala. A partir de Windows 8.1, se vuelven a evaluar automáticamente los recursos recuperados originalmente para la aplicación si el factor de escala cambia mientras se ejecuta la aplicación. Además, cuando ese recurso es el origen de la imagen para un objeto Image, se desencadena uno de los eventos de carga de origen (ImageOpened o ImageFailed) como resultado de la acción de sistema de solicitar el nuevo recurso y después aplicarlo al objeto Image. Un escenario donde puede producirse un cambio de escala de tiempo de ejecución es cuando el usuario mueve la aplicación a otro monitor si hay más de uno disponible.

Si migra el código de la aplicación de Windows 8 a Windows 8.1, quizá desee tener en cuenta este cambio de comportamiento, porque da lugar a los eventos ImageOpened o ImageFailed que se producen en tiempo de ejecución cuando se controla el cambio de escala, incluso en los casos donde el Source se establece en XAML. Además, si tuviera código que controlara DpiChanged o LogicalDpiChanged y restableciera los recursos, debe examinar si dicho código todavía es necesario dado el nuevo comportamiento de recarga automático de Windows 8.1.

Las aplicaciones que se compilaron para Windows 8 pero se ejecutan en Windows 8.1 siguen usando el comportamiento de Windows 8.

Requisitos

Cliente mínimo admitido

Windows 8 [Solo aplicaciones de la Tienda Windows]

Servidor mínimo admitido

Windows Server 2012 [Solo aplicaciones de la Tienda Windows]

Espacio de nombres

Windows.UI.Xaml.Controls
Windows::UI::Xaml::Controls [C++]

Metadatos

Windows.winmd

Vea también

FrameworkElement
Inicio rápido: Image e ImageBrush
Ejemplo de imágenes XAML
Optimizar los recursos multimedia
BitmapSource
FlowDirection
Windows.Graphics.Imaging
Source

 

 

Mostrar:
© 2014 Microsoft