Gráficos y multimediaGraphics and Multimedia

@ no__t-2 proporciona compatibilidad con multimedia, gráficos vectoriales, animación y composición de contenido, lo que facilita a los desarrolladores la creación de interfaces de usuario y contenido interesantes.Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) provides support for multimedia, vector graphics, animation, and content composition, making it easy for developers to build interesting user interfaces and content. Con Microsoft Visual StudioMicrosoft Visual Studio, se pueden crear gráficos vectoriales o animaciones complejas e integrar elementos multimedia en las aplicaciones.Using Microsoft Visual StudioMicrosoft Visual Studio, you can create vector graphics or complex animations and integrate media into your applications.

En este tema se presentan las características de gráficos, animaciones y elementos multimedia de WPFWPF, que le permiten agregar gráficos, efectos de transición, sonido y vídeo a las aplicaciones.This topic introduces the graphics, animation, and media features of WPFWPF, which enable you to add graphics, transition effects, sound, and video to your applications.

Nota

Se desaconseja totalmente el uso de tipos WPF en un servicio de Windows.Using WPF types in a Windows service is strongly discouraged. Si intenta usar tipos WPF en un servicio de Windows, puede que el servicio no funcione como se espera.If you attempt to use WPF types in a Windows service, the service may not work as expected.

Novedades de gráficos y multimedia en WPF 4What's New with Graphics and Multimedia in WPF 4

Se han efectuado varios cambios relacionados con los gráficos y animaciones.Several changes have been made related to graphics and animations.

  • Redondeo del diseñoLayout Rounding

    Cuando el borde de un objeto queda en medio de un dispositivo de píxeles, el sistema de gráficos independiente de los ppp puede crear artefactos de representación tales como bordes borrosos o semitransparentes.When an object edge falls in the middle of a pixel device, the DPI-independent graphics system can create rendering artifacts, such as blurry or semi-transparent edges. Versiones anteriores de WPF incluían el ajuste de píxeles para ayudar a controlar este caso.Previous versions of WPF included pixel snapping to help handle this case. Silverlight 2 introdujo el redondeo del diseño, que es otra manera de mover elementos para que los bordes queden dentro de límites de píxeles enteros.Silverlight 2 introduced layout rounding, which is another way to move elements so that edges fall on whole pixel boundaries. WPF admite ahora el redondeo del diseño con la propiedad adjunta UseLayoutRounding en FrameworkElement.WPF now supports layout rounding with the UseLayoutRounding attached property on FrameworkElement.

  • Composición almacenada en cachéCached Composition

    Mediante el uso de las nuevas clases BitmapCache y BitmapCacheBrush, puede almacenar en caché una parte compleja del árbol visual como un mapa de bits y mejorar considerablemente el tiempo de representación.By using the new BitmapCache and BitmapCacheBrush classes, you can cache a complex part of the visual tree as a bitmap and greatly improve rendering time. El mapa de bits sigue respondiendo a la entrada del usuario, como clics del mouse, y se puede pintar en otros elementos, exactamente igual que cualquier pincel.The bitmap remains responsive to user input, such as mouse clicks, and you can paint it onto other elements just like any brush.

  • Compatibilidad con el sombreador de píxeles 3Pixel Shader 3 Support

    WPF 4 se basa en la compatibilidad con ShaderEffect introducida en WPF 3,5 SP1 al permitir que las aplicaciones escriban efectos mediante el sombreador de píxeles (PS) versión 3,0.WPF 4 builds on top of the ShaderEffect support introduced in WPF 3.5 SP1 by allowing applications to write effects by using Pixel Shader (PS) version 3.0. El modelo de sombreador PS 3.0 es más sofisticado que el PS 2.0, lo que permite incluso crear más efectos en hardware compatible.The PS 3.0 shader model is more sophisticated than PS 2.0, which allows for even more effects on supported hardware.

  • Funciones de aceleraciónEasing Functions

    Puede mejorar las animaciones con funciones de aceleración que proporcionan mayor control sobre el comportamiento de las animaciones.You can enhance animations with easing functions, which give you additional control over the behavior of animations. Por ejemplo, puede aplicar un ElasticEase a una animación para dar a la animación un comportamiento elástico.For example, you can apply an ElasticEase to an animation to give the animation a springy behavior. Para obtener más información, consulte los tipos de aceleración en el espacio de nombres System.Windows.Media.Animation.For more information, see the easing types in the System.Windows.Media.Animation namespace.

