WPF Graphics, Animation, and Media Overview

Article
11/16/2012

This topic introduces the graphics, animation, and media features of Windows Presentation Foundation (WPF), which enable you to add graphics, transition effects, sound, and video to your applications.

WPF provides advanced drawing and animation features, features that were previously available only from specialized libraries—specifically, Microsoft Windows Graphics Device Interface (GDI) and Microsoft Windows GDI+. WPF now offers integrated support for multimedia, vector graphics, animation, and content composition, making it easy for developers to build interesting user interfaces and content. Using Microsoft Visual Studio .NET, or even a text editor like Microsoft Notepad, you can create vector graphics or complex animations and integrate media into your applications.

This topic contains the following sections.

What's New with Graphics and Multimedia in the WPF
Animation
Media
Related Topics

What's New with Graphics and Multimedia in the WPF

WPF introduces Windows developers to new graphics features that have the following benefits:

Resolution and device-independent graphics. The WPF graphics system uses device-independent units to enable resolution and device independence. Each device independent pixel automatically scales with the dots-per-inch setting of your system.
Improved precision. The WPF coordinate system uses doubles instead of floats. Transformations and opacity values are also expressed by using doubles. WPF also supports a wider color gamut (scRGB) and provides integrated support for managing inputs from different color spaces.
Advanced graphics and animation support. WPF simplifies graphics programming by managing the scene graph for you; no more worrying about scene processing, rendering loops, and bilinear interpolation. WPF provides hit-testing support, an integrated animation system, and full alpha compositing support.
Hardware acceleration. The WPF graphics system is designed to take advantage of graphics hardware to minimize CPU usage.

2-D Shapes

WPF provides a library of commonly used, vector-drawn 2-D shapes, such as rectangles and ellipses, which the following illustration shows.

Ellipses and rectangles

These intrinsic WPF 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.

<Window
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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!");
    }
}

The following illustration shows the output for the preceding XAML markup and code-behind.

A window with the text "you clicked the ellipse!"

For more information, see Shapes and Basic Drawing in WPF Overview. For an introductory sample, see Shape Elements Sample.

2-D Geometries

When the 2-D shapes that WPF provides are not sufficient, you can use WPF support for geometries and paths to create your own. The following illustration shows how you can use geometries to create shapes, as a drawing brush, and to clip other WPF elements.

Various uses of a Path

For more information, see Geometry Overview. For an introductory sample, see Geometries Sample.

2-D Effects

WPF provides a library of 2-D classes that you can use to create a variety of effects. The 2-D rendering capability of WPF provides the ability to paint UI elements with gradients, bitmaps, drawings, and videos; and to manipulate them by using rotation, scaling, and skewing. The following illustration gives an example of the many effects you can achieve by using WPF brushes.

Illustration of different brushes

For more information, see WPF Brushes Overview. For an introductory sample, see Brushes Sample.

3-D Rendering

WPF provides a set of 3-D rendering capabilities that integrate with 2-D graphics support in WPF in order for you to create more exciting layout, UI, and data visualization. At one end of the spectrum, WPF enables you to render 2-D images onto the surfaces of 3-D shapes, which the following illustration demonstrates.

Visual3D sample screen shot

For more information, see 3-D Graphics Overview. For an introductory sample, see 3-D Solids Sample.

Animation

Use animation to make controls and elements grow, shake, spin, and fade; and to create interesting page transitions, and more. Because WPF enables you to animate most properties, not only can you animate most WPF objects, you can also use WPF to animate custom objects that you create.

Images of an animated cube

For more information, see Animation Overview. For an introductory sample, see Animation Example Gallery.

Media

Images, video, and audio are media-rich ways of conveying information and user experiences.

Images

Images, which include icons, backgrounds, and even parts of animations, are a core part of most applications. Because you frequently need to use images, WPF exposes the ability to work with them in a variety of ways. The following illustration shows just one of those ways.

Styling sample screen shot

For more information, see Imaging Overview. For an introductory sample, WPF Photo Viewer Demo.

Video and Audio

A core feature of the graphics capabilities of WPF is to provide native support for working with multimedia, which includes video and audio. The following example shows how to insert a media player into an application.

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

MediaElement is capable of playing both video and audio, and is extensible enough to allow the easy creation of custom UIs.

For more information, see the Multimedia Overview. For an introductory sample, see Media Gallery.

Share via