Gráficos y multimediaGraphics and Multimedia

Windows Presentation Foundation (WPF)Windows Presentation Foundation (WPF) proporciona compatibilidad para la creación de contenido, lo que facilita a los desarrolladores compilar contenido e interfaces de usuario interesantes, gráficos vectoriales, animación y multimedia.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 el UseLayoutRounding de la propiedad adjunta FrameworkElement.WPF now supports layout rounding with the UseLayoutRounding attached property on FrameworkElement.

  • Composición almacenada en cachéCached Composition

    Con el nuevo BitmapCache y BitmapCacheBrush clases, puede almacenar en caché una parte compleja del árbol visual como 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 parte superior de la ShaderEffect compatibilidad con introducida en WPF 3.5 SP1, permitiendo que las aplicaciones escriban efectos mediante el uso de 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 darle 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, vea los tipos de entradas y salidas lentas en el System.Windows.Media.Animation espacio de nombres.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 los elementos gráficos se basa en el Visual clase.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 ofrece una biblioteca de formas 2D2-D comunes dibujadas mediante vectores, como los rectángulos y las elipses que se muestran en la ilustración siguiente. provides a library of commonly used, vector-drawn 2D2-D shapes, such as rectangles and ellipses, which the following illustration shows.

Elipses y rectángulosEllipses and rectangles

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. El ejemplo siguiente muestra cómo controlar el MouseUp eventos accionados al hacer clic una Ellipse elemento.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.

Ventana con el texto "ha hecho clic en la elipse"A window with the text "you clicked the ellipse!"

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

Cuando las formas 2D2-D que WPFWPF ofrece no sean suficientes, puede usar la compatibilidad con geometrías y trazados de WPFWPF para crear sus propias formas.When the 2D2-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.

Diversos usos de un trayectoVarious uses of a Path

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 ofrece una biblioteca de clases 2D2-D que puede usar para crear diversos efe efectos. provides a library of 2D2-D classes that you can use to create a variety of effects. La funcionalidad de representación 2D2-D de WPFWPF ofrece la posibilidad de pintar elementos de la IUUI que tengan degradados, mapas de bits, dibujos y vídeos; así como para manipularlos mediante rotación, escalado y sesgado.The 2D2-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 de diferentes pincelesIllustration of different brushes

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 ofrece un conjunto de funciones de representación 3D3-D que se integran con la compatibilidad de gráficos 2D2-D en WPFWPF para que cree un diseño, una IUUI y una visualización de datos más interesantes. provides a set of 3D3-D rendering capabilities that integrate with 2D2-D graphics support in WPFWPF in order for you to create more exciting layout, IUUI, and data visualization. En un extremo del espectro, WPFWPF le permite representar imágenes 2D2-D en las superficies de formas 3D3-D, lo que se muestra en la siguiente ilustración.At one end of the spectrum, WPFWPF enables you to render 2D2-D images onto the surfaces of 3D3-D shapes, which the following illustration demonstrates.

Captura de pantalla de ejemplo de Visual3DVisual3D sample screen shot

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.

Imágenes de un cubo animadoImages of an animated cube

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 aplicación de estilosStyling sample screen shot

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 personalizado UIsUIs.MediaElement is capable of playing both video and audio, and is extensible enough to allow the easy creation of custom UIsUIs.

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

Vea tambiénSee Also

System.Windows.Media
System.Windows.Media.Animation
System.Windows.Media.Media3D
Imágenes y gráficos 2D2D Graphics and Imaging
Información general sobre formas y dibujo básico en WPFShapes and Basic Drawing in WPF Overview
Información general sobre el dibujo con colores sólidos y degradadosPainting with Solid Colors and Gradients Overview
Pintar con imágenes, dibujos y elementos visualesPainting with Images, Drawings, and Visuals
Animación y temporizaciónAnimation and Timing
Gráficos 3D3-D Graphics
MultimediaMultimedia