Gráficos y representaciónGraphics and Rendering

WPF incluye compatibilidad con gráficos 2D de alta calidad.WPF includes support for high quality 2-D graphics. La funcionalidad incluye pinceles, geometrías, imágenes, formas y transformaciones.The functionality includes brushes, geometries, images, shapes and transformations. Para más información, consulte Graphics (Gráficos).For more information, see Graphics. La representación de elementos gráficos se basa en la clase Visual.The rendering of graphical elements is based on the Visual class. La estructura de objetos visuales en la pantalla se describe en el árbol visual.The structure of visual objects on the screen is described by the visual tree. Para más información, consulte Información general sobre la representación de gráficos en WPF.For more information, see WPF Graphics Rendering Overview.

Formas 2D2-D Shapes

WPFWPF proporciona una biblioteca de formas 2D y dibujadas con vectores de uso frecuente, como rectángulos y elipses, que se muestran en la siguiente ilustración.provides a library of commonly used, vector-drawn 2-D shapes, such as rectangles and ellipses, which the following illustration shows.

Diagrama que muestra puntos suspensivos y rectángulos.

Estas formas intrínsecas de WPFWPF no son solo formas: son elementos programables que implementan muchas de las características que se esperan de los controles más comunes, entre los que se incluyen la entrada por mouse y teclado.These intrinsic WPFWPF shapes are not just shapes: they are programmable elements that implement many of the features that you expect from most common controls, which include keyboard and mouse input. En el ejemplo siguiente se muestra cómo controlar el evento MouseUp que se genera al hacer clic en un elemento Ellipse.The following example shows how to handle the MouseUp event raised by clicking an Ellipse element.

<Window
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  x:Class="Window1" >
  <Ellipse Fill="LightBlue" MouseUp="ellipseButton_MouseUp" />
</Window>
public partial class Window1  : Window
{
    void ellipseButton_MouseUp(object sender, MouseButtonEventArgs e)
    {
        MessageBox.Show("You clicked the ellipse!");
    }
}
Partial Public Class Window1
    Inherits Window
    Private Sub ellipseButton_MouseUp(ByVal sender As Object, ByVal e As MouseButtonEventArgs)
        MessageBox.Show("You clicked the ellipse!")
    End Sub
End Class

En la ilustración siguiente se muestra el resultado del anterior marcado y código XAMLXAML subyacente.The following illustration shows the output for the preceding XAMLXAML markup and code-behind.

Un cuadro de mensaje que indica "hizo clic en la elipse!"

Para obtener más información, consulte Información general sobre formas y dibujo básico en WPF.For more information, see Shapes and Basic Drawing in WPF Overview. Para obtener un ejemplo introductorio, vea Shape Elements Sample (Ejemplo de elementos de forma).For an introductory sample, see Shape Elements Sample.

Geometrías 2D2-D Geometries

Si las formas 2D que proporciona WPFWPF no son suficientes, puede usar la compatibilidad con WPFWPF para las geometrías y las rutas de acceso para crear las suyas propias.When the 2-D shapes that WPFWPF provides are not sufficient, you can use WPFWPF support for geometries and paths to create your own. En la ilustración siguiente se muestra cómo se pueden usar geometrías para crear formas, por ejemplo, un pincel de dibujo, y para recortar otros elementos WPFWPF.The following illustration shows how you can use geometries to create shapes, as a drawing brush, and to clip other WPFWPF elements.

Captura de pantalla que muestra cómo se pueden usar las geometrías para crear formas.

Para más información, consulte Información general sobre geometría.For more information, see Geometry Overview. Para obtener un ejemplo introductorio, vea Ejemplo de geometrías.For an introductory sample, see Geometries Sample.

Efectos 2D2-D Effects

WPFWPF proporciona una biblioteca de clases 2D que puede usar para crear una variedad de efectos.provides a library of 2-D classes that you can use to create a variety of effects. La capacidad de representación en 2D de WPFWPF proporciona la capacidad de pintar IUUI elementos que tienen degradados, mapas de bits, dibujos y vídeos; y para manipularlos mediante la rotación, el escalado y el sesgo.The 2-D rendering capability of WPFWPF provides the ability to paint IUUI elements that have gradients, bitmaps, drawings, and videos; and to manipulate them by using rotation, scaling, and skewing. En la ilustración siguiente se ofrece un ejemplo de los muchos efectos que puede lograr mediante pinceles de WPFWPF.The following illustration gives an example of the many effects you can achieve by using WPFWPF brushes.

Ilustración que muestra los diferentes pinceles y elementos de dibujo de WPF.

Para obtener más información, consulte Información general sobre pinceles de WPF.For more information, see WPF Brushes Overview. Para obtener un ejemplo introductorio, vea Ejemplo de pinceles.For an introductory sample, see Brushes Sample.

Representación 3D3-D Rendering

WPFWPF proporciona un conjunto de capacidades de representación 3D que se integran con la compatibilidad con gráficos 2D en WPFWPF para que pueda crear un diseño más interesante, IUUI y visualización de datos.provides a set of 3-D rendering capabilities that integrate with 2-D graphics support in WPFWPF in order for you to create more exciting layout, IUUI, and data visualization. En un extremo del espectro, WPFWPF permite representar imágenes 2D en las superficies de las formas 3D, que se muestran en la siguiente ilustración.At one end of the spectrum, WPFWPF enables you to render 2-D images onto the surfaces of 3-D shapes, which the following illustration demonstrates.

Captura de pantalla de un ejemplo en el que se muestran formas 3D con texturas diferentes.

Para obtener más información, consulte Información general sobre gráficos 3D.For more information, see 3-D Graphics Overview. Para obtener un ejemplo introductorio, vea 3-D Solids Sample (Ejemplo de sólidos 3D).For an introductory sample, see 3-D Solids Sample.

AnimaciónAnimation

Use la animación para hacer que los controles y elementos crezcan, vibren, giren o se desvanezcan, crear atractivas transiciones de página y mucho más.Use animation to make controls and elements grow, shake, spin, and fade; and to create interesting page transitions, and more. Dado que WPFWPF le permite animar la mayoría de las propiedades, no solo podrá animar la mayoría de los objetos WPFWPF, también podrá usar WPFWPF para animar objetos personalizados que haya creado.Because WPFWPF enables you to animate most properties, not only can you animate most WPFWPF objects, you can also use WPFWPF to animate custom objects that you create.

Captura de pantalla de un cubo animado.

Para obtener más información, consulte Información general sobre animaciones.For more information, see Animation Overview. Para obtener un ejemplo introductorio, vea Animation Example Gallery (Galería de ejemplos de animación).For an introductory sample, see Animation Example Gallery.

MultimediaMedia

Las imágenes, el vídeo y el audio son maneras de ofrecer experiencias de usuario e información con mucho contenido multimedia.Images, video, and audio are media-rich ways of conveying information and user experiences.

ImágenesImages

Las imágenes, que incluyen iconos, fondos e incluso partes de animaciones, constituyen una pieza esencial de la mayoría de las aplicaciones.Images, which include icons, backgrounds, and even parts of animations, are a core part of most applications. Dado que frecuentemente tendrá que usar imágenes, WPFWPF presenta la posibilidad de trabajar con ellas de diversas maneras.Because you frequently need to use images, WPFWPF exposes the ability to work with them in a variety of ways. En la ilustración siguiente se muestra tan solo una de esas maneras.The following illustration shows just one of those ways.

Captura de pantalla de ejemplo de estiloStyling sample screenshot

Para obtener más información, consulte Información general sobre imágenes.For more information, see Imaging Overview.

Vídeo y audioVideo and Audio

Una característica fundamental de la funcionalidad de gráficos de WPFWPF es que ofrece compatibilidad nativa para trabajar con multimedia, lo que incluye vídeo y audio.A core feature of the graphics capabilities of WPFWPF is to provide native support for working with multimedia, which includes video and audio. En el siguiente ejemplo se muestra cómo insertar un reproductor multimedia en una aplicación.The following example shows how to insert a media player into an application.

<MediaElement Source="media\numbers.wmv" Width="450" Height="250" />

MediaElement es capaz de reproducir vídeo y audio, y es lo suficientemente extensible como para permitir la creación sencilla de interfaces de IU personalizadas.MediaElement is capable of playing both video and audio, and is extensible enough to allow the easy creation of custom UIs.

Para más información, consulte Información general sobre multimedia.For more information, see the Multimedia Overview.

Vea tambiénSee also