Initial WPF content migrated (#17)

* Reset branch for WPF changes

* Convert BMP to PNG; fix link-out-of-scope err

* Add snippets for WPF... 6794 files!!!!

* Add missing snippets

* update file updated between migration

* Fix paths to include

* update breadcrumb and toc

* fix index links

* fix index links

* fix index links

* fix markdown

dotnet-desktop-guide/framework/wpf/graphics-multimedia/3-d-graphics-how-to-topics.md

@@ -0,0 +1,43 @@
+---
+title: "3D Graphics How-to Topics"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "3D graphics [WPF]"
+  - "graphics [WPF], 3D"
+ms.assetid: 4f091835-28d1-498c-b660-9b3acf34ed13
+---
+# 3D Graphics How-to Topics
+The topics in this section demonstrate how to use 3D graphics in [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] applications.  
+  
+## In This Section  
+ [Create a 3D Scene](how-to-create-a-3-d-scene.md)  
+ [Apply a Drawing to a 3D Model](how-to-apply-a-drawing-to-a-3-d-model.md)  
+ [Apply Material to the Front and Back of a 3D Object](how-to-apply-material-to-the-front-and-back-of-a-3-d-object.md)  
+ [Apply Emissive Material to a 3D Object](how-to-apply-emissive-material-to-a-3-d-object.md)  
+ [Transform the Scale of a 3D Model](how-to-transform-the-scale-of-a-3-d-model.md)  
+ [Apply Multiple Transformations to a 3D Model](how-to-apply-multiple-transformations-to-a-3-d-model.md)  
+ [Animate 3D Translations](how-to-animate-3-d-translations.md)  
+ [Animate a 3D Rotation Using Storyboards](how-to-animate-a-3-d-rotation-using-storyboards.md)  
+ [Animate a 3D Rotation Using Rotation3DAnimation](how-to-animate-a-3-d-rotation-using-rotation3danimation.md)  
+ [Animate a 3D Rotation Using Quaternions](how-to-animate-a-3-d-rotation-using-quaternions.md)  
+ [Animate a 3D Rotation Using Key Frames (Rotation3DAnimationUsingKeyFrames)](how-to-animate-a-3-d-rotation-using-key-frames.md)  
+ [Animate a 3D Rotation Using Key Frames (QuaternionAnimationUsingKeyFrames)](animate-a-3-d-rotation-quaternionanimationusingkeyframes.md)  
+ [Animate Camera Position and Direction in a 3D Scene](how-to-animate-camera-position-and-direction-in-a-3d-scene.md)  
+ [Animate Camera Position and Direction Using Key Frames](how-to-animate-camera-position-and-direction-using-key-frames.md)  
+ [Animate Material Properties in a 3D Scene](how-to-animate-material-properties-in-a-3-d-scene.md)  
+ [Hit Test in a Viewport3D](how-to-hit-test-in-a-viewport3d.md)  
+ [Test Point4D structures for equality and inequality](how-to-test-point4d-structures-for-equality-and-inequality.md)  
+  
+## Reference  
+ <xref:System.Windows.Controls.Viewport3D>  
+  
+ <xref:System.Windows.Media.Media3D.PerspectiveCamera>  
+  
+ <xref:System.Windows.Media.Media3D.DirectionalLight>  
+  
+ <xref:System.Windows.Media.Media3D.Material>  
+  
+## Related Sections  
+ [Graphics and Multimedia](index.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/3-d-graphics-overview.md

@@ -0,0 +1,174 @@
+---
+title: "3D Graphics Overview"
+description: Get acquainted with 3D graphics in Windows Presentation Foundation (WPF) to draw, transform, and animate 3D graphics in both markup and procedural code.
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "3D graphics [WPF]"
+  - "graphics [WPF], 3D"
+ms.assetid: 67f31ed4-e36b-4b02-9889-dcce245d7afc
+---
+# 3D Graphics Overview
+<a name="introduction"></a> The 3D functionality in [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] enables developers to draw, transform, and animate 3D graphics in both markup and procedural code. Developers can combine 2D and 3D graphics to create rich controls, provide complex illustrations of data, or enhance the user experience of an application's interface. 3D support in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] is not designed to provide a full-featured game-development platform. This topic provides an overview of 3D functionality in the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] graphics system.  
+
+<a name="threed_in_2d"></a>
+## 3D in a 2D Container  
+ 3D graphics content in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] is encapsulated in an element, <xref:System.Windows.Controls.Viewport3D>, that can participate in the two-dimensional element structure. The graphics system treats <xref:System.Windows.Controls.Viewport3D> as a two-dimensional visual element like many others in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)]. <xref:System.Windows.Controls.Viewport3D> functions as a window—a viewport—into a three-dimensional scene. More accurately, it is a surface on which a 3D scene is projected.  
+  
+ In a conventional 2D application, use <xref:System.Windows.Controls.Viewport3D> as you would another container element like Grid or Canvas.  Although you can use <xref:System.Windows.Controls.Viewport3D> with other 2D drawing objects in the same scene graph, you cannot interpenetrate 2D and 3D objects within a <xref:System.Windows.Controls.Viewport3D>.  This topic will focus on how to draw 3D graphics inside the <xref:System.Windows.Controls.Viewport3D>.  
+  
+<a name="coord_space"></a>
+## 3D Coordinate Space  
+ The [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] coordinate system for 2D graphics locates the origin in the upper left of the rendering area (typically the screen). In the 2D system, positive x-axis values proceed to the right and positive y-axis values proceed downward.  In the 3D coordinate system, however, the origin is located in the center of the rendering area, with positive x-axis values proceeding to the right but positive y-axis values proceeding upward instead, and positive z-axis values proceeding outward from the origin, toward the viewer.  
+  
+ ![Coordinate systems](./media/coordsystem-1.png "CoordSystem-1")  
+Conventional 2D and 3D coordinate system representations  
+  
+ The space defined by these axes is the stationary frame of reference for 3D objects in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)]. As you build models in this space and create lights and cameras to view them, it's helpful to distinguish this stationary frame of reference, or "world space," from the local frame of reference you create for each model when you apply transformations to it. Remember also that objects in world space might look entirely different, or not be visible at all, depending on light and camera settings, but the position of the camera does not change the location of objects in world space.  
+  
+<a name="cameras"></a>
+## Cameras and Projections  
+ Developers who work in 2D are accustomed to positioning drawing primitives on a two-dimensional screen. When you create a 3D scene, it's important to remember that you are really creating a 2D representation of 3D objects. Because a 3D scene looks different depending on the onlooker's point of view, you must specify that point of view. The <xref:System.Windows.Media.Media3D.Camera> class allows you to specify this point of view for a 3D scene.  
+  
+ Another way to understand how a 3D scene is represented on a 2D surface is by describing the scene as a projection onto the viewing surface. The <xref:System.Windows.Media.Media3D.ProjectionCamera> allows you to specify different projections and their properties to change how the onlooker sees 3D models. A <xref:System.Windows.Media.Media3D.PerspectiveCamera> specifies a projection that foreshortens the scene.  In other words, the <xref:System.Windows.Media.Media3D.PerspectiveCamera> provides vanishing-point perspective.  You can specify the position of the camera in the coordinate space of the scene, the direction and field of view for the camera, and a vector that defines the direction of "up" in the scene. The following diagram illustrates the <xref:System.Windows.Media.Media3D.PerspectiveCamera>'s projection.  
+  
+ The <xref:System.Windows.Media.Media3D.ProjectionCamera.NearPlaneDistance%2A> and <xref:System.Windows.Media.Media3D.ProjectionCamera.FarPlaneDistance%2A> properties of <xref:System.Windows.Media.Media3D.ProjectionCamera> limit the range of the camera's projection. Because cameras can be located anywhere in the scene, it's possible for the camera to be actually positioned inside a model or very near a model, making it hard to distinguish objects properly.  <xref:System.Windows.Media.Media3D.ProjectionCamera.NearPlaneDistance%2A> allows you to specify a minimum distance from the camera beyond which objects will not be drawn.  Conversely, <xref:System.Windows.Media.Media3D.ProjectionCamera.FarPlaneDistance%2A> lets you specify a distance from the camera beyond which objects will not be drawn, which ensures that objects too far away to be recognizable won't be included in the scene.  
+  
+ ![Camera setup](./media/coordsystem-6.png "CoordSystem-6")  
+Camera position  
+  
+ <xref:System.Windows.Media.Media3D.OrthographicCamera> specifies an orthogonal projection of a 3D model to a 2D visual surface. Like other cameras, it specifies a position, viewing direction, and "upward" direction. Unlike <xref:System.Windows.Media.Media3D.PerspectiveCamera>, however, <xref:System.Windows.Media.Media3D.OrthographicCamera> describes a projection that does not include perspective foreshortening. In other words, <xref:System.Windows.Media.Media3D.OrthographicCamera> describes a viewing box whose sides are parallel, instead of one whose sides meet in a point at the camera. The following image shows the same model as viewed using <xref:System.Windows.Media.Media3D.PerspectiveCamera> and <xref:System.Windows.Media.Media3D.OrthographicCamera>.  
+  
+ ![Orthographic and perspective projection](./media/camera-projections4.png "Camera_projections4")  
+Perspective and Orthographic Projections  
+  
+ The following code shows some typical camera settings.  
+  
+ [!code-csharp[3dgallery_procedural_snip#Basic3DShapeCodeExampleInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_procedural_snip/CSharp/Basic3DShapeExample.cs#basic3dshapecodeexampleinline1)]
+ [!code-vb[3dgallery_procedural_snip#Basic3DShapeCodeExampleInline1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DGallery_procedural_snip/visualbasic/basic3dshapeexample.vb#basic3dshapecodeexampleinline1)]  
+  
+<a name="models_meshes"></a>
+## Model and Mesh Primitives  
+  
+ <xref:System.Windows.Media.Media3D.Model3D> is the abstract base class that represents a generic 3D object. To build a 3D scene, you need some objects to view, and the objects that make up the scene graph derive from <xref:System.Windows.Media.Media3D.Model3D>. Currently, the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] supports modeling geometries with <xref:System.Windows.Media.Media3D.GeometryModel3D>. The <xref:System.Windows.Media.Media3D.GeometryModel3D.Geometry%2A> property of this model takes a mesh primitive.  
+  
+ To build a model, begin by building a primitive, or mesh. A 3D primitive is a collection of vertices that form a single 3D entity. Most 3D systems provide primitives modeled on the simplest closed figure: a triangle defined by three vertices.  Because the three points of a triangle are coplanar, you can continue adding triangles in order to model more complex shapes, called meshes.  
+  
+ The [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] 3D system currently provides the <xref:System.Windows.Media.Media3D.MeshGeometry3D> class, which allows you to specify any geometry; it does not currently support predefined 3D primitives like spheres and cubic forms. Begin creating a <xref:System.Windows.Media.Media3D.MeshGeometry3D> by specifying a list of triangle vertices as its <xref:System.Windows.Media.Media3D.MeshGeometry3D.Positions%2A> property. Each vertex is specified as a <xref:System.Windows.Media.Media3D.Point3D>.  (In [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)], specify this property as a list of numbers grouped in threes that represent the coordinates of each vertex.) Depending on its geometry, your mesh might be composed of many triangles, some of which share the same corners (vertices). To draw the mesh correctly, the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] needs information about which vertices are shared by which triangles. You provide this information by specifying a list of triangle indices with the <xref:System.Windows.Media.Media3D.MeshGeometry3D.TriangleIndices%2A> property. This list specifies the order in which the points specified in the <xref:System.Windows.Media.Media3D.MeshGeometry3D.Positions%2A> list will determine a triangle.  
+  
+ [!code-xaml[basic3d#Basic3DXAML3DN3](~/samples/snippets/xaml/VS_Snippets_Wpf/Basic3D/XAML/Window1.xaml#basic3dxaml3dn3)]  
+  
+ In the preceding example, the <xref:System.Windows.Media.Media3D.MeshGeometry3D.Positions%2A> list specifies eight vertices to define a cube-shaped mesh. The <xref:System.Windows.Media.Media3D.MeshGeometry3D.TriangleIndices%2A> property specifies a list of twelve groups of three indices.  Each number in the list refers to an offset into the <xref:System.Windows.Media.Media3D.MeshGeometry3D.Positions%2A> list.  For example, the first three vertices specified by the <xref:System.Windows.Media.Media3D.MeshGeometry3D.Positions%2A> list are (1,1,0), (0,1,0), and (0,0,0). The first three indices specified by the <xref:System.Windows.Media.Media3D.MeshGeometry3D.TriangleIndices%2A> list are 0, 2, and 1, which correspond to the first, third, and second points in the <xref:System.Windows.Media.Media3D.MeshGeometry3D.Positions%2A> list. As a result, the first triangle that makes up the cube model will be composed from (1,1,0) to (0,1,0) to  (0,0,0), and the remaining eleven triangles will be determined similarly.  
+  
+ You can continue defining the model by specifying values for the <xref:System.Windows.Media.Media3D.MeshGeometry3D.Normals%2A> and <xref:System.Windows.Media.Media3D.MeshGeometry3D.TextureCoordinates%2A> properties.  To render the surface of the model, the graphics system needs information about which direction the surface is facing at any given triangle. It uses this information to make lighting calculations for the model: surfaces that face directly towards a light source appear brighter than those angled away from the light. Though the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] can determine default normal vectors by using the position coordinates, you can also specify different normal vectors to approximate the appearance of curved surfaces.  
+  
+ The <xref:System.Windows.Media.Media3D.MeshGeometry3D.TextureCoordinates%2A> property specifies a collection of <xref:System.Windows.Point>s that tell the graphics system how to map the coordinates that determine how a texture is drawn to the vertices of the mesh. <xref:System.Windows.Media.Media3D.MeshGeometry3D.TextureCoordinates%2A> are specified as a value between zero and 1, inclusive.  As with the <xref:System.Windows.Media.Media3D.MeshGeometry3D.Normals%2A> property, the graphics system can calculate default texture coordinates, but you might choose to set different texture coordinates to control the mapping of a texture that includes part of a repeating pattern, for example. More information about texture coordinates can be found in subsequent topics or in the Managed Direct3D SDK.  
+  
+ The following example shows how to create one face of the cube model in procedural code. You can draw the entire cube as a single GeometryModel3D; this example draws the cube's face as a distinct model in order to apply separate textures to each face later.  
+  
+ [!code-csharp[3doverview#3DOverview3DN6](~/samples/snippets/csharp/VS_Snippets_Wpf/3DOverview/CSharp/Window1.xaml.cs#3doverview3dn6)]
+ [!code-vb[3doverview#3DOverview3DN6](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DOverview/visualbasic/window1.xaml.vb#3doverview3dn6)]  
+  
+ [!code-csharp[3doverview#3DOverview3DN7](~/samples/snippets/csharp/VS_Snippets_Wpf/3DOverview/CSharp/Window1.xaml.cs#3doverview3dn7)]
+ [!code-vb[3doverview#3DOverview3DN7](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DOverview/visualbasic/window1.xaml.vb#3doverview3dn7)]  
+  
+<a name="materials"></a>'
+## Applying Materials to the Model  
+  
+ For a mesh to look like a three-dimensional object, it must have an applied texture to cover the surface defined by its vertices and triangles so it can be lit and projected by the camera. In 2D, you use the <xref:System.Windows.Media.Brush> class to apply colors, patterns, gradients, or other visual content to areas of the screen.  The appearance of 3D objects, however, is a function of the lighting model, not just of the color or pattern applied to them. Real-world objects reflect light differently depending on the quality of their surfaces: glossy and shiny surfaces don't look the same as rough or matte surfaces, and some objects seem to absorb light while others glow. You can apply all the same brushes to 3D objects that you can apply to 2D objects, but you can't apply them directly.  
+  
+ To define the characteristics of a model's surface, [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] uses the <xref:System.Windows.Media.Media3D.Material> abstract class. The concrete subclasses of Material determine some of the appearance characteristics of the model's surface, and each also provides a Brush property to which you can pass a SolidColorBrush, TileBrush, or VisualBrush.  
+  
+- <xref:System.Windows.Media.Media3D.DiffuseMaterial> specifies that the brush will be applied to the model as though that model were lit diffusely. Using DiffuseMaterial most resembles using brushes directly on 2D models; model surfaces do not reflect light as though shiny.  
+  
+- <xref:System.Windows.Media.Media3D.SpecularMaterial> specifies that the brush will be applied to the model as though the model's surface were hard or shiny, capable of reflecting highlights. You can set the degree to which the texture will suggest this reflective quality, or "shine," by specifying a value for the <xref:System.Windows.Media.Media3D.SpecularMaterial.SpecularPower%2A> property.  
+  
+- <xref:System.Windows.Media.Media3D.EmissiveMaterial> allows you to specify that the texture will be applied as though the model were emitting light equal to the color of the brush. This does not make the model a light; however, it will participate differently in shadowing than it would if textured with DiffuseMaterial or SpecularMaterial.  
+  
+ For better performance, the backfaces of a <xref:System.Windows.Media.Media3D.GeometryModel3D> (those faces that are out of view because they are on the opposite side of the model from the camera) are culled from the scene.  To specify a <xref:System.Windows.Media.Media3D.Material> to apply to the backface of a model like a plane, set the model's <xref:System.Windows.Media.Media3D.GeometryModel3D.BackMaterial%2A> property.  
+  
+ To achieve some surface qualities, like glowing or reflective effects, you might want to apply several different brushes to a model in succession. You can apply and reuse multiple Materials by using the <xref:System.Windows.Media.Media3D.MaterialGroup> class. The children of the MaterialGroup are applied first to last in multiple rendering passes.  
+  
+ The following code examples show how to apply a solid color and a drawing as brushes to 3D models.  
+  
+ [!code-xaml[basic3d#Basic3DXAML3DN5](~/samples/snippets/xaml/VS_Snippets_Wpf/Basic3D/XAML/Window1.xaml#basic3dxaml3dn5)]  
+ [!code-xaml[3doverview#3DOverview3DN9](~/samples/snippets/csharp/VS_Snippets_Wpf/3DOverview/CSharp/app.xaml#3doverview3dn9)]  
+ [!code-csharp[3doverview#3DOverview3DN8](~/samples/snippets/csharp/VS_Snippets_Wpf/3DOverview/CSharp/Window1.xaml.cs#3doverview3dn8)]  
+ [!code-vb[3doverview#3DOverview3DN8](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DOverview/visualbasic/window1.xaml.vb#3doverview3dn8)]  
+  
+<a name="lights"></a>
+## Illuminating the Scene  
+ Lights in 3D graphics do what lights do in the real world: they make surfaces visible. More to the point, lights determine what part of a scene will be included in the projection. Light objects in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] create a variety of light and shadow effects and are modeled after the behavior of various real-world lights. Include at least one light in your scene, or no models will be visible.  
+  
+ The following lights derive from the base class <xref:System.Windows.Media.Media3D.Light>:  
+  
+- <xref:System.Windows.Media.Media3D.AmbientLight>: Provides ambient lighting that illuminates all objects uniformly regardless of their location or orientation.  
+  
+- <xref:System.Windows.Media.Media3D.DirectionalLight>: Illuminates like a distant light source.  Directional lights have a <xref:System.Windows.Media.Media3D.DirectionalLight.Direction%2A> specified as a Vector3D, but no specified location.  
+  
+- <xref:System.Windows.Media.Media3D.PointLight>: Illuminates like a nearby light source. PointLights have a position and cast light from that position. Objects in the scene are illuminated depending on their position and distance with respect to the light. <xref:System.Windows.Media.Media3D.PointLightBase> exposes a <xref:System.Windows.Media.Media3D.PointLightBase.Range%2A> property, which determines a distance beyond which models will not be illuminated by the light. PointLight also exposes attenuation properties, which determine how the light's intensity diminishes over distance. You can specify constant, linear, or quadratic interpolations for the light's attenuation.  
+  
+- <xref:System.Windows.Media.Media3D.SpotLight>: Inherits from <xref:System.Windows.Media.Media3D.PointLight>. Spotlights illuminate like PointLight and have both position and direction. They project light in a cone-shaped area set by <xref:System.Windows.Media.Media3D.SpotLight.InnerConeAngle%2A> and <xref:System.Windows.Media.Media3D.SpotLight.OuterConeAngle%2A> properties, specified in degrees.  
+  
+ Lights are <xref:System.Windows.Media.Media3D.Model3D> objects, so you can transform and animate light properties, including position, color, direction, and range.  
+  
+ [!code-xaml[hittest3d#HitTest3D3DN6](~/samples/snippets/csharp/VS_Snippets_Wpf/HitTest3D/CSharp/Window1.xaml#hittest3d3dn6)]  
+  
+ [!code-csharp[basic3d#Basic3D3DN11](~/samples/snippets/csharp/VS_Snippets_Wpf/Basic3D/CSharp/Window1.xaml.cs#basic3d3dn11)]
+ [!code-vb[basic3d#Basic3D3DN11](~/samples/snippets/visualbasic/VS_Snippets_Wpf/Basic3D/visualbasic/window1.xaml.vb#basic3d3dn11)]  
+  
+ [!code-csharp[basic3d#Basic3D3DN12](~/samples/snippets/csharp/VS_Snippets_Wpf/Basic3D/CSharp/Window1.xaml.cs#basic3d3dn12)]
+ [!code-vb[basic3d#Basic3D3DN12](~/samples/snippets/visualbasic/VS_Snippets_Wpf/Basic3D/visualbasic/window1.xaml.vb#basic3d3dn12)]  
+  
+ [!code-csharp[basic3d#Basic3D3DN13](~/samples/snippets/csharp/VS_Snippets_Wpf/Basic3D/CSharp/Window1.xaml.cs#basic3d3dn13)]
+ [!code-vb[basic3d#Basic3D3DN13](~/samples/snippets/visualbasic/VS_Snippets_Wpf/Basic3D/visualbasic/window1.xaml.vb#basic3d3dn13)]  
+  
+<a name="transforms"></a>
+## Transforming Models  
+ When you create models, they have a particular location in the scene. To move those models around in the scene, to rotate them, or to change their size, it's not practical to change the vertices that define the models themselves.  Instead, just as in 2D, you apply transformations to models.  
+  
+ Each model object has a <xref:System.Windows.Media.Media3D.Model3D.Transform%2A> property with which you can move, reorient, or resize the model.  When you apply a transform, you effectively offset all the points of the model by whatever vector or value specified by the transform. In other words, you've transformed the coordinate space in which the model is defined ("model space"), but you haven't changed the values that make up the model's geometry in the coordinate system of the entire scene ("world space").  
+  
+ For more information about transforming models, see [3D Transformations Overview](3-d-transformations-overview.md).  
+  
+<a name="animations"></a>
+## Animating Models  
+ The [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] 3D implementation participates in the same timing and animation system as 2D graphics. In other words, to animate a 3D scene, animate the properties of its models. It's possible to animate properties of primitives directly, but it's typically easier to animate transformations that change the position or appearance of models. Because transformations can be applied to <xref:System.Windows.Media.Media3D.Model3DGroup> objects as well as individual models, it's possible to apply one set of animations to a child of a Model3DGroup and another set of animations to a group of child objects. You can also achieve a variety of visual effects by animating the properties of your scene's lighting. Finally, you might choose to animate the projection itself by animating the camera position or field of view. For background information on the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] timing and animation system, see the [Animation Overview](animation-overview.md), [Storyboards Overview](storyboards-overview.md), and [Freezable Objects Overview](../advanced/freezable-objects-overview.md) topics.  
+  
+ To animate an object in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)], you create a timeline, define an animation (which is really a change in some property value over time), and specify the property to which to apply the animation. Because all the objects in a 3D scene are children of <xref:System.Windows.Controls.Viewport3D>, the properties targeted by any animation you want to apply to the scene are properties of Viewport3D.  
+  
+ Suppose you want to make a model appear to wobble in place. You might choose to apply a <xref:System.Windows.Media.Media3D.RotateTransform3D> to the model, and animate the axis of its rotation from one vector to another. The following code example demonstrates applying a Vector3DAnimation to the Axis property of the transformation's Rotation3D, assuming the RotateTransform3D to be one of several transforms applied to the model with a TransformGroup.  
+  
+ [!code-csharp[3doverview#3DOverview3DN1](~/samples/snippets/csharp/VS_Snippets_Wpf/3DOverview/CSharp/Window1.xaml.cs#3doverview3dn1)]
+ [!code-vb[3doverview#3DOverview3DN1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DOverview/visualbasic/window1.xaml.vb#3doverview3dn1)]  
+  
+ [!code-csharp[3doverview#3DOverview3DN3](~/samples/snippets/csharp/VS_Snippets_Wpf/3DOverview/CSharp/Window1.xaml.cs#3doverview3dn3)]
+ [!code-vb[3doverview#3DOverview3DN3](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DOverview/visualbasic/window1.xaml.vb#3doverview3dn3)]  
+  
+ [!code-csharp[3doverview#3DOverview3DN4](~/samples/snippets/csharp/VS_Snippets_Wpf/3DOverview/CSharp/Window1.xaml.cs#3doverview3dn4)]
+ [!code-vb[3doverview#3DOverview3DN4](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DOverview/visualbasic/window1.xaml.vb#3doverview3dn4)]  
+  
+ [!code-csharp[3doverview#3DOverview3DN5](~/samples/snippets/csharp/VS_Snippets_Wpf/3DOverview/CSharp/Window1.xaml.cs#3doverview3dn5)]
+ [!code-vb[3doverview#3DOverview3DN5](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DOverview/visualbasic/window1.xaml.vb#3doverview3dn5)]  
+  
+<a name="animations1"></a>
+## Add 3D Content to the Window  
+ To render the scene, add models and lights to a <xref:System.Windows.Media.Media3D.Model3DGroup>, then set the <xref:System.Windows.Media.Media3D.Model3DGroup> as the <xref:System.Windows.Media.Media3D.ModelVisual3D.Content%2A> of a <xref:System.Windows.Media.Media3D.ModelVisual3D>. Add the <xref:System.Windows.Media.Media3D.ModelVisual3D> to the <xref:System.Windows.Controls.Viewport3D.Children%2A> collection of the <xref:System.Windows.Controls.Viewport3D>. Add cameras to the <xref:System.Windows.Controls.Viewport3D> by setting its <xref:System.Windows.Controls.Viewport3D.Camera%2A> property.  
+  
+ Finally, add the <xref:System.Windows.Controls.Viewport3D> to the window. When the <xref:System.Windows.Controls.Viewport3D> is included as the content of a layout element like Canvas, specify the size of the Viewport3D by setting its <xref:System.Windows.FrameworkElement.Height%2A> and <xref:System.Windows.FrameworkElement.Width%2A> properties (inherited from <xref:System.Windows.FrameworkElement>).  
+  
+ [!code-xaml[hostingwpfusercontrolinwf#1](~/samples/snippets/csharp/VS_Snippets_Wpf/HostingWpfUserControlInWf/CSharp/HostingWpfUserControlInWf/ConeControl.xaml#1)]  
+  
+## See also
+
+- <xref:System.Windows.Controls.Viewport3D>
+- <xref:System.Windows.Media.Media3D.PerspectiveCamera>
+- <xref:System.Windows.Media.Media3D.DirectionalLight>
+- <xref:System.Windows.Media.Media3D.Material>
+- [3D Transformations Overview](3-d-transformations-overview.md)
+- [Maximize WPF 3D Performance](maximize-wpf-3d-performance.md)
+- [How-to Topics](3-d-graphics-how-to-topics.md)
+- [Shapes and Basic Drawing in WPF Overview](shapes-and-basic-drawing-in-wpf-overview.md)
+- [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/3-d-transformations-overview.md

@@ -0,0 +1,104 @@
+---
+title: "3D Transformations Overview"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "3D transformations"
+  - "transformations [WPF], 3D"
+ms.assetid: e45e555d-ac1e-4b36-aced-e433afe7f27f
+---
+# 3D Transformations Overview
+This topic describes how to apply transformations to 3D models in the [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] graphics system. Transformations allow the developer to reposition, resize, and reorient models without changing the base values that define them.  
+
+## 3D Coordinate Space  
+ 3D graphics content in [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] is encapsulated in an element, <xref:System.Windows.Controls.Viewport3D>, that can participate in the two-dimensional element structure. The graphics system treats Viewport3D as a two-dimensional visual element like many others in [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)]. Viewport3D functions as a window—a viewport—into a three-dimensional scene. More accurately, it is a surface on which a 3D scene is projected.  Although you can use Viewport3D with other 2D drawing objects in the same scene graph, you cannot interpenetrate 2D and 3D objects within a Viewport3D. In the following discussion, the coordinate space described is contained by the Viewport3D element.  
+  
+ The [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] coordinate system for 2D graphics locates the origin in the upper left of the rendering surface (typically the screen). In the 2D system, positive x-axis values proceed to the right and positive y-axis values proceed downward. In the 3D coordinate system, however, the origin is located in the center of the screen, with positive x-axis values proceeding to the right but positive y-axis values proceeding upward instead, and positive z-axis values proceeding outward from the origin, toward the viewer.  
+  
+ ![Coordinate systems](./media/coordsystem-1.png "CoordSystem-1")  
+Coordinate System Comparison  
+  
+ The space defined by these axes is the stationary frame of reference for 3D objects in [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)]. As you build models in this space and create lights and cameras to view them, it's helpful to distinguish this stationary frame of reference, or "world space," from the local frame of reference you create for each model when you apply transformations to it. Remember also that objects in world space might look entirely different, or not be visible at all, depending on light and camera settings, but the position of the camera does not change the location of objects in world space.  
+  
+## Transforming Models  
+ When you create models, they have a particular location in the scene. To move those models around in the scene, to rotate them, or to change their size, it's not practical to change the vertices that define the models themselves. Instead, just as in 2D, you apply transformations to models.  
+  
+ Each model object has a <xref:System.Windows.Media.Media3D.Model3D.Transform%2A> property with which you can move, re-orient, or resize the model. When you apply a transform, you effectively offset all the points of the model by whatever vector or value is specified by the transform. In other words, you've transformed the coordinate space in which the model is defined ("model space"), but you haven't changed the values that make up the model's geometry in the coordinate system of the entire scene ("world space").  
+  
+## Translation Transformations  
+ 3D transformations inherit from the abstract base class <xref:System.Windows.Media.Media3D.Transform3D>; these include the affine transform classes <xref:System.Windows.Media.Media3D.TranslateTransform3D>, <xref:System.Windows.Media.Media3D.ScaleTransform3D>, and <xref:System.Windows.Media.Media3D.RotateTransform3D>. The [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] 3D system also provides a <xref:System.Windows.Media.Media3D.MatrixTransform3D> class that lets you specify the same transformations in more concise matrix operations.  
+  
+ <xref:System.Windows.Media.Media3D.TranslateTransform3D> moves all the points in the Model3D in the direction of the offset vector you specify with the <xref:System.Windows.Media.Media3D.TranslateTransform3D.OffsetX%2A>, <xref:System.Windows.Media.Media3D.TranslateTransform3D.OffsetY%2A>, and <xref:System.Windows.Media.Media3D.TranslateTransform3D.OffsetZ%2A> properties. For example, given one vertex of a cube at (2,2,2), an offset vector of (0,1.6,1) would move that vertex (2,2,2) to (2,3.6,3). The cube's vertex is still (2,2,2) in model space, but now that model space has changed its relationship to world space so that (2,2,2) in model space is (2,3.6,3) in world space.  
+  
+ ![Translation figure](./media/transforms-translate.png "Transforms-Translate")  
+Translation with Offset  
+  
+ The following code examples show how to apply a translation.  
+  
+ [!code-xaml[animation3dgallery_snip#Translation3DAnimationExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/Translation3DAnimationExample.xaml#translation3danimationexamplewholepage)]  
+  
+## Scale Transformations  
+ <xref:System.Windows.Media.Media3D.ScaleTransform3D> changes the model's scale by a specified scale vector with reference to a center point. Specify a uniform scale, which scales the model by the same value in the X, Y, and Z axes, to change the model's size proportionally. For example, setting the transform's <xref:System.Windows.Media.ScaleTransform.ScaleX%2A>, <xref:System.Windows.Media.ScaleTransform.ScaleY%2A>, and <xref:System.Windows.Media.Media3D.ScaleTransform3D.ScaleZ%2A> properties to 0.5 halves the size of the model; setting the same properties to 2 doubles its scale in all three axes.  
+  
+ ![Uniform ScaleTransform3D](./media/threecubes-uniformscale-1.png "threecubes_uniformscale_1")  
+ScaleVector Example  
+  
+ By specifying a non-uniform scale transformation—a scale transformation whose X, Y, and Z values are not all the same—you can cause a model to stretch or contract in one or two dimensions without affecting the others. For example, setting <xref:System.Windows.Media.ScaleTransform.ScaleX%2A> to 1, <xref:System.Windows.Media.ScaleTransform.ScaleY%2A> to 2, and <xref:System.Windows.Media.Media3D.ScaleTransform3D.ScaleZ%2A> to 1 would cause the transformed model to double in height but remain unchanged along the X and Z axes.  
+  
+ By default, ScaleTransform3D causes vertices to expand or contract about the origin (0,0,0). If the model you want to transform is not drawn from the origin, however, scaling the model from the origin will not scale the model "in place." Instead, when the model's vertices are multiplied by the scale vector, the scale operation will have the effect of translating the model as well as scaling it.  
+  
+ ![Three cubes scaled with center point specified](./media/threecubes-scaledwithcenter-1.png "threecubes_scaledwithcenter_1")  
+Scale Center Example  
+  
+ To scale a model "in place," specify the center of the model by setting the ScaleTransform3D's <xref:System.Windows.Media.ScaleTransform.CenterX%2A>, <xref:System.Windows.Media.ScaleTransform.CenterY%2A>, and <xref:System.Windows.Media.Media3D.ScaleTransform3D.CenterZ%2A> properties. This ensures that the graphics system scales the model space and then translates it to center on the specified <xref:System.Windows.Media.Media3D.Point3D>. Conversely, if you've built the model about the origin and specify a different center point, expect to see the model translated away from the origin.  
+  
+## Rotation Transformations  
+ You can rotate a model in 3D in several different ways. A typical rotation transformation specifies an axis and an angle of rotation around that axis. The <xref:System.Windows.Media.Media3D.RotateTransform3D> class allows you to define a <xref:System.Windows.Media.Media3D.Rotation3D> with its <xref:System.Windows.Media.Media3D.RotateTransform3D.Rotation%2A> property. You then specify <xref:System.Windows.Media.Media3D.AxisAngleRotation3D.Axis%2A> and <xref:System.Windows.Media.Media3D.AxisAngleRotation3D.Angle%2A> properties on the Rotation3D, in this case an <xref:System.Windows.Media.Media3D.AxisAngleRotation3D>, to define the transformation. The following examples rotate a model by 60 degrees around the Y axis.  
+  
+ [!code-xaml[animation3dgallery_snip#Rotate3DUsingAxisAngleRotation3DExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/Rotat3DUsingAxisAngleRotation3DExample.xaml#rotate3dusingaxisanglerotation3dexamplewholepage)]  
+  
+ Note:[!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] 3D is a right-handed system, which means that a positive angle value for a rotation results in a counter-clockwise rotation about the axis.  
+  
+ Axis-angle rotations assume rotation about the origin if a value is not specified for the <xref:System.Windows.Media.Media3D.RotateTransform3D.CenterX%2A>, <xref:System.Windows.Media.Media3D.RotateTransform3D.CenterY%2A>, and <xref:System.Windows.Media.Media3D.RotateTransform3D.CenterZ%2A> properties on RotateTransform3D. As with scaling, it's helpful to remember that the rotation transforms the model's entire coordinate space. If the model was not created about the origin, or has been translated previously, the rotation might "pivot" about the origin instead of rotating in place.  
+  
+ ![Rotation with new center point](./media/threecubes-rotationwithcenter-1.png "threecubes_rotationwithcenter_1")  
+Rotation with new center specified  
+  
+ To rotate the model "in place," specify the model's actual center as the center of rotation. Because geometry is typically modeled about the origin, you can most often get the expected result of a set of transformations by first sizing the model (scaling it), then setting its orientation (rotating it), and finally moving it to the desired location (translating it).  
+  
+ ![Rotation by 60 degrees in x&#45; and y&#45;axes](./media/twocubes-rotation2axes-1.png "twocubes_rotation2axes_1")  
+Rotation Example  
+  
+ Axis-angle rotations work well for static transformations and some animations. However, consider rotating a cube model 60 degrees around the X axis, then 45 degrees around the Z axis. You can describe this transformation as two discrete affine transformations, or as a matrix. However, it might be difficult to smoothly animate a rotation defined this way. Although the beginning and ending positions of the model computed by either approach are the same, the intermediate positions taken by the model are computationally uncertain. Quaternions represent an alternative way to compute the interpolation between the start and end of a rotation.  
+  
+ A quaternion represents an axis in 3D space and a rotation around that axis. For example, a quaternion might represent a (1,1,2) axis and a rotation of 50 degrees. Quaternions’ power in defining rotations comes from the two operations that you can perform on them: composition and interpolation. The composition of two quaternions applied to a geometry means "rotate the geometry around axis2 by rotation2, then rotate it around axis1 by rotation1." By using composition, you can combine the two rotations on the geometry to get a single quaternion that represents the result. Because quaternion interpolation can calculate a smooth and reasonable path from one axis and orientation to another, you can interpolate from the original to the composed quaternion to achieve a smooth transition from one to the other, enabling you to animate the transformation. For models that you want to animate, you can specify a destination <xref:System.Windows.Media.Media3D.Quaternion> for the rotation by using a <xref:System.Windows.Media.Media3D.QuaternionRotation3D> for the <xref:System.Windows.Media.Media3D.RotateTransform3D.Rotation%2A> property.  
+  
+## Using Transformation Collections  
+ When building a scene, it's common to apply more than one transformation to a model. Add transforms to the <xref:System.Windows.Media.Media3D.Transform3DGroup.Children%2A> collection of the <xref:System.Windows.Media.Media3D.Transform3DGroup> class to group transforms conveniently to apply to various models in the scene. It's often convenient to reuse a transformation in several different groups, in much the way that you can reuse a model by applying a different set of transforms to each instance. Note that order in which the transformations are added to the collection is significant: transforms in the collection are applied from first to last.  
+  
+## Animating Transformations  
+ The [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] 3D implementation participates in the same timing and animation system as 2D graphics. In other words, to animate a 3D scene, animate the properties of its models. It's possible to animate properties of primitives directly, but it's typically easier to animate transformations that change the position or appearance of models. Because transformations can be applied to <xref:System.Windows.Media.Media3D.Model3DGroup> objects as well as individual models, it's possible to apply one set of animations to the children of a Model3Dgroup and another set of animations to a group of objects.  For background information on the [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] timing and animation system, see [Animation Overview](animation-overview.md) and [Storyboards Overview](storyboards-overview.md).  
+  
+ To animate an object in [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)], create a timeline, define an animation (which is really a change in some property value over time), and specify the property to which to apply the animation. This property must be a property of a FrameworkElement. Because all the objects in a 3D scene are children of Viewport3D, the properties targeted by any animation you want to apply to the scene are properties of properties of Viewport3D. It's important to work out the property path for the animation carefully, because the syntax can be verbose.  
+  
+ Suppose you want to rotate an object in place, but also to apply a swinging motion to expose more of the object to view. You might choose to apply a RotateTransform3D to the model, and animate the axis of its rotation from one vector to another. The following code example demonstrates applying a <xref:System.Windows.Media.Animation.Vector3DAnimation> to the Axis property of the transformation's Rotation3D, assuming the RotateTransform3D to be one of several transforms applied to the model with a <xref:System.Windows.Media.TransformGroup>.  
+  
+ [!code-csharp[3doverview#3DOverview3DN1](~/samples/snippets/csharp/VS_Snippets_Wpf/3DOverview/CSharp/Window1.xaml.cs#3doverview3dn1)]
+ [!code-vb[3doverview#3DOverview3DN1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DOverview/visualbasic/window1.xaml.vb#3doverview3dn1)]  
+  
+ [!code-csharp[3doverview#3DOverview3DN3](~/samples/snippets/csharp/VS_Snippets_Wpf/3DOverview/CSharp/Window1.xaml.cs#3doverview3dn3)]
+ [!code-vb[3doverview#3DOverview3DN3](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DOverview/visualbasic/window1.xaml.vb#3doverview3dn3)]  
+  
+ Use a similar syntax to target other transformation properties to move or scale the object.  For example, you might apply a <xref:System.Windows.Media.Animation.Point3DAnimation> to the ScaleCenter property on a scale transform to cause a model to smoothly distort its shape.  
+  
+ Although the preceding examples transform the properties of <xref:System.Windows.Media.Media3D.GeometryModel3D>, it’s also possible to transform the properties of other models in the scene.  By animating translations applied to Light objects, for example, you can create moving light and shadow effects that can dramatically change the appearance of your models.  
+  
+ Because cameras are also models, it’s possible to transform camera properties as well.  While you can certainly change the appearance of the scene by transforming the camera location or plane distances—in effect, transforming the entire scene projection—note that many of the effects you achieve this way may not make as much "visual sense" to the viewer as transformations applied to the location or position of the models in the scene.  
+  
+## See also
+
+- [3D Graphics Overview](3-d-graphics-overview.md)
+- [Transforms Overview](transforms-overview.md)
+- [2D Transforms Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/2DTransforms)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/animate-a-3-d-rotation-quaternionanimationusingkeyframes.md

@@ -0,0 +1,29 @@
+---
+title: "How to: Animate a 3D Rotation Using Key Frames (QuaternionAnimationUsingKeyFrames)"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "3D translations [WPF], animating [WPF], with key frames (QuaternionAnimationUsingKeyFrames)"
+  - "key frames [WPF], QuaternionAnimationUsingKeyFrames"
+  - "animation [WPF], 3D translations [WPF], with key frames (QuaternionAnimationUsingKeyFrames)"
+ms.assetid: 09e5707b-7523-4a08-9aa7-bb13cbedccdf
+---
+# How to: Animate a 3D Rotation Using Key Frames (QuaternionAnimationUsingKeyFrames)
+In the following example, <xref:System.Windows.Media.Animation.QuaternionAnimationUsingKeyFrames> is used to make a 3D object rotate. This animation uses the following key frames:  
+  
+1. <xref:System.Windows.Media.Animation.LinearRotation3DKeyFrame> is used to create a smooth, linear interpolation between values.  
+  
+2. <xref:System.Windows.Media.Animation.DiscreteRotation3DKeyFrame> is used to create sudden "jumps" between values (no interpolation).  
+  
+3. <xref:System.Windows.Media.Animation.SplineRotation3DKeyFrame> is used to create a variable transition between values depending on the <xref:System.Windows.Media.Animation.SplineRotation3DKeyFrame.KeySpline%2A> property. In the example below, this part of the animation starts off slow but toward the end of the time segment, speeds up exponentially.  
+  
+## Example  
+ [!code-xaml[Animation3DGallery_snip#QuaternionAnimationUsingKeyFramesExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/QuaternionAnimationUsingKeyFramesExample.xaml#quaternionanimationusingkeyframesexamplewholepage)]  
+  
+## See also
+
+- [Animate a 3D Rotation Using Storyboards](how-to-animate-a-3-d-rotation-using-storyboards.md)
+- [Animate a 3D Rotation Using Rotation3DAnimation](how-to-animate-a-3-d-rotation-using-rotation3danimation.md)
+- [Animate a 3D Rotation Using Quaternions](how-to-animate-a-3-d-rotation-using-quaternions.md)
+- [Animate a 3D Rotation Using Key Frames (Rotation3DAnimationUsingKeyFrames)](how-to-animate-a-3-d-rotation-using-key-frames.md)
+- [3D Graphics Overview](3-d-graphics-overview.md)
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/animate-an-object-along-a-path-matrix-animation-with-offset.md

@@ -0,0 +1,33 @@
+---
+title: "How to: Animate an Object Along a Path (Matrix Animation with Offset Accumulation)"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "offset accumulation [WPF]"
+  - "animation [WPF], objects along paths (matrix animation with offset accumulation)"
+  - "matrix animation with offset accumulation [WPF]"
+ms.assetid: 1bca90ef-9832-4128-8ed6-62908e7ec146
+---
+# How to: Animate an Object Along a Path (Matrix Animation with Offset Accumulation)
+This example shows how to use the <xref:System.Windows.Media.Animation.MatrixAnimationUsingPath> class to animate an object along a path and have that animation accumulate its offset values as it repeats.  
+  
+## Example  
+ The following example uses the <xref:System.Windows.Media.Animation.MatrixAnimationUsingPath> object to animate the <xref:System.Windows.Media.MatrixTransform.Matrix%2A> property of a <xref:System.Windows.Media.MatrixTransform> applied to a button. As a result, a button moves along a curved path.  
+  
+ In addition, the example sets the <xref:System.Windows.Media.Animation.MatrixAnimationUsingPath.IsOffsetCumulative%2A> property to `true`, which causes the offset of the animated matrix to accumulate as the animation repeats. Because the offset accumulates, the button moves farther across the screen when the animation repeats, rather than resetting to the starting position.  
+  
+ [!code-xaml[PathAnimationGallery_snippet#MatrixAnimationUsingPathOffsetCumulativeWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/PathAnimationGallery_snippet/CS/matrixanimationusingpathexampleoffsetcumulative.xaml#matrixanimationusingpathoffsetcumulativewholepage)]  
+  
+ [!code-csharp[PathAnimationGallery_procedural_snip#MatrixAnimationUsingPathOffsetCumulativeWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/PathAnimationGallery_procedural_snip/CSharp/MatrixAnimationUsingPathExampleOffsetCumulative.cs#matrixanimationusingpathoffsetcumulativewholepage)]
+ [!code-vb[PathAnimationGallery_procedural_snip#MatrixAnimationUsingPathOffsetCumulativeWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PathAnimationGallery_procedural_snip/VisualBasic/MatrixAnimationUsingPathExampleOffsetCumulative.vb#matrixanimationusingpathoffsetcumulativewholepage)]  
+  
+ Note that, although the <xref:System.Windows.Media.Animation.MatrixAnimationUsingPath.IsOffsetCumulative%2A> property causes offset values to accumulate over repetitions, it doesn't cause rotation values to accumulate. To make rotation values accumulate, set the animation's <xref:System.Windows.Media.Animation.MatrixAnimationUsingPath.DoesRotateWithTangent%2A> and <xref:System.Windows.Media.Animation.MatrixAnimationUsingPath.IsAngleCumulative%2A> properties to `true`.  
+  
+ For the complete sample, see [Path Animation Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/PathAnimations). For an example showing how to animate a <xref:System.Windows.Media.Matrix> value along a path without offset accumulation, see [Animate an Object Along a Path (Matrix Animation)](how-to-animate-an-object-along-a-path-matrix-animation.md).  
+  
+## See also
+
+- [Animation Overview](animation-overview.md)
+- [Path Animation How-to Topics](path-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/animation-and-timing-how-to-topics.md

@@ -0,0 +1,52 @@
+---
+title: "Animation and Timing How-to Topics"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "timing system [WPF]"
+  - "animation [WPF]"
+ms.assetid: 587e36f6-1957-424e-9d89-c43724f26d84
+---
+# Animation and Timing How-to Topics
+The following topics demonstrate how to use the [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] animation and timing system in your applications.  
+  
+## In This Section  
+ [Accelerate or Decelerate an Animation](how-to-accelerate-or-decelerate-an-animation.md)  
+ [Accumulate Animation Values During Repeat Cycles](how-to-accumulate-animation-values-during-repeat-cycles.md)  
+ [Add an Animation Output Value to an Animation Starting Value](how-to-add-an-animation-output-value-to-an-animation-starting-value.md)  
+ [Animate a Property by Using a Storyboard](how-to-animate-a-property-by-using-a-storyboard.md)  
+ [Animate a Property Without Using a Storyboard](how-to-animate-a-property-without-using-a-storyboard.md)  
+ [Animate in a ControlTemplate](how-to-animate-in-a-controltemplate.md)  
+ [Animate in a Style](how-to-animate-in-a-style.md)  
+ [Animate the Opacity of an Element or Brush](how-to-animate-the-opacity-of-an-element-or-brush.md)  
+ [Change the Speed of a Clock Without Changing the Speed of Its Timeline](change-the-speed-of-a-clock.md)  
+ [Control a Storyboard After It Starts Using Its Interactive Methods](how-to-control-a-storyboard-after-it-starts.md)  
+ [Control an Animation using From, To, and By](how-to-control-an-animation-using-from-to-and-by.md)  
+ [Define a Name Scope](how-to-define-a-name-scope.md)  
+ [Receive Notification When a Clock's State Changes](how-to-receive-notification-when-clock-state-changes.md)  
+ [Repeat an Animation](how-to-repeat-an-animation.md)  
+ [Seek a Storyboard](how-to-seek-a-storyboard.md)  
+ [Seek a Storyboard Synchronously](how-to-seek-a-storyboard-synchronously.md)  
+ [Set a Duration for an Animation](how-to-set-a-duration-for-an-animation.md)  
+ [Set a Property After Animating It with a Storyboard](how-to-set-a-property-after-animating-it-with-a-storyboard.md)  
+ [Simplify Animations by Using Child Timelines](how-to-simplify-animations-by-using-child-timelines.md)  
+ [Specify HandoffBehavior Between Storyboard Animations](how-to-specify-handoffbehavior-between-storyboard-animations.md)  
+ [Specify the FillBehavior for a Timeline that has Reached the End of Its Active Period](specify-the-fillbehavior-for-a-timeline.md)  
+ [Specify Whether a Timeline Automatically Reverses](how-to-specify-whether-a-timeline-automatically-reverses.md)  
+ [Trigger an Animation When a Property Value Changes](how-to-trigger-an-animation-when-a-property-value-changes.md)  
+ [Use Event Triggers to Control a Storyboard After It Starts](how-to-use-event-triggers-to-control-a-storyboard-after-it-starts.md)  
+  
+## Reference  
+ <xref:System.Windows.Media.Animation.Timeline>  
+  
+ <xref:System.Windows.Media.Animation.Storyboard>  
+  
+ <xref:System.Windows.Media.Animation.BeginStoryboard>  
+  
+ <xref:System.Windows.Media.Animation.Clock>  
+  
+ <xref:System.Windows.Media.Animation>  
+  
+## Related Sections  
+ [Graphics and Multimedia](index.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/animation-and-timing-system-overview.md

@@ -0,0 +1,83 @@
+---
+title: "Animation and Timing System Overview"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "timing system [WPF]"
+  - "animation [WPF]"
+ms.assetid: 172cd5a8-a333-4c81-9456-fafccc19f382
+---
+# Animation and Timing System Overview
+This topic describes how the timing system uses the animation, <xref:System.Windows.Media.Animation.Timeline>, and <xref:System.Windows.Media.Animation.Clock> classes to animate properties.  
+  
+<a name="prerequisites"></a>
+## Prerequisites  
+ To understand this topic, you should be able to use [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animations to animate properties, as described in the [Animation Overview](animation-overview.md). It also helps to be familiar with dependency properties; for more information, see the [Dependency Properties Overview](../advanced/dependency-properties-overview.md).  
+  
+<a name="timelinesandclocks"></a>
+## Timelines and Clocks  
+ The [Animation Overview](animation-overview.md) described how a <xref:System.Windows.Media.Animation.Timeline> represents a segment of time, and an animation is a type of <xref:System.Windows.Media.Animation.Timeline> that produces output values. By itself, a <xref:System.Windows.Media.Animation.Timeline>, doesn't do anything other than just describe a segment of time. It's the timeline's <xref:System.Windows.Media.Animation.Clock> object that does the real work. Likewise, animation doesn't actually animate properties: an animation class describes how output values should be calculated, but it’s the <xref:System.Windows.Media.Animation.Clock> that was created for the animation that drives the animation output and applies it to properties.  
+  
+ A <xref:System.Windows.Media.Animation.Clock> is a special type of object that maintains timing-related run-time state for the <xref:System.Windows.Media.Animation.Timeline>. It provides three bits of information that are essential to the animation and timing system: <xref:System.Windows.Media.Animation.Clock.CurrentTime%2A>, <xref:System.Windows.Media.Animation.Clock.CurrentProgress%2A>, and <xref:System.Windows.Media.Animation.Clock.CurrentState%2A>. A <xref:System.Windows.Media.Animation.Clock> determines its current time, progress, and state by using the timing behaviors described by its <xref:System.Windows.Media.Animation.Timeline>: <xref:System.Windows.Media.Animation.Timeline.Duration%2A>, <xref:System.Windows.Media.Animation.Timeline.RepeatBehavior%2A>, <xref:System.Windows.Media.Animation.Timeline.AutoReverse%2A>, and so on.  
+  
+ In most cases, a <xref:System.Windows.Media.Animation.Clock> is created automatically for your timeline. When you animate by using a <xref:System.Windows.Media.Animation.Storyboard> or the <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A> method, clocks are automatically created for your timelines and animations and applied to their targeted properties. You can also create a <xref:System.Windows.Media.Animation.Clock> explicitly by using the <xref:System.Windows.Media.Animation.Timeline.CreateClock%2A> method of your <xref:System.Windows.Media.Animation.Timeline>. The <xref:System.Windows.Media.MediaTimeline.CreateClock%2A?displayProperty=nameWithType> method creates a clock of the appropriate type for the <xref:System.Windows.Media.Animation.Timeline> on which it is called. If the <xref:System.Windows.Media.Animation.Timeline> contains child timelines, it creates <xref:System.Windows.Media.Animation.Clock> objects for them as well. The resulting <xref:System.Windows.Media.Animation.Clock> objects are arranged in trees that match the structure of the <xref:System.Windows.Media.Animation.Timeline> objects tree from which they are created.  
+  
+ There are different types of clocks for different types of timelines. The following table shows the <xref:System.Windows.Media.Animation.Clock> types that correspond to some of the different <xref:System.Windows.Media.Animation.Timeline> types.  
+  
+|Timeline type|Clock type|Clock purpose|  
+|-------------------|----------------|-------------------|  
+|Animation (inherits from <xref:System.Windows.Media.Animation.AnimationTimeline>)|<xref:System.Windows.Media.Animation.AnimationClock>|Generates output values for a dependency property.|  
+|<xref:System.Windows.Media.MediaTimeline>|<xref:System.Windows.Media.MediaClock>|Processes a media file.|  
+|<xref:System.Windows.Media.Animation.ParallelTimeline>|<xref:System.Windows.Media.Animation.ClockGroup>|Groups and controls its child <xref:System.Windows.Media.Animation.Clock> objects|  
+|<xref:System.Windows.Media.Animation.Storyboard>|<xref:System.Windows.Media.Animation.ClockGroup>|Groups and controls its child <xref:System.Windows.Media.Animation.Clock> objects|  
+  
+ You can apply any <xref:System.Windows.Media.Animation.AnimationClock> objects you create to compatible dependency properties by using the <xref:System.Windows.Media.Animation.IAnimatable.ApplyAnimationClock%2A> method.  
+  
+ In performance-intensive scenarios, such as animating large numbers of similar objects, managing your own <xref:System.Windows.Media.Animation.Clock> use can provide performance benefits.  
+  
+<a name="timemanager"></a>
+## Clocks and the Time Manager  
+ When you animate objects in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)], it’s the time manager that manages the <xref:System.Windows.Media.MediaPlayer.Clock%2A> objects created for your timelines. The time manager is the root of a tree of <xref:System.Windows.Media.MediaPlayer.Clock%2A> objects and controls the flow of time in that tree.  A time manager is automatically created for each [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] application and is invisible to the application developer. The time manager "ticks" many times per second; the actual number of ticks that occur each second varies depending on available system resources. During each one of these ticks, the time manager computes the state of all <xref:System.Windows.Media.Animation.ClockState.Active> <xref:System.Windows.Media.Animation.Clock> objects in the timing tree.  
+  
+ The following illustration shows the relationship between the time manager, and <xref:System.Windows.Media.Animation.AnimationClock>, and an animated dependency property.  
+  
+ ![Timing system components](./media/graphicsmm-clocks-1clock1prop.png "graphicsmm_clocks_1clock1prop")  
+Animating a property  
+  
+ When the time manager ticks, it updates the time of every <xref:System.Windows.Media.Animation.ClockState.Active> <xref:System.Windows.Media.Animation.Clock> in the application. If the <xref:System.Windows.Media.Animation.Clock> is an <xref:System.Windows.Media.Animation.AnimationClock>, it uses the <xref:System.Windows.Media.Animation.AnimationTimeline.GetCurrentValue%2A> method of the <xref:System.Windows.Media.Animation.AnimationTimeline> from which it was created to calculate its current output value. The <xref:System.Windows.Media.Animation.AnimationClock> supplies the <xref:System.Windows.Media.Animation.AnimationTimeline> with the current local time, an input value, which is typically the base value of the property, and a default destination value. When you retrieve the value of an animated by property using the <xref:System.Windows.DependencyObject.GetValue%2A> method or its CLR accessor, you get the output of its <xref:System.Windows.Media.Animation.AnimationClock>.  
+  
+#### Clock Groups  
+ The preceding section described how there are different types of <xref:System.Windows.Media.Animation.Clock> objects for different types of timelines. The following illustration shows the relationship between the time manager, a <xref:System.Windows.Media.Animation.ClockGroup>, an <xref:System.Windows.Media.Animation.AnimationClock>, and an animated dependency property. A <xref:System.Windows.Media.Animation.ClockGroup> is created for timelines that group other timelines, such as the <xref:System.Windows.Media.Animation.Storyboard> class, which groups animations and other timelines.  
+  
+ ![Timing system components](./media/graphicsmm-clocks-2clock1clockgroup2prop.png "graphicsmm_clocks_2clock1clockgroup2prop")  
+A ClockGroup  
+  
+#### Composition  
+ It's possible to associate multiple clocks with a single property, in which case each clock uses the output value of the preceding clock as its base value. The following illustration shows three <xref:System.Windows.Media.Animation.AnimationClock> objects applied to the same property. Clock1 uses the base value of the animated property as its input and uses it to generate output. Clock2 takes the output from Clock1 as its input and uses it to generate output. Clock3 takes the output from Clock2 as its input and uses it to generate output. When multiple clocks affect the same property simultaneously, they are said to be in a composition chain.  
+  
+ ![Timing system components](./media/graphicsmm-clocks-2clock1prop.png "graphicsmm_clocks_2clock1prop")  
+A composition chain  
+  
+ Note that although a relationship is created among the input and output of the <xref:System.Windows.Media.Animation.AnimationClock> objects in the composition chain, their timing behaviors are not affected; <xref:System.Windows.Media.Animation.Clock> objects (including <xref:System.Windows.Media.Animation.AnimationClock> objects) have a hierarchical dependency on their parent <xref:System.Windows.Media.Animation.Clock> objects.  
+  
+ To apply multiple clocks to the same property, use the <xref:System.Windows.Media.Animation.HandoffBehavior.Compose> <xref:System.Windows.Media.Animation.HandoffBehavior> when applying a <xref:System.Windows.Media.Animation.Storyboard>, animation, or <xref:System.Windows.Media.Animation.AnimationClock>.  
+  
+#### Ticks and Event Consolidation  
+ In addition to calculating output values, the time manager does other work every time it ticks: it determines the state of each clock and raises events as appropriate.  
+  
+ While ticks occur frequently, it's possible for a lot of things to happen between ticks. For example, a <xref:System.Windows.Media.Animation.Clock> might be stopped, started, and stopped again, in which case its <xref:System.Windows.Media.Animation.Clock.CurrentState%2A> value will have changed three times. In theory, the <xref:System.Windows.Media.Animation.Clock.CurrentStateInvalidated> event could be raised multiple times in a single tick; however, the timing engine consolidates events, so that the <xref:System.Windows.Media.Animation.Clock.CurrentStateInvalidated> event can be raised at most once per tick. This is true for all timing events: at most one event of each type is raised for a given <xref:System.Windows.Media.Animation.Clock> object.  
+  
+ When a <xref:System.Windows.Media.Animation.Clock> switches states and returns back to its original state between ticks (such as changing from <xref:System.Windows.Media.Animation.ClockState.Active> to <xref:System.Windows.Media.Animation.ClockState.Stopped> and back to <xref:System.Windows.Media.Animation.ClockState.Active>), the associated event still occurs.  
+  
+ For more information about timing events, see the [Timing Events Overview](timing-events-overview.md).  
+  
+<a name="currentvaluesbasevaluesofproperties"></a>
+## Current Values and Base Values of Properties  
+ An animatable property can have two values: a base value and a current value. When you set property using its CLR accessor or the <xref:System.Windows.DependencyObject.SetValue%2A> method, you set its base value. When a property is not animated, its base and current values are the same.  
+  
+ When you animate a property, the <xref:System.Windows.Media.Animation.AnimationClock> sets the property's *current* value. Retrieving the property's value through its CLR accessor or the <xref:System.Windows.DependencyObject.GetValue%2A> method returns the output of the <xref:System.Windows.Media.Animation.AnimationClock> when the <xref:System.Windows.Media.Animation.AnimationClock> is <xref:System.Windows.Media.Animation.ClockState.Active> or <xref:System.Windows.Media.Animation.ClockState.Filling>. You can retrieve the property's base value by using the <xref:System.Windows.Media.Animation.IAnimatable.GetAnimationBaseValue%2A> method.  
+  
+## See also
+
+- [Animation Overview](animation-overview.md)
+- [Timing Events Overview](timing-events-overview.md)
+- [Timing Behaviors Overview](timing-behaviors-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/animation-overview.md

@@ -0,0 +1,393 @@
+---
+title: "Animation Overview"
+description: Make an attractive user interface even more spectacular with dramatic screen transitions or vivid visual cues in Windows Presentation Foundation (WPF).
+ms.date: "03/30/2017"
+dev_langs:
+  - "csharp"
+  - "vb"
+helpviewer_keywords:
+  - "Storyboards [WPF], animations"
+  - "animations [WPF], overview"
+ms.assetid: bd9ce563-725d-4385-87c9-d7ee38cf79ea
+---
+# Animation Overview
+
+<a name="introduction"></a>
+[!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] provides a powerful set of graphics and layout features that enable you to create attractive user interfaces and appealing documents. Animation can make an attractive user interface even more spectacular and usable. By just animating a background color or applying an animated <xref:System.Windows.Media.Transform>, you can create dramatic screen transitions or provide helpful visual cues.
+
+This overview provides an introduction to the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animation and timing system. It focuses on the animation of [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] objects by using storyboards.
+
+<a name="introducinganimations"></a>
+
+## Introducing Animations
+
+Animation is an illusion that is created by quickly cycling through a series of images, each slightly different from the last. The brain perceives the group of images as a single changing scene. In film, this illusion is created by using cameras that record many photographs, or frames, each second. When the frames are played back by a projector, the audience sees a moving picture.
+
+Animation on a computer is similar. For example, a program that makes a drawing of a rectangle fade out of view might work as follows.
+
+- The program creates a timer.
+
+- The program checks the timer at set intervals to see how much time has elapsed.
+
+- Each time the program checks the timer, it computes the current opacity value for the rectangle based on how much time has elapsed.
+
+- The program then updates the rectangle with the new value and redraws it.
+
+Prior to [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)], Microsoft Windows developers had to create and manage their own timing systems or use special custom libraries. [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] includes an efficient timing system that is exposed through managed code and [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] and that is deeply integrated into the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] framework. [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animation makes it easy to animate controls and other graphical objects.
+
+[!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] handles all the behind-the-scenes work of managing a timing system and redrawing the screen efficiently. It provides timing classes that enable you to focus on the effects you want to create, instead of the mechanics of achieving those effects. [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] also makes it easy to create your own animations by exposing animation base classes from which your classes can inherit, to produce customized animations. These custom animations gain many of the performance benefits of the standard animation classes.
+
+<a name="thewpftimingsystem"></a>
+
+## WPF Property Animation System
+
+If you understand a few important concepts about the timing system, [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animations can be easier to use. Most important is that, in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)], you animate objects by applying animation to their individual properties. For example, to make a framework element grow, you animate its <xref:System.Windows.FrameworkElement.Width%2A> and <xref:System.Windows.FrameworkElement.Height%2A> properties. To make an object fade from view, you animate its <xref:System.Windows.UIElement.Opacity%2A> property.
+
+For a property to have animation capabilities, it must meet the following three requirements:
+
+- It must be a dependency property.
+
+- It must belong to a class that inherits from <xref:System.Windows.DependencyObject> and implements the <xref:System.Windows.Media.Animation.IAnimatable> interface.
+
+- There must be a compatible animation type available. (If [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] does not provide one, you can create your own. See the [Custom Animations Overview](custom-animations-overview.md).)
+
+[!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] contains many objects that have <xref:System.Windows.Media.Animation.IAnimatable> properties. Controls such as <xref:System.Windows.Controls.Button> and <xref:System.Windows.Controls.TabControl>, and also <xref:System.Windows.Controls.Panel> and <xref:System.Windows.Shapes.Shape> objects inherit from <xref:System.Windows.DependencyObject>. Most of their properties are dependency properties.
+
+You can use animations almost anywhere, which includes in styles and control templates. Animations do not have to be visual; you can animate objects that are not part of the user interface if they meet the criteria that are described in this section.
+
+<a name="storyboardwalkthrough"></a>
+
+## Example: Make an Element Fade In and Out of View
+
+This example shows how to use a [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animation to animate the value of a dependency property. It uses a <xref:System.Windows.Media.Animation.DoubleAnimation>, which is a type of animation that generates <xref:System.Double> values, to animate the <xref:System.Windows.UIElement.Opacity%2A> property of a <xref:System.Windows.Shapes.Rectangle>. As a result, the <xref:System.Windows.Shapes.Rectangle> fades in and out of view.
+
+The first part of the example creates a <xref:System.Windows.Shapes.Rectangle> element. The steps that follow show how to create an animation and apply it to the rectangle's <xref:System.Windows.UIElement.Opacity%2A> property.
+
+The following shows how to create a <xref:System.Windows.Shapes.Rectangle> element in a <xref:System.Windows.Controls.StackPanel> in XAML.
+
+[!code-xaml[animation_ovws2#RectangleOpacityFadeExampleXaml_1](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/Window1.xaml#rectangleopacityfadeexamplexaml_1)]
+
+The following shows how to create a <xref:System.Windows.Shapes.Rectangle> element in a <xref:System.Windows.Controls.StackPanel> in code.
+
+[!code-csharp[animation_ovws2#RectangleOpacityFadeExampleCode_1](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/Class1.cs#rectangleopacityfadeexamplecode_1)]
+[!code-vb[animation_ovws2#RectangleOpacityFadeExampleCode_1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animation_ovws2/VisualBasic/Class1.vb#rectangleopacityfadeexamplecode_1)]
+
+<a name="opacity_animation_step1"></a>
+
+### Part 1: Create a DoubleAnimation
+
+One way to make an element fade in and out of view is to animate its <xref:System.Windows.UIElement.Opacity%2A> property. Because the <xref:System.Windows.UIElement.Opacity%2A> property is of type <xref:System.Double>, you need an animation that produces double values. A <xref:System.Windows.Media.Animation.DoubleAnimation> is one such animation. A <xref:System.Windows.Media.Animation.DoubleAnimation> creates a transition between two double values. To specify its starting value, you set its <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property. To specify its ending value, you set its <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property.
+
+1. An opacity value of `1.0` makes the object completely opaque, and an opacity value of `0.0` makes it completely invisible. To make the animation transition from `1.0` to `0.0` you set its <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property to `1.0` and its <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property to `0.0`. The following shows how to create a <xref:System.Windows.Media.Animation.DoubleAnimation> in XAML.
+
+    [!code-xaml[animation_ovws2#RectangleOpacityFadeExampleXaml_2](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/Window1.xaml#rectangleopacityfadeexamplexaml_2)]
+
+    The following shows how to create a <xref:System.Windows.Media.Animation.DoubleAnimation> in code.
+
+    [!code-csharp[animation_ovws2#RectangleOpacityFadeExampleCode_2](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/Class1.cs#rectangleopacityfadeexamplecode_2)]
+    [!code-vb[animation_ovws2#RectangleOpacityFadeExampleCode_2](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animation_ovws2/VisualBasic/Class1.vb#rectangleopacityfadeexamplecode_2)]
+
+2. Next, you must specify a <xref:System.Windows.Media.Animation.Timeline.Duration%2A>. The <xref:System.Windows.Media.Animation.Timeline.Duration%2A> of an animation specifies how long it takes to go from its starting value to its destination value. The following shows how to set the <xref:System.Windows.Media.Animation.Timeline.Duration%2A> to five seconds in XAML.
+
+    [!code-xaml[animation_ovws2#RectangleOpacityFadeExampleXaml_3](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/Window1.xaml#rectangleopacityfadeexamplexaml_3)]
+
+    The following shows how to set the <xref:System.Windows.Media.Animation.Timeline.Duration%2A> to five seconds in code.
+
+    [!code-csharp[animation_ovws2#RectangleOpacityFadeExampleCode_3](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/Class1.cs#rectangleopacityfadeexamplecode_3)]
+    [!code-vb[animation_ovws2#RectangleOpacityFadeExampleCode_3](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animation_ovws2/VisualBasic/Class1.vb#rectangleopacityfadeexamplecode_3)]
+
+3. The previous code showed an animation that transitions from `1.0` to `0.0`, which causes the target element to fade from completely opaque to completely invisible. To make the element fade back into view after it vanishes, set the <xref:System.Windows.Media.Animation.Timeline.AutoReverse%2A> property of the animation to `true`. To make the animation repeat indefinitely, set its <xref:System.Windows.Media.Animation.Timeline.RepeatBehavior%2A> property to <xref:System.Windows.Media.Animation.RepeatBehavior.Forever%2A>. The following shows how to set the <xref:System.Windows.Media.Animation.Timeline.AutoReverse%2A> and <xref:System.Windows.Media.Animation.Timeline.RepeatBehavior%2A> properties in XAML.
+
+    [!code-xaml[animation_ovws2#RectangleOpacityFadeExampleXaml_4](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/Window1.xaml#rectangleopacityfadeexamplexaml_4)]
+
+    The following shows how to set the <xref:System.Windows.Media.Animation.Timeline.AutoReverse%2A> and <xref:System.Windows.Media.Animation.Timeline.RepeatBehavior%2A> properties in code.
+
+    [!code-csharp[animation_ovws2#RectangleOpacityFadeExampleCode_4](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/Class1.cs#rectangleopacityfadeexamplecode_4)]
+    [!code-vb[animation_ovws2#RectangleOpacityFadeExampleCode_4](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animation_ovws2/VisualBasic/Class1.vb#rectangleopacityfadeexamplecode_4)]
+
+<a name="opacity_animation_step2"></a>
+
+### Part 2: Create a Storyboard
+
+To apply an animation to an object, you create a <xref:System.Windows.Media.Animation.Storyboard> and use the <xref:System.Windows.Media.Animation.Storyboard.TargetName%2A> and <xref:System.Windows.Media.Animation.Storyboard.TargetProperty> attached properties to specify the object and property to animate.
+
+1. Create the <xref:System.Windows.Media.Animation.Storyboard> and add the animation as its child. The following shows how to create the <xref:System.Windows.Media.Animation.Storyboard> in XAML.
+
+    [!code-xaml[animation_ovws2#RectangleOpacityFadeExampleXaml_5](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/Window1.xaml#rectangleopacityfadeexamplexaml_5)]
+
+    To create the <xref:System.Windows.Media.Animation.Storyboard> in code, declare a <xref:System.Windows.Media.Animation.Storyboard> variable at the class level.
+
+    [!code-csharp[animation_ovws2#RectangleOpacityFadeExampleCode_100](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/MainWindow.xaml.cs#rectangleopacityfadeexamplecode_100)]
+    [!code-vb[animation_ovws2#RectangleOpacityFadeExampleCode_100](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animation_ovws2/VisualBasic/MainWindow.xaml.vb#rectangleopacityfadeexamplecode_100)]
+
+    Then initialize the <xref:System.Windows.Media.Animation.Storyboard> and add the animation as its child.
+
+    [!code-csharp[animation_ovws2#RectangleOpacityFadeExampleCode_101](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/MainWindow.xaml.cs#rectangleopacityfadeexamplecode_101)]
+    [!code-vb[animation_ovws2#RectangleOpacityFadeExampleCode_101](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animation_ovws2/VisualBasic/MainWindow.xaml.vb#rectangleopacityfadeexamplecode_101)]
+
+2. The <xref:System.Windows.Media.Animation.Storyboard> has to know where to apply the animation. Use the <xref:System.Windows.Media.Animation.Storyboard.TargetName%2A?displayProperty=nameWithType> attached property to specify the object to animate. The following shows how to set the target name of the <xref:System.Windows.Media.Animation.DoubleAnimation> to `MyRectangle` in XAML.
+
+    [!code-xaml[animation_ovws2#RectangleOpacityFadeExampleXaml_6](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/Window1.xaml#rectangleopacityfadeexamplexaml_6)]
+
+    The following shows how to set the target name of the <xref:System.Windows.Media.Animation.DoubleAnimation> to `MyRectangle` in code.
+
+    [!code-csharp[animation_ovws2#RectangleOpacityFadeExampleCode_102](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/MainWindow.xaml.cs#rectangleopacityfadeexamplecode_102)]
+    [!code-vb[animation_ovws2#RectangleOpacityFadeExampleCode_102](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animation_ovws2/VisualBasic/MainWindow.xaml.vb#rectangleopacityfadeexamplecode_102)]
+
+3. Use the <xref:System.Windows.Media.Animation.Storyboard.TargetProperty> attached property to specify the property to animate. The following shows how the animation is configured to target the <xref:System.Windows.UIElement.Opacity%2A> property of the <xref:System.Windows.Shapes.Rectangle> in XAML.
+
+    [!code-xaml[animation_ovws2#RectangleOpacityFadeExampleXaml_7](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/Window1.xaml#rectangleopacityfadeexamplexaml_7)]
+
+    The following shows how the animation is configured to target the <xref:System.Windows.UIElement.Opacity%2A> property of the <xref:System.Windows.Shapes.Rectangle> in code.
+
+    [!code-csharp[animation_ovws2#RectangleOpacityFadeExampleCode_103](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/MainWindow.xaml.cs#rectangleopacityfadeexamplecode_103)]
+    [!code-vb[animation_ovws2#RectangleOpacityFadeExampleCode_103](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animation_ovws2/VisualBasic/MainWindow.xaml.vb#rectangleopacityfadeexamplecode_103)]
+
+For more information about <xref:System.Windows.Media.Animation.Storyboard.TargetProperty> syntax and for additional examples, see the [Storyboards Overview](storyboards-overview.md).
+
+<a name="opacity_animation_step3"></a>
+
+### Part 3 (XAML): Associate the Storyboard with a Trigger
+
+The easiest way to apply and start a <xref:System.Windows.Media.Animation.Storyboard> in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] is to use an event trigger. This section shows how to associate the <xref:System.Windows.Media.Animation.Storyboard> with a trigger in XAML.
+
+1. Create a <xref:System.Windows.Media.Animation.BeginStoryboard> object and associate your storyboard with it. A <xref:System.Windows.Media.Animation.BeginStoryboard> is a type of <xref:System.Windows.TriggerAction> that applies and starts a <xref:System.Windows.Media.Animation.Storyboard>.
+
+    [!code-xaml[animation_ovws_snippet#RectangleOpacityFadeExampleInline_3](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws_snippet/CS/RectangleOpacityFadeExample.xaml#rectangleopacityfadeexampleinline_3)]
+
+2. Create an <xref:System.Windows.EventTrigger> and add the <xref:System.Windows.Media.Animation.BeginStoryboard> to its <xref:System.Windows.EventTrigger.Actions%2A> collection. Set the <xref:System.Windows.EventTrigger.RoutedEvent%2A> property of the <xref:System.Windows.EventTrigger> to the routed event that you want to start the <xref:System.Windows.Media.Animation.Storyboard>. (For more information about routed events, see the [Routed Events Overview](../advanced/routed-events-overview.md).)
+
+    [!code-xaml[animation_ovws_snippet#RectangleOpacityFadeExampleInline_2](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws_snippet/CS/RectangleOpacityFadeExample.xaml#rectangleopacityfadeexampleinline_2)]
+
+3. Add the <xref:System.Windows.EventTrigger> to the <xref:System.Windows.FrameworkElement.Triggers%2A> collection of the Rectangle.
+
+    [!code-xaml[animation_ovws_snippet#RectangleOpacityFadeExampleInline_1](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws_snippet/CS/RectangleOpacityFadeExample.xaml#rectangleopacityfadeexampleinline_1)]
+
+<a name="opacity_animation_step3code"></a>
+
+### Part 3 (Code): Associate the Storyboard with an Event Handler
+
+The easiest way to apply and start a <xref:System.Windows.Media.Animation.Storyboard> in code is to use an event handler. This section shows how to associate the <xref:System.Windows.Media.Animation.Storyboard> with an event handler in code.
+
+1. Register for the <xref:System.Windows.FrameworkElement.Loaded> event of the rectangle.
+
+    [!code-csharp[animation_ovws2#RectangleOpacityFadeExampleCode_104](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/MainWindow.xaml.cs#rectangleopacityfadeexamplecode_104)]
+    [!code-vb[animation_ovws2#RectangleOpacityFadeExampleCode_104](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animation_ovws2/VisualBasic/MainWindow.xaml.vb#rectangleopacityfadeexamplecode_104)]
+
+2. Declare the event handler. In the event handler, use the <xref:System.Windows.Media.Animation.Storyboard.Begin%2A> method to apply the storyboard.
+
+    [!code-csharp[animation_ovws2#RectangleOpacityFadeExampleCode_105](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/MainWindow.xaml.cs#rectangleopacityfadeexamplecode_105)]
+    [!code-vb[animation_ovws2#RectangleOpacityFadeExampleCode_105](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animation_ovws2/VisualBasic/MainWindow.xaml.vb#rectangleopacityfadeexamplecode_105)]
+
+### Complete Example
+
+The following shows how to create a rectangle that fades in and out of view in XAML.
+
+[!code-xaml[animation_ovws2#RectangleOpacityFadeExampleXaml](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/MainWindow.xaml#rectangleopacityfadeexamplexaml)]
+
+The following shows how to create a rectangle that fades in and out of view in code.
+
+[!code-csharp[animation_ovws2#RectangleOpacityFadeExampleCode](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws2/CSharp/MainWindow.xaml.cs#rectangleopacityfadeexamplecode)]
+[!code-vb[animation_ovws2#RectangleOpacityFadeExampleCode](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animation_ovws2/VisualBasic/MainWindow.xaml.vb#rectangleopacityfadeexamplecode)]
+
+<a name="animationtypes"></a>
+
+## Animation Types
+
+Because animations generate property values, different animation types exist for different property types. To animate a property that takes a <xref:System.Double>, such as the <xref:System.Windows.FrameworkElement.Width%2A> property of an element, use an animation that produces <xref:System.Double> values. To animate a property that takes a <xref:System.Windows.Point>, use an animation that produces <xref:System.Windows.Point> values, and so on. Because of the number of different property types, there are several animation classes in the <xref:System.Windows.Media.Animation> namespace. Fortunately, they follow a strict naming convention that makes it easy to differentiate between them:
+
+- \<*Type*>Animation
+
+  Known as a "From/To/By" or "basic" animation, these animate between a starting and destination value, or by adding an offset value to its starting value.
+
+  - To specify a starting value, set the From property of the animation.
+
+  - To specify an ending value, set the To property of the animation.
+
+  - To specify an offset value, set the By property of the animation.
+
+  The examples in this overview use these animations, because they are the simplest to use. From/To/By animations are described in detail in the From/To/By Animations Overview.
+
+- \<*Type*>AnimationUsingKeyFrames
+
+  Key frame animations are more powerful than From/To/By animations because you can specify any number of target values and even control their interpolation method. Some types can only be animated with key frame animations. Key frame animations are described in detail in the [Key-Frame Animations Overview](key-frame-animations-overview.md).
+
+- \<*Type*>AnimationUsingPath
+
+  Path animations enable you to use a geometric path in order to produce animated values.
+
+- \<*Type*>AnimationBase
+
+  Abstract class that, when you implement it, animates a \<*Type*> value. This class serves as the base class for \<*Type*>Animation and \<*Type*>AnimationUsingKeyFrames classes. You have to deal directly with these classes only if you want to create your own custom animations. Otherwise, use a \<*Type*>Animation or KeyFrame\<*Type*>Animation.
+
+In most cases, you will want to use the \<*Type*>Animation classes, such as <xref:System.Windows.Media.Animation.DoubleAnimation> and <xref:System.Windows.Media.Animation.ColorAnimation>.
+
+The following table shows several common animation types and some properties with which they are used.
+
+|Property type|Corresponding basic (From/To/By) animation|Corresponding key frame animation|Corresponding Path Animation|Usage example|
+|-------------------|----------------------------------------------------|---------------------------------------|----------------------------------|-------------------|
+|<xref:System.Windows.Media.Color>|<xref:System.Windows.Media.Animation.ColorAnimation>|<xref:System.Windows.Media.Animation.ColorAnimationUsingKeyFrames>|None|Animate the <xref:System.Windows.Media.SolidColorBrush.Color%2A> of a <xref:System.Windows.Media.SolidColorBrush> or a <xref:System.Windows.Media.GradientStop>.|
+|<xref:System.Double>|<xref:System.Windows.Media.Animation.DoubleAnimation>|<xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames>|<xref:System.Windows.Media.Animation.DoubleAnimationUsingPath>|Animate the <xref:System.Windows.FrameworkElement.Width%2A> of a <xref:System.Windows.Controls.DockPanel> or the <xref:System.Windows.FrameworkElement.Height%2A> of a <xref:System.Windows.Controls.Button>.|
+|<xref:System.Windows.Point>|<xref:System.Windows.Media.Animation.PointAnimation>|<xref:System.Windows.Media.Animation.PointAnimationUsingKeyFrames>|<xref:System.Windows.Media.Animation.PointAnimationUsingPath>|Animate the <xref:System.Windows.Media.EllipseGeometry.Center%2A> position of an <xref:System.Windows.Media.EllipseGeometry>.|
+|<xref:System.String>|None|<xref:System.Windows.Media.Animation.StringAnimationUsingKeyFrames>|None|Animate the <xref:System.Windows.Controls.TextBlock.Text%2A> of a <xref:System.Windows.Controls.TextBlock> or the <xref:System.Windows.Controls.ContentControl.Content%2A> of a <xref:System.Windows.Controls.Button>.|
+
+<a name="animationsaretimelines"></a>
+
+### Animations Are Timelines
+
+All the animation types inherit from the <xref:System.Windows.Media.Animation.Timeline> class; therefore, all animations are specialized types of timelines. A <xref:System.Windows.Media.Animation.Timeline> defines a segment of time. You can specify the *timing behaviors* of a timeline: its <xref:System.Windows.Media.Animation.Timeline.Duration%2A>, how many times it is repeated, and even how fast time progresses for it.
+
+Because an animation is a <xref:System.Windows.Media.Animation.Timeline>, it also represents a segment of time. An animation also calculates output values as it progresses through its specified segment of time (or <xref:System.Windows.Media.Animation.Timeline.Duration%2A>). As the animation progresses, or "plays," it updates the property that it is associated with.
+
+Three frequently used timing properties are <xref:System.Windows.Media.Animation.Timeline.Duration%2A>, <xref:System.Windows.Media.Animation.Timeline.AutoReverse%2A>, and <xref:System.Windows.Media.Animation.Timeline.RepeatBehavior%2A>.
+
+#### The Duration Property
+
+As previously mentioned, a timeline represents a segment of time. The length of that segment is determined by the <xref:System.Windows.Media.Animation.Timeline.Duration%2A> of the timeline, which is usually specified by using a <xref:System.Windows.Duration.TimeSpan%2A> value. When a timeline reaches the end of its duration, it has completed an iteration.
+
+An animation uses its <xref:System.Windows.Media.Animation.Timeline.Duration%2A> property to determine its current value. If you do not specify a <xref:System.Windows.Media.Animation.Timeline.Duration%2A> value for an animation, it uses 1 second, which is the default.
+
+The following syntax shows a simplified version of the [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] attribute syntax for the <xref:System.Windows.Media.Animation.Timeline.Duration%2A> property.
+
+*hours* `:` *minutes* `:` *seconds*
+
+The following table shows several <xref:System.Windows.Duration> settings and their resulting values.
+
+|Setting|Resulting value|
+|-------------|---------------------|
+|0:0:5.5|5.5 seconds.|
+|0:30:5.5|30 minutes and 5.5 seconds.|
+|1:30:5.5|1 hour, 30 minutes, and 5.5 seconds.|
+
+One way to specify a <xref:System.Windows.Duration> in code is to use the <xref:System.TimeSpan.FromSeconds%2A> method to create a <xref:System.TimeSpan>, then declare a new <xref:System.Windows.Duration> structure using that <xref:System.TimeSpan>.
+
+For more information about <xref:System.Windows.Duration> values and the complete [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] syntax, see the <xref:System.Windows.Duration> structure.
+
+#### AutoReverse
+
+The <xref:System.Windows.Media.Animation.Timeline.AutoReverse%2A> property specifies whether a timeline plays backward after it reaches the end of its <xref:System.Windows.Media.Animation.Timeline.Duration%2A>. If you set this animation property to `true`, an animation reverses after it reaches the end of its <xref:System.Windows.Media.Animation.Timeline.Duration%2A>, playing from its ending value back to its starting value. By default, this property is `false`.
+
+#### RepeatBehavior
+
+The <xref:System.Windows.Media.Animation.Timeline.RepeatBehavior%2A> property specifies how many times a timeline plays. By default, timelines have an iteration count of `1.0`, which means they play one time and do not repeat at all.
+
+For more information about these properties and others, see the [Timing Behaviors Overview](timing-behaviors-overview.md).
+
+<a name="applyanimationstoproperty"></a>
+
+## Applying an Animation to a Property
+
+The previous sections describe the different types of animations and their timing properties. This section shows how to apply the animation to the property that you want to animate. <xref:System.Windows.Media.Animation.Storyboard> objects provide one way to apply animations to properties. A <xref:System.Windows.Media.Animation.Storyboard> is a *container timeline* that provides targeting information for the animations it contains.
+
+### Targeting Objects and Properties
+
+The <xref:System.Windows.Media.Animation.Storyboard> class provides the <xref:System.Windows.Media.Animation.Storyboard.TargetName%2A> and <xref:System.Windows.Media.Animation.Storyboard.TargetProperty> attached properties. By setting these properties on an animation, you tell the animation what to animate. However, before an animation can target an object, the object must usually be given a name.
+
+Assigning a name to a <xref:System.Windows.FrameworkElement> differs from assigning a name to a <xref:System.Windows.Freezable> object. Most controls and panels are framework elements; however, most purely graphical objects, such as brushes, transforms, and geometries, are freezable objects. If you are not sure whether a type is a <xref:System.Windows.FrameworkElement> or a <xref:System.Windows.Freezable>, refer to the **Inheritance Hierarchy** section of its reference documentation.
+
+- To make a <xref:System.Windows.FrameworkElement> an animation target, you give it a name by setting its <xref:System.Windows.FrameworkElement.Name%2A> property. In code, you must also use the <xref:System.Windows.FrameworkElement.RegisterName%2A> method to register the element name with the page to which it belongs.
+
+- To make a <xref:System.Windows.Freezable> object an animation target in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)], you use the [x:Name Directive](/dotnet/desktop-wpf/xaml-services/xname-directive) to assign it a name. In code, you just use the <xref:System.Windows.FrameworkElement.RegisterName%2A> method to register the object with the page to which it belongs.
+
+The sections that follow provide an example of naming an element in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] and code. For more detailed information about naming and targeting, see the [Storyboards Overview](storyboards-overview.md).
+
+### Applying and Starting Storyboards
+
+To start a storyboard in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)], you associate it with an <xref:System.Windows.EventTrigger>. An <xref:System.Windows.EventTrigger> is an object that describes what actions to take when a specified event occurs. One of those actions can be a <xref:System.Windows.Media.Animation.BeginStoryboard> action, which you use to start your storyboard. Event triggers are similar in concept to event handlers because they enable you to specify how your application responds to a particular event. Unlike event handlers, event triggers can be fully described in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)]; no other code is required.
+
+To start a <xref:System.Windows.Media.Animation.Storyboard> in code, you can use an <xref:System.Windows.EventTrigger> or use the <xref:System.Windows.Media.Animation.Storyboard.Begin%2A> method of the <xref:System.Windows.Media.Animation.Storyboard> class.
+
+<a name="controllingstoryboards"></a>
+
+## Interactively Control a Storyboard
+
+The previous example showed how to start a <xref:System.Windows.Media.Animation.Storyboard> when an event occurs. You can also interactively control a <xref:System.Windows.Media.Animation.Storyboard> after it starts: you can pause, resume, stop, advance it to its fill period, seek, and remove the <xref:System.Windows.Media.Animation.Storyboard>. For more information and an example that shows how to interactively control a <xref:System.Windows.Media.Animation.Storyboard>, see the [Storyboards Overview](storyboards-overview.md).
+
+<a name="fillbehaviorsection"></a>
+
+## What Happens After an Animation Ends?
+
+The <xref:System.Windows.Media.Animation.FillBehavior> property specifies how a timeline behaves when it ends. By default, a timeline starts <xref:System.Windows.Media.Animation.ClockState.Filling> when it ends. An animation that is <xref:System.Windows.Media.Animation.ClockState.Filling> holds its final output value.
+
+The <xref:System.Windows.Media.Animation.DoubleAnimation> in the previous example does not end because its <xref:System.Windows.Media.Animation.Timeline.RepeatBehavior%2A> property is set to <xref:System.Windows.Media.Animation.RepeatBehavior.Forever%2A>. The following example animates a rectangle by using a similar animation. Unlike the previous example, the <xref:System.Windows.Media.Animation.Timeline.RepeatBehavior%2A> and <xref:System.Windows.Media.Animation.Timeline.AutoReverse%2A> properties of this animation are left at their default values. Therefore, the animation progresses from 1 to 0 over five seconds and then stops.
+
+[!code-xaml[animation_ovws_snippet#FillBehaviorExampleRectangleInline](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws_snippet/CS/FillBehaviorExample.xaml#fillbehaviorexamplerectangleinline)]
+
+[!code-csharp[animation_ovws_procedural_snip#FillBehaviorExampleRectangleInline](~/samples/snippets/csharp/VS_Snippets_Wpf/animation_ovws_procedural_snip/CSharp/FillBehaviorExample.cs#fillbehaviorexamplerectangleinline)]
+[!code-vb[animation_ovws_procedural_snip#FillBehaviorExampleRectangleInline](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animation_ovws_procedural_snip/visualbasic/fillbehaviorexample.vb#fillbehaviorexamplerectangleinline)]
+
+Because its <xref:System.Windows.Media.Animation.Timeline.FillBehavior%2A> was not changed from its default value, which is <xref:System.Windows.Media.Animation.FillBehavior.HoldEnd>, the animation holds its final value, 0, when it ends. Therefore, the <xref:System.Windows.UIElement.Opacity%2A> of the rectangle remains at 0 after the animation ends. If you set the <xref:System.Windows.UIElement.Opacity%2A> of the rectangle to another value, your code appears to have no effect, because the animation is still affecting the <xref:System.Windows.UIElement.Opacity%2A> property.
+
+One way to regain control of an animated property in code is to use the <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A> method and specify null for the <xref:System.Windows.Media.Animation.AnimationTimeline> parameter. For more information and an example, see [Set a Property After Animating It with a Storyboard](how-to-set-a-property-after-animating-it-with-a-storyboard.md).
+
+Note that, although setting a property value that has an <xref:System.Windows.Media.Animation.ClockState.Active> or <xref:System.Windows.Media.Animation.ClockState.Filling> animation appears to have no effect, the property value does change. For more information, see the [Animation and Timing System Overview](animation-and-timing-system-overview.md).
+
+<a name="databindingAndAnimatingAnimationsSection"></a>
+
+## Data Binding and Animating Animations
+
+Most animation properties can be data bound or animated; for example, you can animate the <xref:System.Windows.Media.Animation.Timeline.Duration%2A> property of a <xref:System.Windows.Media.Animation.DoubleAnimation>. However, because of the way the timing system works, data bound or animated animations do not behave like other data bound or animated objects. To understand their behavior, it helps to understand what it means to apply an animation to a property.
+
+Refer to the example in the previous section that showed how to animate the <xref:System.Windows.UIElement.Opacity%2A> of a rectangle. When the rectangle in the previous example is loaded, its event trigger applies the <xref:System.Windows.Media.Animation.Storyboard>. The timing system creates a copy of the <xref:System.Windows.Media.Animation.Storyboard> and its animation. These copies are frozen (made read-only) and <xref:System.Windows.Media.Animation.Clock> objects are created from them. These clocks do the actual work of animating the targeted properties.
+
+The timing system creates a clock for the <xref:System.Windows.Media.Animation.DoubleAnimation> and applies it to the object and property that is specified by the <xref:System.Windows.Media.Animation.Storyboard.TargetName%2A> and <xref:System.Windows.Media.Animation.Storyboard.TargetProperty> of the <xref:System.Windows.Media.Animation.DoubleAnimation>. In this case, the timing system applies the clock to the <xref:System.Windows.UIElement.Opacity%2A> property of the object that is named "MyRectangle."
+
+Although a clock is also created for the <xref:System.Windows.Media.Animation.Storyboard>, the clock is not applied to any properties. Its purpose is to control its child clock, the clock that is created for the <xref:System.Windows.Media.Animation.DoubleAnimation>.
+
+For an animation to reflect data binding or animation changes, its clock must be regenerated. Clocks are not regenerated for you automatically. To make an animation reflect changes, reapply its storyboard by using a <xref:System.Windows.Media.Animation.BeginStoryboard> or the <xref:System.Windows.Media.Animation.Storyboard.Begin%2A> method. When you use either of these methods, the animation restarts. In code, you can use the <xref:System.Windows.Media.Animation.Storyboard.Seek%2A> method to shift the storyboard back to its previous position.
+
+For an example of a data bound animation, see [Key Spline Animation Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/KeySplineAnimations). For more information about how the animation and timing system works, see [Animation and Timing System Overview](animation-and-timing-system-overview.md).
+
+<a name="otherWaysToAnimateSection"></a>
+
+## Other Ways to Animate
+
+The examples in this overview show how to animate by using storyboards. When you use code, you can animate in several other ways. For more information, see the [Property Animation Techniques Overview](property-animation-techniques-overview.md).
+
+<a name="animation_samples"></a>
+
+## Animation Samples
+
+The following samples can help you start adding animation to your applications.
+
+- [From, To, and By Animation Target Values Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/TargetValues)
+
+  Demonstrates different From/To/By settings.
+
+- [Animation Timing Behavior Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/AnimationTiming)
+
+  Demonstrates the different ways you can control the timing behavior of an animation. This sample also shows how to data bind the destination value of an animation.
+
+<a name="related_topics"></a>
+
+## Related Topics
+
+|Title|Description|
+|-----------|-----------------|
+|[Animation and Timing System Overview](animation-and-timing-system-overview.md)|Describes how the timing system uses the <xref:System.Windows.Media.Animation.Timeline> and <xref:System.Windows.Media.Animation.Clock> classes, which allow you to create animations.|
+|[Animation Tips and Tricks](animation-tips-and-tricks.md)|Lists helpful tips for solving issues with animations, such as performance.|
+|[Custom Animations Overview](custom-animations-overview.md)|Describes how to extend the animation system with key frames, animation classes, or per-frame callbacks.|
+|[From/To/By Animations Overview](from-to-by-animations-overview.md)|Describes how to create an animation that transitions between two values.|
+|[Key-Frame Animations Overview](key-frame-animations-overview.md)|Describes how to create an animation with multiple target values, including the ability to control the interpolation method.|
+|[Easing Functions](easing-functions.md)|Explains how to apply mathematical formulas to your animations to get realistic behavior, such as bouncing.|
+|[Path Animations Overview](path-animations-overview.md)|Describes how to move or rotate an object along a complex path.|
+|[Property Animation Techniques Overview](property-animation-techniques-overview.md)|Describes property animations using storyboards, local animations, clocks, and per-frame animations.|
+|[Storyboards Overview](storyboards-overview.md)|Describes how to use storyboards with multiple timelines to create complex animations.|
+|[Timing Behaviors Overview](timing-behaviors-overview.md)|Describes the <xref:System.Windows.Media.Animation.Timeline> types and properties used in animations.|
+|[Timing Events Overview](timing-events-overview.md)|Describes the events available on the <xref:System.Windows.Media.Animation.Timeline> and <xref:System.Windows.Media.Animation.Clock> objects for executing code at points in the timeline, such as begin, pause, resume, skip, or stop.|
+|[How-to Topics](animation-and-timing-how-to-topics.md)|Contains code examples for using animations and timelines in your application.|
+|[Clocks How-to Topics](clocks-how-to-topics.md)|Contains code examples for using the <xref:System.Windows.Media.Animation.Clock> object in your application.|
+|[Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)|Contains code examples for using key-frame animations in your application.|
+|[Path Animation How-to Topics](path-animation-how-to-topics.md)|Contains code examples for using path animations in your application.|
+
+<a name="reference"></a>
+
+## Reference
+
+- <xref:System.Windows.Media.Animation.Timeline>
+
+- <xref:System.Windows.Media.Animation.Storyboard>
+
+- <xref:System.Windows.Media.Animation.BeginStoryboard>
+
+- <xref:System.Windows.Media.Animation.Clock>

dotnet-desktop-guide/framework/wpf/graphics-multimedia/animation-tips-and-tricks.md

@@ -0,0 +1,127 @@
+---
+title: "Animation Tips and Tricks"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "troubleshooting [WPF], animation"
+  - "animations [WPF], FillBehavior property"
+  - "troubleshooting animation [WPF]"
+  - "animating objects [WPF], troubleshooting"
+  - "animation tips and tricks [WPF]"
+  - "tips and tricks [WPF], animation"
+  - "performance troubleshooting [WPF], animation"
+  - "animations [WPF], use of system resources"
+ms.assetid: e467796b-d5d4-45a6-a108-8c5d7ff69a0f
+---
+# Animation Tips and Tricks
+When working with animations in WPF, there are a number of tips and tricks that can make your animations perform better and save you frustration.  
+  
+<a name="generalissuessection"></a>
+## General Issues  
+  
+### Animating the Position of a Scroll Bar or Slider Freezes It  
+ If you animate the position of a scroll bar or slider using an animation that has a <xref:System.Windows.Media.Animation.FillBehavior> of <xref:System.Windows.Media.Animation.FillBehavior.HoldEnd> (the default value), the user will no longer be able to move the scroll bar or slider. That's because, even though the animation ended, it's still overriding the target property's base value. To stop the animation from overriding the property's current value, remove it, or give it a <xref:System.Windows.Media.Animation.FillBehavior> of <xref:System.Windows.Media.Animation.FillBehavior.Stop>. For more information and an example, see [Set a Property After Animating It with a Storyboard](how-to-set-a-property-after-animating-it-with-a-storyboard.md).  
+  
+### Animating the Output of an Animation Has No Effect  
+ You can't animate an object that is the output of another animation. For example, if you use an <xref:System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames> to animate the <xref:System.Windows.Shapes.Shape.Fill%2A> of a <xref:System.Windows.Shapes.Rectangle> from a <xref:System.Windows.Media.RadialGradientBrush> to a <xref:System.Windows.Media.SolidColorBrush>, you can't animate any properties of the <xref:System.Windows.Media.RadialGradientBrush> or <xref:System.Windows.Media.SolidColorBrush>.  
+  
+### Can't Change the Value of a Property after Animating it  
+ In some cases, it might appear that you can't change the value of a property after it's been animated, even after the animation has ended. That's because, even though the animation ended, it's still overriding the property's base value. To stop the animation from overriding the property's current value, remove it, or give it a <xref:System.Windows.Media.Animation.FillBehavior> of <xref:System.Windows.Media.Animation.FillBehavior.Stop>. For more information and an example, see [Set a Property After Animating It with a Storyboard](how-to-set-a-property-after-animating-it-with-a-storyboard.md).  
+  
+### Changing a Timeline Has No Effect  
+ Although most <xref:System.Windows.Media.Animation.Timeline> properties are animatable and can be data bound, changing the property values of an active <xref:System.Windows.Media.Animation.Timeline> seems to have no effect. That's because, when a <xref:System.Windows.Media.Animation.Timeline> is begun, the timing system makes a copy of the <xref:System.Windows.Media.Animation.Timeline> and uses it to create a <xref:System.Windows.Media.Animation.Clock> object. Modifying the original has no effect on the system's copy.  
+  
+ For a <xref:System.Windows.Media.Animation.Timeline> to reflect changes, its clock must be regenerated and used to replace the previously created clock. Clocks are not regenerated for you automatically. The following are several ways to apply timeline changes:  
+  
+- If the timeline is or belongs to a <xref:System.Windows.Media.Animation.Storyboard>, you can make it reflect changes by reapplying its storyboard using a <xref:System.Windows.Media.Animation.BeginStoryboard> or the <xref:System.Windows.Media.Animation.Storyboard.Begin%2A> method. This has the side effect of also restarting the animation. In code, you can use the <xref:System.Windows.Media.Animation.Storyboard.Seek%2A> method to advance the storyboard back to its previous position.  
+  
+- If you applied an animation directly to a property using the <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A> method, call the <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A> method again and pass it the animation that has been modified.  
+  
+- If you are working directly at the clock level, create and apply a new set of clocks and use them to replace the previous set of generated clocks.  
+  
+ For more information about timelines and clocks, see [Animation and Timing System Overview](animation-and-timing-system-overview.md).  
+  
+### FillBehavior.Stop Doesn't Work as Expected  
+ There are times when setting the <xref:System.Windows.Media.Animation.Timeline.FillBehavior%2A> property to <xref:System.Windows.Media.Animation.FillBehavior.Stop> seems to have no effect, such as when one animation "hands off" to another because it has a <xref:System.Windows.Media.Animation.BeginStoryboard.HandoffBehavior%2A> setting of <xref:System.Windows.Media.Animation.HandoffBehavior.SnapshotAndReplace>.  
+  
+ The following example creates a <xref:System.Windows.Controls.Canvas>, a <xref:System.Windows.Shapes.Rectangle> and a <xref:System.Windows.Media.TranslateTransform>. The <xref:System.Windows.Media.TranslateTransform> will be animated to move the <xref:System.Windows.Shapes.Rectangle> around the <xref:System.Windows.Controls.Canvas>.  
+  
+ [!code-xaml[AnimationTipsAndTricksSample_snip#FillBehaviorTipAnimatedObject](~/samples/snippets/csharp/VS_Snippets_Wpf/AnimationTipsAndTricksSample_snip/CSharp/FillBehaviorTip.xaml#fillbehaviortipanimatedobject)]  
+  
+ The examples in this section use the preceding objects to demonstrate several cases where the <xref:System.Windows.Media.Animation.Timeline.FillBehavior%2A> property doesn't behave as you might expect it to.  
+  
+#### FillBehavior="Stop" and HandoffBehavior with Multiple Animations  
+ Sometimes it seems as though an animation ignores its <xref:System.Windows.Media.Animation.Timeline.FillBehavior%2A> property when it is replaced by a second animation. Take the following example, which creates two <xref:System.Windows.Media.Animation.Storyboard> objects and uses them to animate the same <xref:System.Windows.Media.TranslateTransform> shown in the preceding example.  
+  
+ The first <xref:System.Windows.Media.Animation.Storyboard>, `B1`, animates the <xref:System.Windows.Media.TranslateTransform.X%2A> property of the <xref:System.Windows.Media.TranslateTransform> from 0 to 350, which moves the rectangle 350 pixels to the right. When the animation reaches the end of its duration and stops playing, the <xref:System.Windows.Media.TranslateTransform.X%2A> property reverts to its original value, 0. As a result, the rectangle moves to the right 350 pixels and then jumps back to its original position.  
+  
+ [!code-xaml[AnimationTipsAndTricksSample_snip#FillBehaviorTipStoryboardB1Button](~/samples/snippets/csharp/VS_Snippets_Wpf/AnimationTipsAndTricksSample_snip/CSharp/FillBehaviorTip.xaml#fillbehaviortipstoryboardb1button)]  
+  
+ The second <xref:System.Windows.Media.Animation.Storyboard>, `B2`, also animates the <xref:System.Windows.Media.TranslateTransform.X%2A> property of the same <xref:System.Windows.Media.TranslateTransform>. Because only the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property of the animation in this <xref:System.Windows.Media.Animation.Storyboard> is set, the animation uses the current value of the property it animates as its starting value.  
+  
+ [!code-xaml[AnimationTipsAndTricksSample_snip#FillBehaviorTipStoryboardB2Button](~/samples/snippets/csharp/VS_Snippets_Wpf/AnimationTipsAndTricksSample_snip/CSharp/FillBehaviorTip.xaml#fillbehaviortipstoryboardb2button)]  
+  
+ If you click the second button while the first <xref:System.Windows.Media.Animation.Storyboard> is playing, you might expect the following behavior:  
+  
+1. The first storyboard ends and sends the rectangle back to its original position, because the animation has a <xref:System.Windows.Media.Animation.Timeline.FillBehavior%2A> of <xref:System.Windows.Media.Animation.FillBehavior.Stop>.  
+  
+2. The second storyboard takes effect and animates from the current position, which is now 0, to 500.  
+  
+ **But that's not what happens.** Instead, the rectangle does not jump back; it continues moving to the right. That's because the second animation uses the current value of the first animation as its starting value and animates from that value to 500. When the second animation replaces the first because the <xref:System.Windows.Media.Animation.HandoffBehavior.SnapshotAndReplace><xref:System.Windows.Media.Animation.HandoffBehavior> is used, the <xref:System.Windows.Media.Animation.FillBehavior> of the first animation does not matter.  
+  
+#### FillBehavior and the Completed Event  
+ The next examples demonstrate another scenario in which the <xref:System.Windows.Media.Animation.FillBehavior.Stop><xref:System.Windows.Media.Animation.Timeline.FillBehavior%2A> seems to have no effect. Again, the example uses a Storyboard to animate the <xref:System.Windows.Media.TranslateTransform.X%2A> property of the <xref:System.Windows.Media.TranslateTransform> from 0 to 350. However, this time the example registers for the <xref:System.Windows.Media.Animation.Timeline.Completed> event.  
+  
+ [!code-xaml[AnimationTipsAndTricksSample_snip#FillBehaviorTipStoryboardCButton](~/samples/snippets/csharp/VS_Snippets_Wpf/AnimationTipsAndTricksSample_snip/CSharp/FillBehaviorTip.xaml#fillbehaviortipstoryboardcbutton)]  
+  
+ The <xref:System.Windows.Media.Animation.Timeline.Completed> event handler starts another <xref:System.Windows.Media.Animation.Storyboard> that animates the same property from its current value to 500.  
+  
+ [!code-csharp[AnimationTipsAndTricksSample_snip#FillBehaviorTipStoryboardC1CompletedHandler](~/samples/snippets/csharp/VS_Snippets_Wpf/AnimationTipsAndTricksSample_snip/CSharp/FillBehaviorTip.xaml.cs#fillbehaviortipstoryboardc1completedhandler)]
+ [!code-vb[AnimationTipsAndTricksSample_snip#FillBehaviorTipStoryboardC1CompletedHandler](~/samples/snippets/visualbasic/VS_Snippets_Wpf/AnimationTipsAndTricksSample_snip/VisualBasic/FillBehaviorTip.xaml.vb#fillbehaviortipstoryboardc1completedhandler)]  
+  
+ The following is the markup that defines the second <xref:System.Windows.Media.Animation.Storyboard> as a resource.  
+  
+ [!code-xaml[AnimationTipsAndTricksSample_snip#FillBehaviorTipResources](~/samples/snippets/csharp/VS_Snippets_Wpf/AnimationTipsAndTricksSample_snip/CSharp/FillBehaviorTip.xaml#fillbehaviortipresources)]  
+  
+ When you run the <xref:System.Windows.Media.Animation.Storyboard>, you might expect the <xref:System.Windows.Media.TranslateTransform.X%2A> property of the <xref:System.Windows.Media.TranslateTransform> to animate from 0 to 350, then revert to 0 after it completes (because it has a <xref:System.Windows.Media.Animation.FillBehavior> setting of <xref:System.Windows.Media.Animation.FillBehavior.Stop>), and then animate from 0 to 500. Instead, the <xref:System.Windows.Media.TranslateTransform> animates from 0 to 350 and then to 500.  
+  
+ That's because of the order in which WPF raises events and because property values are cached and are not recalculated unless the property is invalidated. The <xref:System.Windows.Media.Animation.Timeline.Completed> event is processed first because it was triggered by the root timeline (the first <xref:System.Windows.Media.Animation.Storyboard>). At this time, the <xref:System.Windows.Media.TranslateTransform.X%2A> property still returns its animated value because it hasn't been invalidated yet. The second <xref:System.Windows.Media.Animation.Storyboard> uses the cached value as its starting value and begins animating.  
+  
+<a name="performancesection"></a>
+## Performance  
+  
+### Animations Continue to Run After Navigating Away from a Page  
+ When you navigate away from a <xref:System.Windows.Controls.Page> that contains running animations, those animations will continue to play until the <xref:System.Windows.Controls.Page> is garbage collected. Depending on the navigation system you're using, a page that you navigate away from might stay in memory for an indefinite amount of time, all the while consuming resources with its animations. This is most noticeable when a page contains constantly running ("ambient") animations.  
+  
+ For this reason, it's a good idea to use the <xref:System.Windows.FrameworkElement.Unloaded> event to remove animations when you navigate away from a page.  
+  
+ There are different ways to remove an animation. The following techniques can be used to remove animations that belong to a <xref:System.Windows.Media.Animation.Storyboard>.  
+  
+- To remove a <xref:System.Windows.Media.Animation.Storyboard> you started with an event trigger, see [How to: Remove a Storyboard](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/ms749412(v=vs.90)).  
+  
+- To use code to remove a <xref:System.Windows.Media.Animation.Storyboard>, see the <xref:System.Windows.Media.Animation.Storyboard.Remove%2A> method.  
+  
+ The next technique may be used regardless of how the animation was started.  
+  
+- To remove animations from a specific property, use the <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%28System.Windows.DependencyProperty%2CSystem.Windows.Media.Animation.AnimationTimeline%29> method. Specify the property being animated as the first parameter, and `null` as the second. This will remove all animation clocks from the property.  
+  
+ For more information about the different ways to animate properties, see [Property Animation Techniques Overview](property-animation-techniques-overview.md).  
+  
+### Using the Compose HandoffBehavior Consumes System Resources  
+ When you apply a <xref:System.Windows.Media.Animation.Storyboard>, <xref:System.Windows.Media.Animation.AnimationTimeline>, or <xref:System.Windows.Media.Animation.AnimationClock> to a property using the <xref:System.Windows.Media.Animation.HandoffBehavior.Compose><xref:System.Windows.Media.Animation.HandoffBehavior>, any <xref:System.Windows.Media.Animation.Clock> objects previously associated with that property continue to consume system resources; the timing system will not remove these clocks automatically.  
+  
+ To avoid performance issues when you apply a large number of clocks using <xref:System.Windows.Media.Animation.HandoffBehavior.Compose>, you should remove composing clocks from the animated property after they complete. There are several ways to remove a clock.  
+  
+- To remove all clocks from a property, use the <xref:System.Windows.Media.Animation.Animatable.ApplyAnimationClock%28System.Windows.DependencyProperty%2CSystem.Windows.Media.Animation.AnimationClock%29> or <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%28System.Windows.DependencyProperty%2CSystem.Windows.Media.Animation.AnimationTimeline%29> method of the animated object. Specify the property being animated as the first parameter, and `null` as the second. This will remove all animation clocks from the property.  
+  
+- To remove a specific <xref:System.Windows.Media.Animation.AnimationClock> from a list of clocks, use the <xref:System.Windows.Media.Animation.Clock.Controller%2A> property of the <xref:System.Windows.Media.Animation.AnimationClock> to retrieve a <xref:System.Windows.Media.Animation.ClockController>, then call the <xref:System.Windows.Media.Animation.ClockController.Remove%2A> method of the <xref:System.Windows.Media.Animation.ClockController>. This is typically done in the <xref:System.Windows.Media.Animation.Clock.Completed> event handler for a clock. Note that only root clocks can be controlled by a <xref:System.Windows.Media.Animation.ClockController>; the <xref:System.Windows.Media.Animation.Clock.Controller%2A> property of a child clock will return `null`. Note also that the <xref:System.Windows.Media.Animation.Clock.Completed> event will not be called if the effective duration of the clock is forever.  In that case, the user will need to determine when to call <xref:System.Windows.Media.Animation.ClockController.Remove%2A>.  
+  
+ This is primarily an issue for animations on objects that have a long lifetime.  When an object is garbage collected, its clocks will also be disconnected and garbage collected.  
+  
+ For more information about clock objects, see [Animation and Timing System Overview](animation-and-timing-system-overview.md).  
+  
+## See also
+
+- [Animation Overview](animation-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/audio-and-video-how-to-topics.md

@@ -0,0 +1,30 @@
+---
+title: "Audio and Video How-to Topics"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "multimedia [WPF]"
+  - "media [WPF]"
+ms.assetid: f7d96707-ffb5-486c-9e85-db6f0d5ac547
+---
+# Audio and Video How-to Topics
+The following topics demonstrate how to use the <xref:System.Windows.Controls.MediaElement> to integrate audio and video content in your applications.  
+  
+## In This Section  
+ [Control a MediaElement (Play, Pause, Stop, Volume, and Speed)](how-to-control-a-mediaelement-play-pause-stop-volume-and-speed.md)  
+ [Control a MediaElement by Using a Storyboard](how-to-control-a-mediaelement-by-using-a-storyboard.md)  
+ [Trigger Media Playback with a User Event](how-to-trigger-media-playback-with-a-user-event.md)  
+ [Repeat Media Playback](how-to-repeat-media-playback.md)  
+ [Play Media with Animations](how-to-play-media-with-animations.md)  
+ [Use Transforms on a MediaElement](how-to-use-transforms-on-a-mediaelement.md)  
+  
+## Reference  
+ <xref:System.Windows.Controls.MediaElement>  
+  
+ <xref:System.Windows.Media.MediaPlayer>  
+  
+ <xref:System.Windows.Media.MediaTimeline>  
+  
+## Related Sections  
+ [Graphics and Multimedia](index.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/bitmap-effects-overview.md

@@ -0,0 +1,64 @@
+---
+title: "Bitmap Effects Overview"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "bitmap effects [WPF]"
+ms.assetid: 23cb338e-4b59-4b52-b294-96431f9c9568
+---
+# Bitmap Effects Overview
+Bitmap effects enable designers and developers to apply visual effects to rendered Windows Presentation Foundation (WPF) content. For example, bitmap effects allow you to easily apply a <xref:System.Windows.Media.Effects.DropShadowBitmapEffect> effect or a blur effect to an image or a button.  
+  
+> [!IMPORTANT]
+> In the .NET Framework 4 or later, the <xref:System.Windows.Media.Effects.BitmapEffect> class is obsolete. If you try to use the <xref:System.Windows.Media.Effects.BitmapEffect> class, you will get an obsolete exception. The non-obsolete alternative to the <xref:System.Windows.Media.Effects.BitmapEffect> class is the <xref:System.Windows.Media.Effects.Effect> class. In most situations, the <xref:System.Windows.Media.Effects.Effect> class is significantly faster.  
+
+<a name="wpf_effects"></a>
+## WPF Bitmap Effects  
+ Bitmap effects (<xref:System.Windows.Media.Effects.BitmapEffect> object) are simple pixel processing operations. A bitmap effect takes a <xref:System.Windows.Media.Imaging.BitmapSource> as an input and produces a new <xref:System.Windows.Media.Imaging.BitmapSource> after applying the effect, such as a blur or drop shadow. Each bitmap effect exposes properties that can control the filtering properties, such as <xref:System.Windows.Media.Effects.BlurBitmapEffect.Radius%2A> of <xref:System.Windows.Media.Effects.BlurBitmapEffect>.  
+  
+ As a special case, in [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)], effects can be set as properties on live <xref:System.Windows.Media.Visual> objects, such as a <xref:System.Windows.Controls.Button> or <xref:System.Windows.Controls.TextBox>. The pixel processing is applied and rendered at run-time. In this case, at the time of rendering, a <xref:System.Windows.Media.Visual> is automatically converted to its <xref:System.Windows.Media.Imaging.BitmapSource> equivalent and is fed as input to the <xref:System.Windows.Media.Effects.BitmapEffect>. The output replaces the <xref:System.Windows.Media.Visual> object's default rendering behavior. This is why <xref:System.Windows.Media.Effects.BitmapEffect> objects force visuals to render in software only i.e. no hardware acceleration on visuals when effects are applied.  
+  
+- <xref:System.Windows.Media.Effects.BlurBitmapEffect> simulates an object that appears out-of-focus.  
+  
+- <xref:System.Windows.Media.Effects.OuterGlowBitmapEffect> creates a halo of color around the perimeter of an object.  
+  
+- <xref:System.Windows.Media.Effects.DropShadowBitmapEffect> creates a shadow behind an object.  
+  
+- <xref:System.Windows.Media.Effects.BevelBitmapEffect> creates a bevel which raises the surface of an image according to a specified curve.  
+  
+- <xref:System.Windows.Media.Effects.EmbossBitmapEffect> creates a bump mapping of a <xref:System.Windows.Media.Visual> to give the impression of depth and texture from an artificial light source.  
+  
+> [!NOTE]
+> WPF bitmap effects are rendered in software mode. Any object that applies an effect will also be rendered in software. Performance is degraded the most when using Bitmap effects on large visuals or animating properties of a Bitmap effect. This is not to say that you should not use Bitmap effects in this way at all, but you should use caution and test thoroughly to ensure that your users are getting the experience you expect.  
+  
+> [!NOTE]
+> WPF bitmap effects do not support partial trust execution. An application must have full trust permissions to use bitmap effects.  
+  
+<a name="applyeffects"></a>
+## How to Apply an Effect  
+ <xref:System.Windows.Media.Effects.BitmapEffect> is a property on <xref:System.Windows.Media.Visual>. Therefore applying effects to Visuals, such as a <xref:System.Windows.Controls.Button>, <xref:System.Windows.Controls.Image>, <xref:System.Windows.Media.DrawingVisual>, or <xref:System.Windows.UIElement>, is as easy as setting a property. <xref:System.Windows.UIElement.BitmapEffect%2A> can be set to a single <xref:System.Windows.Media.Effects.BitmapEffect> object or multiple effects can be chained by using the <xref:System.Windows.Media.Effects.BitmapEffectGroup> object.  
+  
+ The following example demonstrates how to apply a <xref:System.Windows.Media.Effects.BitmapEffect> in [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)].  
+  
+ [!code-xaml[EffectsGallery_snip#BlurSimpleExampleInline](~/samples/snippets/csharp/VS_Snippets_Wpf/EffectsGallery_snip/CSharp/blursimpleexample.xaml#blursimpleexampleinline)]  
+  
+ The following example demonstrates how to apply a <xref:System.Windows.Media.Effects.BitmapEffect> in code.  
+  
+ [!code-csharp[EffectsGallery_snip#CodeBehindBlurCodeBehindExampleInline](~/samples/snippets/csharp/VS_Snippets_Wpf/EffectsGallery_snip/CSharp/blurcodebehindexample.xaml.cs#codebehindblurcodebehindexampleinline)]  
+  
+> [!NOTE]
+> When a <xref:System.Windows.Media.Effects.BitmapEffect> is applied to a layout container, such as <xref:System.Windows.Controls.DockPanel> or <xref:System.Windows.Controls.Canvas>, the effect is applied to the visual tree of the element or visual, including all of its child elements.  
+  
+<a name="customeffects"></a>
+## Creating Custom Effects  
+ WPF also provides unmanaged interfaces to create custom effects that can be used in managed WPF applications. For additional reference material for creating custom bitmap effects, see the [Unmanaged WPF Bitmap Effect](https://docs.microsoft.com/previous-versions/windows/desktop/wibe/-wibe-lh) documentation.  
+  
+## See also
+
+- <xref:System.Windows.Media.Effects.BitmapEffectGroup>
+- <xref:System.Windows.Media.Effects.BitmapEffectInput>
+- <xref:System.Windows.Media.Effects.BitmapEffectCollection>
+- [Unmanaged WPF Bitmap Effect](https://docs.microsoft.com/previous-versions/windows/desktop/wibe/-wibe-lh)
+- [Imaging Overview](imaging-overview.md)
+- [Security](../security-wpf.md)
+- [WPF Graphics Rendering Overview](wpf-graphics-rendering-overview.md)
+- [2D Graphics and Imaging](../advanced/optimizing-performance-2d-graphics-and-imaging.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/bitmap-effects.md

@@ -0,0 +1,30 @@
+---
+title: "Bitmap Effects"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "graphics [WPF], bitmap effects"
+  - "bitmap effects [WPF]"
+  - "bitmap images [WPF]"
+  - "images [WPF], bitmap"
+ms.assetid: be180b56-ca6e-4da3-a839-f6b0bf482f7d
+---
+# Bitmap Effects
+The topics in this section describe how to apply visual effects to bitmap images using [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)].  
+  
+> [!IMPORTANT]
+> In the .NET Framework 4 or later, the <xref:System.Windows.Media.Effects.BitmapEffect> class is obsolete. If you try to use the <xref:System.Windows.Media.Effects.BitmapEffect> class, you will get an obsolete exception. The non-obsolete alternative to the <xref:System.Windows.Media.Effects.BitmapEffect> class is the <xref:System.Windows.Media.Effects.Effect> class. In most situations, the <xref:System.Windows.Media.Effects.Effect> class is significantly faster.  
+  
+## In This Section  
+ [Bitmap Effects Overview](bitmap-effects-overview.md)  
+  
+## Reference  
+ <xref:System.Windows.Media.Effects.BitmapEffect>  
+  
+ <xref:System.Windows.Media.Effects>  
+  
+## Related Sections  
+ [Graphics and Multimedia](index.md)  
+  
+ [Imaging Overview](imaging-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/brush-transformation-overview.md

@@ -0,0 +1,102 @@
+---
+title: "Brush Transformation Overview"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "brushes [WPF], transformation properties"
+  - "properties [WPF], transformation"
+  - "transformation properties of brushes [WPF]"
+ms.assetid: 8b9bfc09-12fd-4cd5-b445-99949f27bc39
+---
+# Brush Transformation Overview
+The Brush class provides two transformation properties: <xref:System.Windows.Media.Brush.Transform%2A> and <xref:System.Windows.Media.Brush.RelativeTransform%2A>. The properties enable you to rotate, scale, skew, and translate a brush's contents. This topic describes the differences between these two properties and provides examples of their usage.  
+  
+<a name="prerequisites"></a>
+## Prerequisites  
+ To understand this topic, you should understand the features of the brush that you are transforming. For <xref:System.Windows.Media.LinearGradientBrush> and <xref:System.Windows.Media.RadialGradientBrush>, see the [Painting with Solid Colors and Gradients Overview](painting-with-solid-colors-and-gradients-overview.md). For <xref:System.Windows.Media.ImageBrush>, <xref:System.Windows.Media.DrawingBrush>, or <xref:System.Windows.Media.VisualBrush>, see  [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md). You should also be familiar with the 2D transforms described in the  [Transforms Overview](transforms-overview.md).  
+  
+<a name="transformversusrelativetransform"></a>
+## Differences between the Transform and RelativeTransform Properties  
+ When you apply a transform to a brush's <xref:System.Windows.Media.Brush.Transform%2A> property, you need to know the size of the painted area if you want to transform the brush contents about its center. Suppose the painted area is 200 device independent pixels wide and 150 tall.  If you used a <xref:System.Windows.Media.RotateTransform> to rotate the brush's output 45 degrees about its center, you'd give the <xref:System.Windows.Media.RotateTransform> a <xref:System.Windows.Media.RotateTransform.CenterX%2A> of 100 and a <xref:System.Windows.Media.RotateTransform.CenterY%2A> of 75.  
+  
+ When you apply a transform to a brush's <xref:System.Windows.Media.Brush.RelativeTransform%2A> property, that transform is applied to the brush before its output is mapped to the painted area. The following list describes the order in which a brush’s contents are processed and transformed.  
+  
+1. Process the brush’s contents. For a <xref:System.Windows.Media.GradientBrush>, this means determining the gradient area. For a <xref:System.Windows.Media.TileBrush>, the <xref:System.Windows.Media.TileBrush.Viewbox%2A> is mapped to the <xref:System.Windows.Media.TileBrush.Viewport%2A>. This becomes the brush’s output.  
+  
+2. Project the brush’s output onto the 1 x 1 transformation rectangle.  
+  
+3. Apply the brush’s <xref:System.Windows.Media.Brush.RelativeTransform%2A>, if it has one.  
+  
+4. Project the transformed output onto the area to paint.  
+  
+5. Apply the brush’s <xref:System.Windows.Media.Transform>, if it has one.  
+  
+ Because the <xref:System.Windows.Media.Brush.RelativeTransform%2A> is applied while the brush’s output is mapped to a 1 x 1 rectangle, transform center and offset values appear to be relative. For example, if you used a <xref:System.Windows.Media.RotateTransform> to rotate the brush's output 45 degrees about its center, you'd give the <xref:System.Windows.Media.RotateTransform> a <xref:System.Windows.Media.RotateTransform.CenterX%2A> of 0.5 and a <xref:System.Windows.Media.RotateTransform.CenterY%2A> of 0.5.  
+  
+ The following illustration shows the output of several brushes that have been rotated by 45 degrees using the <xref:System.Windows.Media.Brush.RelativeTransform%2A> and <xref:System.Windows.Media.Brush.Transform%2A> properties.  
+  
+ ![RelativeTransform and Transform properties](./media/graphicsmm-brushrelativetransform-transform-small.png "graphicsmm_brushrelativetransform_transform_small")  
+  
+<a name="relativetransformandtilebrush"></a>
+## Using RelativeTransform with a TileBrush  
+ Because tile brushes are more complex than other brushes, applying a <xref:System.Windows.Media.Brush.RelativeTransform%2A> to one might produce unexpected results. For example, take the following image.  
+  
+ ![The source image](./media/graphicsmm-reltransform-1-original-image.jpg "graphicsmm_reltransform_1_original_image")  
+  
+ The following example uses an <xref:System.Windows.Media.ImageBrush> to paint a rectangular area with the preceding image. It applies a <xref:System.Windows.Media.RotateTransform> to the <xref:System.Windows.Media.ImageBrush> object's <xref:System.Windows.Media.Brush.RelativeTransform%2A> property, and sets its <xref:System.Windows.Media.TileBrush.Stretch%2A> property to <xref:System.Windows.Media.Stretch.UniformToFill>, which should preserve the image's aspect ratio when it is stretched to completely fill the rectangle.  
+  
+ [!code-xaml[BrushOverviewExamples_snip#GraphicsMMRelativeTransformExample2Inline](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushOverviewExamples_snip/XAML/RelativeTransformIllustration.xaml#graphicsmmrelativetransformexample2inline)]  
+  
+ This example produces the following output:  
+  
+ ![The transformed output](./media/graphicsmm-reltransform-6-output.png "graphicsmm_reltransform_6_output")  
+  
+ Notice that the image is distorted, even though the brush's <xref:System.Windows.Media.TileBrush.Stretch%2A> was set to <xref:System.Windows.Media.Stretch.UniformToFill>. That's because the relative transform is applied after the brush's <xref:System.Windows.Media.TileBrush.Viewbox%2A> is mapped to its <xref:System.Windows.Media.TileBrush.Viewport%2A>. The following list describes each step of the process:  
+  
+1. Project the brush's contents (<xref:System.Windows.Media.TileBrush.Viewbox%2A>) onto its base tile (<xref:System.Windows.Media.TileBrush.Viewport%2A>) using the brush's <xref:System.Windows.Media.TileBrush.Stretch%2A> setting.  
+  
+     ![Stretch the Viewbox to fit the Viewport](./media/graphicsmm-reltransform-2-viewbox-to-viewport.png "graphicsmm_reltransform_2_viewbox_to_viewport")  
+  
+2. Project the base tile onto the 1 x 1 transformation rectangle.  
+  
+     ![Map the Viewport to the transformation rectangle](./media/graphicsmm-reltransform-3-output-to-transform.png "graphicsmm_reltransform_3_output_to_transform")  
+  
+3. Apply the <xref:System.Windows.Media.RotateTransform>.  
+  
+     ![Apply the relative transform](./media/graphicsmm-reltransform-4-transform-rotate.png "graphicsmm_reltransform_4_transform_rotate")  
+  
+4. Project the transformed base tile onto the area to paint.  
+  
+     ![Project the transformed brush onto the output area](./media/graphicsmm-reltransform-5-transform-to-output.png "graphicsmm_reltransform_5_transform_to_output")  
+  
+<a name="rotateexample"></a>
+## Example: Rotate an ImageBrush 45 Degrees  
+ The following example applies a <xref:System.Windows.Media.RotateTransform> to the <xref:System.Windows.Media.Brush.RelativeTransform%2A> property of an <xref:System.Windows.Media.ImageBrush>. The <xref:System.Windows.Media.RotateTransform> object's <xref:System.Windows.Media.RotateTransform.CenterX%2A> and <xref:System.Windows.Media.RotateTransform.CenterY%2A> properties are both set to 0.5, the relative coordinates of the content's center point. As a result, the brush's contents are rotated about its center.  
+  
+ [!code-csharp[BrushesIntroduction_snip#ImageBrushRelativeTransformExample](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushesIntroduction_snip/CSharp/BrushTransformExample.cs#imagebrushrelativetransformexample)]
+ [!code-vb[BrushesIntroduction_snip#ImageBrushRelativeTransformExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushesIntroduction_snip/visualbasic/brushtransformexample.vb#imagebrushrelativetransformexample)]
+ [!code-xaml[BrushesIntroduction_snip#ImageBrushRelativeTransformExample](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushesIntroduction_snip/XAML/BrushTransformExample.xaml#imagebrushrelativetransformexample)]  
+  
+ The next example also applies a <xref:System.Windows.Media.RotateTransform> to an <xref:System.Windows.Media.ImageBrush>, but uses the <xref:System.Windows.Media.Brush.Transform%2A> property instead of the <xref:System.Windows.Media.Brush.RelativeTransform%2A> property. To rotate the brush about its center, the <xref:System.Windows.Media.RotateTransform> object's <xref:System.Windows.Media.RotateTransform.CenterX%2A> and <xref:System.Windows.Media.RotateTransform.CenterY%2A> must be set to absolute coordinates. Because the rectangle being painted by the brush is 175 by 90 pixels, its center point is (87.5, 45).  
+  
+ [!code-csharp[BrushesIntroduction_snip#ImageBrushTransformExample](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushesIntroduction_snip/CSharp/BrushTransformExample.cs#imagebrushtransformexample)]
+ [!code-vb[BrushesIntroduction_snip#ImageBrushTransformExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushesIntroduction_snip/visualbasic/brushtransformexample.vb#imagebrushtransformexample)]
+ [!code-xaml[BrushesIntroduction_snip#ImageBrushTransformExample](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushesIntroduction_snip/XAML/BrushTransformExample.xaml#imagebrushtransformexample)]  
+  
+ The following illustration shows the brush without a transform, with the transform applied to the <xref:System.Windows.Media.Brush.RelativeTransform%2A> property, and with the transform applied to the <xref:System.Windows.Media.Brush.Transform%2A> property.  
+  
+ ![Brush RelativeTransform and Transform settings](./media/wcpsdk-graphicsmm-transformandrelativetransform.png "wcpsdk_graphicsmm_transformandrelativetransform")  
+  
+ This example is part of a larger sample. For the complete sample, see the [Brushes Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Brushes). For more information about brushes, see the  [WPF Brushes Overview](wpf-brushes-overview.md).  
+  
+## See also
+
+- <xref:System.Windows.Media.Brush.Transform%2A>
+- <xref:System.Windows.Media.Brush.RelativeTransform%2A>
+- <xref:System.Windows.Media.Transform>
+- <xref:System.Windows.Media.Brush>
+- [Painting with Solid Colors and Gradients Overview](painting-with-solid-colors-and-gradients-overview.md)
+- [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md)
+- [Transforms Overview](transforms-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/brushes-how-to-topics.md

@@ -0,0 +1,50 @@
+---
+title: "Brushes How-to Topics"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "graphics [WPF], brushes"
+  - "brushes [WPF]"
+ms.assetid: 43e7f798-9558-4498-b5b6-4a4c6baf956b
+---
+# Brushes How-to Topics
+The following topics demonstrate how to use [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] brushes in order to paint content to the screen.  
+  
+## In This Section  
+ [Animate the Color or Opacity of a SolidColorBrush](how-to-animate-the-color-or-opacity-of-a-solidcolorbrush.md)  
+ [Animate the Position or Color of a Gradient Stop](how-to-animate-the-position-or-color-of-a-gradient-stop.md)  
+ [Create a Reflection](how-to-create-a-reflection.md)  
+ [Create Different Tile Patterns with a TileBrush](how-to-create-different-tile-patterns-with-a-tilebrush.md)  
+ [Define a Pen](how-to-define-a-pen.md)  
+ [Paint an Area with a Drawing](how-to-paint-an-area-with-a-drawing.md)  
+ [Paint an Area with an Image](how-to-paint-an-area-with-an-image.md)  
+ [Paint an Area with a Linear Gradient](how-to-paint-an-area-with-a-linear-gradient.md)  
+ [Paint an Area with a Radial Gradient](how-to-paint-an-area-with-a-radial-gradient.md)  
+ [Paint an Area with a Solid Color](how-to-paint-an-area-with-a-solid-color.md)  
+ [Paint an Area with a System Brush](how-to-paint-an-area-with-a-system-brush.md)  
+ [Paint an Area with a Video](how-to-paint-an-area-with-a-video.md)  
+ [Paint an Area with a Visual](how-to-paint-an-area-with-a-visual.md)  
+ [Preserve the Aspect Ratio of an Image Used as a Background](how-to-preserve-the-aspect-ratio-of-an-image-used-as-a-background.md)  
+ [Set the Horizontal and Vertical Alignment of a TileBrush](how-to-set-the-horizontal-and-vertical-alignment-of-a-tilebrush.md)  
+ [Set the Tile Size for a TileBrush](how-to-set-the-tile-size-for-a-tilebrush.md)  
+ [Transform a Brush](how-to-transform-a-brush.md)  
+ [Use System Colors in a Gradient](how-to-use-system-colors-in-a-gradient.md)  
+  
+## Reference  
+ <xref:System.Windows.Media.Brush>  
+  
+ <xref:System.Windows.Media.SolidColorBrush>  
+  
+ <xref:System.Windows.Media.LinearGradientBrush>  
+  
+ <xref:System.Windows.Media.RadialGradientBrush>  
+  
+ <xref:System.Windows.Media.DrawingBrush>  
+  
+ <xref:System.Windows.Media.VisualBrush>  
+  
+## Related Sections  
+ [Graphics and Multimedia](index.md)  
+  
+ [WPF Graphics Rendering Overview](wpf-graphics-rendering-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/brushes.md

@@ -0,0 +1,40 @@
+---
+title: "Brushes"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "graphics [WPF], brushes"
+  - "painting [WPF]"
+  - "brushes [WPF]"
+ms.assetid: 26710879-12ad-4c63-9bc6-a1834bb4243b
+---
+# Brushes
+The following topics describe how to use [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] brushes to "paint" content to the screen  
+  
+## In This Section  
+ [WPF Brushes Overview](wpf-brushes-overview.md)  
+ [Brush Transformation Overview](brush-transformation-overview.md)  
+ [Opacity Masks Overview](opacity-masks-overview.md)  
+ [Painting with Solid Colors and Gradients Overview](painting-with-solid-colors-and-gradients-overview.md)  
+ [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md)  
+ [TileBrush Overview](tilebrush-overview.md)  
+ [How-to Topics](brushes-how-to-topics.md)  
+  
+## Reference  
+ <xref:System.Windows.Media.Brush>  
+  
+ <xref:System.Windows.Media.SolidColorBrush>  
+  
+ <xref:System.Windows.Media.LinearGradientBrush>  
+  
+ <xref:System.Windows.Media.RadialGradientBrush>  
+  
+ <xref:System.Windows.Media.DrawingBrush>  
+  
+ <xref:System.Windows.Media.VisualBrush>  
+  
+## Related Sections  
+ [Graphics and Multimedia](index.md)  
+  
+ [WPF Graphics Rendering Overview](wpf-graphics-rendering-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/change-the-speed-of-a-clock.md

@@ -0,0 +1,17 @@
+---
+title: "How to: Change the Speed of a Clock Without Changing the Speed of Its Timeline"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "speed of Clock [WPF], changing"
+  - "clocks [WPF], changing speed of"
+ms.assetid: 72f36dd0-f085-445d-8589-19a83fe74f5e
+---
+# How to: Change the Speed of a Clock Without Changing the Speed of Its Timeline
+A <xref:System.Windows.Media.Animation.ClockController> object's <xref:System.Windows.Media.Animation.ClockController.SpeedRatio%2A> property enables you to change the speed of a <xref:System.Windows.Media.Animation.Clock> without altering the <xref:System.Windows.Media.Animation.Timeline.SpeedRatio%2A> of the clock's <xref:System.Windows.Media.Animation.Timeline>. In the following example, a <xref:System.Windows.Media.Animation.ClockController> is used to interactively modify the <xref:System.Windows.Media.Animation.ClockController.SpeedRatio%2A> of a clock. The <xref:System.Windows.Media.Animation.Clock.CurrentGlobalSpeedInvalidated> event and the clock's <xref:System.Windows.Media.Animation.Clock.CurrentGlobalSpeed%2A> property are used to display the clock's current global speed each time its interactive <xref:System.Windows.Media.Animation.ClockController.SpeedRatio%2A> is changed.  
+  
+## Example  
+ [!code-csharp[timingbehaviors_procedural_snip#GraphicsMMClockControllerSpeedRatioExample](~/samples/snippets/csharp/VS_Snippets_Wpf/timingbehaviors_procedural_snip/CSharp/ClockControllerSpeedRatioExample.cs#graphicsmmclockcontrollerspeedratioexample)]
+ [!code-vb[timingbehaviors_procedural_snip#GraphicsMMClockControllerSpeedRatioExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/timingbehaviors_procedural_snip/visualbasic/clockcontrollerspeedratioexample.vb#graphicsmmclockcontrollerspeedratioexample)]

dotnet-desktop-guide/framework/wpf/graphics-multimedia/clocks-how-to-topics.md

@@ -0,0 +1,33 @@
+---
+title: "Clocks How-to Topics"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "graphics [WPF], clocks"
+  - "clocks [WPF]"
+  - "clocks [WPF], animation"
+  - "animation [WPF], clocks"
+ms.assetid: c687b2a5-b151-41e2-9ade-df2fc1a16b04
+---
+# Clocks How-to Topics
+The following topics describe how to use a <xref:System.Windows.Media.Animation.Clock> object to maintain timing state information for a <xref:System.Windows.Media.Animation.Timeline>.  
+  
+## In This Section  
+ [Animate a Property by Using an AnimationClock](how-to-animate-a-property-by-using-an-animationclock.md)  
+ [Interactively Control a Clock](how-to-interactively-control-a-clock.md)  
+ [Seek a Clock Synchronously](how-to-seek-a-clock-synchronously.md)  
+  
+## Reference  
+ <xref:System.Windows.Media.Animation.Clock>  
+  
+ <xref:System.Windows.Media.Animation.Storyboard>  
+  
+ <xref:System.Windows.Media.Animation>  
+  
+ <xref:System.Windows.Media.Animation.Timeline>  
+  
+## Related Sections  
+ [Animation Overview](animation-overview.md)  
+  
+ [Storyboards Overview](storyboards-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/custom-animations-overview.md

@@ -0,0 +1,130 @@
+---
+title: "Custom Animations Overview"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "custom classes [WPF], animation"
+  - "key frames [WPF], custom"
+  - "custom key frames [WPF]"
+  - "animation [WPF], custom classes"
+  - "custom animation classes [WPF]"
+ms.assetid: 9be69d50-3384-4938-886f-08ce00e4a7a6
+---
+# Custom Animations Overview
+This topic describes how and when to extend the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animation system by creating custom key frames, animation classes, or by using per-frame callback to bypass it.  
+  
+<a name="prerequisites"></a>
+## Prerequisites  
+ To understand this topic, you should be familiar with the different types of animations provided by the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)]. For more information, see the From/To/By Animations Overview, the [Key-Frame Animations Overview](key-frame-animations-overview.md), and the [Path Animations Overview](path-animations-overview.md).  
+  
+ Because the animation classes inherit from the <xref:System.Windows.Freezable> class, you should be familiar with <xref:System.Windows.Freezable> objects and how to inherit from <xref:System.Windows.Freezable>. For more information, see the [Freezable Objects Overview](../advanced/freezable-objects-overview.md).  
+  
+<a name="extendingtheanimationsystem"></a>
+## Extending the Animation System  
+ There are a number of ways to extend the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animation system, depending on the level of built-in functionality you want to use.  There are three primary extensibility points in the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animation engine:  
+  
+- Create a custom key frame object by inheriting from one of the *\<Type>*KeyFrame classes, such as <xref:System.Windows.Media.Animation.DoubleKeyFrame>. This approach uses most of the built-in functionality of the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animation engine.  
+  
+- Create your own animation class by inheriting from <xref:System.Windows.Media.Animation.AnimationTimeline> or one of the *\<Type>*AnimationBase classes.  
+  
+- Use per-frame callback to generate animations on a per-frame basis. This approach completely bypasses the animation and timing system.  
+  
+ The following table describes some the scenarios for extending the animation system.  
+  
+|When you want to...|Use this approach|  
+|-------------------------|-----------------------|  
+|Customize the interpolation between values of a type that has a corresponding *\<Type>*AnimationUsingKeyFrames|Create a custom key frame. For more information, see the [Create a Custom Key Frame](#createacustomkeyframe) section.|  
+|Customize more than just the interpolation between values of a type that has a corresponding *\<Type>*Animation.|Create a custom animation class that inherits from the *\<Type>*AnimationBase class that corresponds to the type you want to animate. For more information, see the [Create a Custom Animation Class](#createacustomanimationtype) section.|  
+|Animate a type that has no corresponding [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animation|Use an <xref:System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames> or create a class that inherits from <xref:System.Windows.Media.Animation.AnimationTimeline>. For more information, see the [Create a Custom Animation Class](#createacustomanimationtype) section.|  
+|Animate multiple objects with values that are computed each frame and are based on the last set of object interactions|Use per-frame callback. For more information, see the [Create a Use Per-Frame Callback](#useperframecallback) section.|  
+  
+<a name="createacustomkeyframe"></a>
+## Create a Custom Key Frame  
+ Creating a custom key frame class is the simplest way to extend the animation system. Use this approach when you want to a different interpolation method for a key-frame animation.  As described in the [Key-Frame Animations Overview](key-frame-animations-overview.md), a key-frame animation uses key frame objects to generate its output values. Each key frame object performs three functions:  
+  
+- Specifies a target value using its <xref:System.Windows.Media.Animation.IKeyFrame.Value%2A> property.  
+  
+- Specifies the time at which that value should be reached using its <xref:System.Windows.Media.Animation.IKeyFrame.KeyTime%2A> property.  
+  
+- Interpolates between the value of the previous key frame and its own value by implementing the InterpolateValueCore method.  
+  
+ **Implementation Instructions**  
+  
+ Derive from the *\<Type>*KeyFrame abstract class and implement the InterpolateValueCore method. The InterpolateValueCore method returns the current value of the key frame. It takes two parameters: the value of the previous key frame and a progress value that ranges from 0 to 1. A progress of 0 indicates the key frame has just started, and a value of 1 indicates that the key frame has just completed and should return the value specified by its <xref:System.Windows.Media.Animation.IKeyFrame.Value%2A> property.  
+  
+ Because the *\<Type>*KeyFrame classes inherit from the <xref:System.Windows.Freezable> class, you must also override <xref:System.Windows.Freezable.CreateInstanceCore%2A> core to return a new instance of your class. If the class does not use dependency properties to store its data or it requires extra initialization after creation, you might need to override additional methods; see the [Freezable Objects Overview](../advanced/freezable-objects-overview.md) for more information.  
+  
+ After you've created your custom *\<Type>*KeyFrame animation, you can use it with the *\<Type>*AnimationUsingKeyFrames for that type.  
+  
+<a name="createacustomanimationtype"></a>
+## Create a Custom Animation Class  
+ Creating your own animation type gives you more control over how an object in animated. There are two recommended ways to create your own animation type: you can derive from the <xref:System.Windows.Media.Animation.AnimationTimeline> class or the *\<Type>*AnimationBase class. Deriving from the *\<Type>*Animation or *\<Type>*AnimationUsingKeyFrames classes is not recommended.  
+  
+### Derive from \<Type>AnimationBase  
+ Deriving from a *\<Type>*AnimationBase class is the simplest way to create a new animation type. Use this approach when you want to create a new animation for type that already has a corresponding *\<Type>*AnimationBase class.  
+  
+ **Implementation Instructions**  
+  
+ Derive from a *\<Type>*Animation class and implement the GetCurrentValueCore method. The GetCurrentValueCore method returns the current value of the animation. It takes three parameters: a suggested starting value, a suggested ending value, and an <xref:System.Windows.Media.Animation.AnimationClock>, which you use to determine the progress of the animation.  
+  
+ Because the *\<Type>*AnimationBase classes inherit from the <xref:System.Windows.Freezable> class, you must also override <xref:System.Windows.Freezable.CreateInstanceCore%2A> core to return a new instance of your class. If the class does not use dependency properties to store its data or it requires extra initialization after creation, you might need to override additional methods; see the [Freezable Objects Overview](../advanced/freezable-objects-overview.md) for more information.  
+  
+ For more information, see the GetCurrentValueCore method documentation for the *\<Type>*AnimationBase class for the type that you want to animate. For an example, see the [Custom Animation Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/CustomAnimation)  
+  
+ **Alternative Approaches**  
+  
+ If you simply want to change how animation values are interpolated, considering deriving from one of the *\<Type>*KeyFrame classes. The key frame you create can be used with the corresponding *\<Type>*AnimationUsingKeyFrames provided by [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)].  
+  
+### Derive from AnimationTimeline  
+ Derive from the <xref:System.Windows.Media.Animation.AnimationTimeline> class when you want to create an animation for a type that doesn't already have a matching [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animation, or you want to create an animation that is not strongly typed.  
+  
+ **Implementation Instructions**  
+  
+ Derive from the <xref:System.Windows.Media.Animation.AnimationTimeline> class and override the following members:  
+  
+- <xref:System.Windows.Freezable.CreateInstanceCore%2A> – If your new class is concrete, you must override <xref:System.Windows.Freezable.CreateInstanceCore%2A> to return a new instance of your class.  
+  
+- <xref:System.Windows.Media.Animation.AnimationTimeline.GetCurrentValue%2A> – Override this method to return the current value of your animation. It takes three parameters: a default origin value, a default destination value, and an <xref:System.Windows.Media.Animation.AnimationClock>. Use the <xref:System.Windows.Media.Animation.AnimationClock> to obtain the current time or progress for the animation. You can choose whether to use the default origin and destination values.  
+  
+- <xref:System.Windows.Media.Animation.AnimationTimeline.IsDestinationDefault%2A> – Override this property to indicate whether your animation uses the default destination value specified by the <xref:System.Windows.Media.Animation.AnimationTimeline.GetCurrentValue%2A> method.  
+  
+- <xref:System.Windows.Media.Animation.AnimationTimeline.TargetPropertyType%2A> – Override this property to indicate the <xref:System.Type> of output your animation produces.  
+  
+ If the class does not use dependency properties to store its data or it requires extra initialization after creation, you might need to override additional methods; see the [Freezable Objects Overview](../advanced/freezable-objects-overview.md) for more information.  
+  
+ The recommended paradigm (used by [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animations) is to use two inheritance levels:  
+  
+1. Create an abstract *\<Type>*AnimationBase class that derives from <xref:System.Windows.Media.Animation.AnimationTimeline>. This class should override the <xref:System.Windows.Media.Animation.AnimationTimeline.TargetPropertyType%2A> method. It should also introduce a new abstract method, GetCurrentValueCore, and override <xref:System.Windows.Media.Animation.AnimationTimeline.GetCurrentValue%2A> so that it validates the types of the default origin value and default destination value parameters, then calls GetCurrentValueCore.  
+  
+2. Create another class that inherits from your new *\<Type>*AnimationBase class and overrides the <xref:System.Windows.Freezable.CreateInstanceCore%2A> method, the GetCurrentValueCore method that you introduced, and the <xref:System.Windows.Media.Animation.AnimationTimeline.IsDestinationDefault%2A> property.  
+  
+ **Alternative Approaches**  
+  
+ If you want to animate a type that has no corresponding From/To/By animation or key-frame animation, consider using an <xref:System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames>. Because it is weakly typed, an <xref:System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames> can animate any type of value. The drawback to this approach is that <xref:System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames> only supports discrete interpolation.  
+  
+<a name="useperframecallback"></a>
+## Use Per-Frame Callback  
+ Use this approach when you need to completely bypass the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animation system. One scenario for this approach is physics animations, where at each animation step a new direction or position of animated objects needs to be recomputed based on the  last set of object interactions.  
+  
+ **Implementation Instructions**  
+  
+ Unlike the other approaches described in this overview, to use per-frame callback you don't need to create a custom animation or key frame class.  
+  
+ Instead, you register for the <xref:System.Windows.Media.CompositionTarget.Rendering> event of the object that contains the objects you want to animate. This event handler method gets called once per frame. Each time that [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] marshals the persisted rendering data in the visual tree across to the composition tree, your event handler method is called.  
+  
+ In your event handler, perform your whatever calculations necessary for your animation effect and set the properties of the objects you want to animate with these values.  
+  
+ To obtain the presentation time of the current frame, the <xref:System.EventArgs> associated with this event can be cast as <xref:System.Windows.Media.RenderingEventArgs>, which provide a <xref:System.Windows.Media.RenderingEventArgs.RenderingTime%2A> property that you can use to obtain the current frame's rendering time.  
+  
+ For more information, see the <xref:System.Windows.Media.CompositionTarget.Rendering> page.  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.AnimationTimeline>
+- <xref:System.Windows.Media.Animation.IKeyFrame>
+- [Property Animation Techniques Overview](property-animation-techniques-overview.md)
+- [Freezable Objects Overview](../advanced/freezable-objects-overview.md)
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Path Animations Overview](path-animations-overview.md)
+- [Animation Overview](animation-overview.md)
+- [Animation and Timing System Overview](animation-and-timing-system-overview.md)
+- [Custom Animation Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/CustomAnimation)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/drawing-objects-overview.md

@@ -0,0 +1,239 @@
+---
+title: "Drawing Objects Overview"
+description: Get acquainted with objects and how to use them to efficiently draw shapes, bitmaps, text, and media in Windows Presentation Foundation (WPF).
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "ImageDrawing objects [WPF]"
+  - "GlyphRunDrawing objects [WPF]"
+  - "GeometryDrawing objects [WPF]"
+  - "drawings [WPF], about drawings"
+  - "Drawing objects [WPF]"
+  - "DrawingGroup objects [WPF]"
+ms.assetid: 9b5ce5c0-e204-4320-a7a8-0b2210d62f88
+---
+# Drawing Objects Overview
+This topic introduces <xref:System.Windows.Media.Drawing> objects and describes how to use them to efficiently draw shapes, bitmaps, text, and media. Use <xref:System.Windows.Media.Drawing> objects when you create clip art, paint with a <xref:System.Windows.Media.DrawingBrush>, or use <xref:System.Windows.Media.Visual> objects.  
+
+<a name="whatisadrawingsection"></a>
+## What Is a Drawing Object?  
+ A <xref:System.Windows.Media.Drawing> object describes visible content, such as a shape, bitmap, video, or a line of text. Different types of drawings describe different types of content. The following is a list of the different types of drawing objects.  
+  
+- <xref:System.Windows.Media.GeometryDrawing> – Draws a shape.  
+  
+- <xref:System.Windows.Media.ImageDrawing> – Draws an image.  
+  
+- <xref:System.Windows.Media.GlyphRunDrawing> – Draws text.  
+  
+- <xref:System.Windows.Media.VideoDrawing> – Plays an audio or video file.  
+  
+- <xref:System.Windows.Media.DrawingGroup> – Draws other drawings. Use a drawing group to combine other drawings into a single composite drawing.  
+  
+ <xref:System.Windows.Media.Drawing> objects are versatile; there are many ways you can use a <xref:System.Windows.Media.Drawing> object.  
+  
+- You can display it as an image by using a <xref:System.Windows.Media.DrawingImage> and an <xref:System.Windows.Controls.Image> control.  
+  
+- You can use it with a <xref:System.Windows.Media.DrawingBrush> to paint an object, such as the <xref:System.Windows.Controls.Page.Background%2A> of a <xref:System.Windows.Controls.Page>.  
+  
+- You can use it to describe the appearance of a <xref:System.Windows.Media.DrawingVisual>.  
+  
+- You can use it to enumerate the contents of a <xref:System.Windows.Media.Visual>.  
+  
+ WPF provides other types of objects that are capable of drawing shapes, bitmaps, text, and media. For example, you can also use <xref:System.Windows.Shapes.Shape> objects to draw shapes, and the <xref:System.Windows.Controls.MediaElement> control provides another way to add video to your application. So when should you use <xref:System.Windows.Media.Drawing> objects? When you can sacrifice framework level features to gain performance benefits or when you need <xref:System.Windows.Freezable> features. Because <xref:System.Windows.Media.Drawing> objects lack support for [Layout](../advanced/layout.md), input, and focus, they provide performance benefits that make them ideal for describing backgrounds, clip art, and for low-level drawing with <xref:System.Windows.Media.Visual> objects.  
+  
+ Because they are a type <xref:System.Windows.Freezable> object, <xref:System.Windows.Media.Drawing> objects gain several special features, which include the following: they can be declared as [resources](/dotnet/desktop-wpf/fundamentals/xaml-resources-define), shared among multiple objects, made read-only to improve performance, cloned, and made thread-safe. For more information about the different features provided by <xref:System.Windows.Freezable> objects, see the [Freezable Objects Overview](../advanced/freezable-objects-overview.md).  
+  
+<a name="drawinggeometriessection"></a>
+## Draw a Shape  
+ To draw a shape, you use a <xref:System.Windows.Media.GeometryDrawing>. A geometry drawing's <xref:System.Windows.Media.GeometryDrawing.Geometry%2A> property describes the shape to draw, its <xref:System.Windows.Media.GeometryDrawing.Brush%2A> property describes how the interior of the shape should be painted, and its <xref:System.Windows.Media.GeometryDrawing.Pen%2A> property describes how its outline should be drawn.  
+  
+ The following example uses a <xref:System.Windows.Media.GeometryDrawing> to draw a shape. The shape is described by a <xref:System.Windows.Media.GeometryGroup> and two <xref:System.Windows.Media.EllipseGeometry> objects. The shape's interior is painted with a <xref:System.Windows.Media.LinearGradientBrush> and its outline is drawn with a <xref:System.Windows.Media.Brushes.Black%2A> <xref:System.Windows.Media.Pen>.  
+  
+ This example creates the following <xref:System.Windows.Media.GeometryDrawing>.  
+  
+ ![A GeometryDrawing of two ellipses](./media/graphicsmm-geodraw.jpg "graphicsmm_geodraw")  
+A GeometryDrawing  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#GeometryDrawingExampleInline](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/GeometryDrawingExample.cs#geometrydrawingexampleinline)]
+ [!code-xaml[DrawingMiscSnippets_snip#GeometryDrawingExampleInline](~/samples/snippets/xaml/VS_Snippets_Wpf/DrawingMiscSnippets_snip/XAML/GeometryDrawingExample.xaml#geometrydrawingexampleinline)]  
+  
+ For the complete example, see [Create a GeometryDrawing](how-to-create-a-geometrydrawing.md).  
+  
+ Other <xref:System.Windows.Media.Geometry> classes, such as <xref:System.Windows.Media.PathGeometry> enable you to create more complex shapes by creating curves and arcs. For more information about <xref:System.Windows.Media.Geometry> objects, see the [Geometry Overview](geometry-overview.md).  
+  
+ For more information about other ways to draw shapes that don't use <xref:System.Windows.Media.Drawing> objects, see [Shapes and Basic Drawing in WPF Overview](shapes-and-basic-drawing-in-wpf-overview.md).  
+  
+<a name="drawingimagessection"></a>
+## Draw an Image  
+ To draw an image, you use an <xref:System.Windows.Media.ImageDrawing>. An <xref:System.Windows.Media.ImageDrawing> object's  <xref:System.Windows.Media.ImageDrawing.ImageSource%2A> property describes the image to draw, and its <xref:System.Windows.Media.ImageDrawing.Rect%2A> property defines the region where the image is drawn.  
+  
+ The following example draws an image into a rectangle located at (75,75) that is 100 by 100 pixel. The following illustration shows the <xref:System.Windows.Media.ImageDrawing> created by the example. A gray border was added to show the bounds of the <xref:System.Windows.Media.ImageDrawing>.  
+  
+ ![A 100 by 100 ImageDrawing drawn at &#40;75,75&#41;](./media/graphicsmm-simple-imagedrawing-offset.png "graphicsmm_simple_imagedrawing_offset")  
+A 100 by 100 ImageDrawing  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#ImageDrawing100by100Inline](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/ImageDrawingExample.cs#imagedrawing100by100inline)]
+ [!code-xaml[DrawingMiscSnippets_snip#ImageDrawing100by100Inline](~/samples/snippets/xaml/VS_Snippets_Wpf/DrawingMiscSnippets_snip/XAML/ImageDrawingExample.xaml#imagedrawing100by100inline)]  
+  
+ For more information about images, see the [Imaging Overview](imaging-overview.md).  
+  
+<a name="playmedia"></a>
+## Play Media (Code Only)  
+  
+> [!NOTE]
+> Although you can declare a <xref:System.Windows.Media.VideoDrawing> in [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)], you can only load and play its media using code. To play video in [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)], use a <xref:System.Windows.Controls.MediaElement> instead.  
+  
+ To play an audio or video file, you use a <xref:System.Windows.Media.VideoDrawing> and a <xref:System.Windows.Media.MediaPlayer>. There are two ways to load and play media. The first is to use a <xref:System.Windows.Media.MediaPlayer> and a <xref:System.Windows.Media.VideoDrawing> by themselves, and the second way is to create your own <xref:System.Windows.Media.MediaTimeline> to use with the <xref:System.Windows.Media.MediaPlayer> and <xref:System.Windows.Media.VideoDrawing>.  
+  
+> [!NOTE]
+> When distributing media with your application, you cannot use a media file as a project resource, like you would an image. In your project file, you must instead set the media type to `Content` and set `CopyToOutputDirectory` to `PreserveNewest` or `Always`.  
+  
+ To play media without creating your own <xref:System.Windows.Media.MediaTimeline>, you perform the following steps.  
+  
+1. Create a <xref:System.Windows.Media.MediaPlayer> object.  
+  
+     [!code-csharp[DrawingMiscSnippets_snip#VideoDrawingExampleInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/VideoDrawingExample.cs#videodrawingexampleinline1)]  
+  
+2. Use the <xref:System.Windows.Media.MediaPlayer.Open%2A> method to load the media file.  
+  
+     [!code-csharp[DrawingMiscSnippets_snip#VideoDrawingExampleInline2](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/VideoDrawingExample.cs#videodrawingexampleinline2)]  
+  
+3. Create a <xref:System.Windows.Media.VideoDrawing>.  
+  
+     [!code-csharp[DrawingMiscSnippets_snip#VideoDrawingExampleInline3](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/VideoDrawingExample.cs#videodrawingexampleinline3)]  
+  
+4. Specify the size and location to draw the media by setting the <xref:System.Windows.Media.VideoDrawing.Rect%2A> property of the <xref:System.Windows.Media.VideoDrawing>.  
+  
+     [!code-csharp[DrawingMiscSnippets_snip#VideoDrawingExampleInline4](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/VideoDrawingExample.cs#videodrawingexampleinline4)]  
+  
+5. Set the <xref:System.Windows.Media.VideoDrawing.Player%2A> property of the <xref:System.Windows.Media.VideoDrawing> with the <xref:System.Windows.Media.MediaPlayer> you created.  
+  
+     [!code-csharp[DrawingMiscSnippets_snip#VideoDrawingExampleInline5](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/VideoDrawingExample.cs#videodrawingexampleinline5)]  
+  
+6. Use the <xref:System.Windows.Media.MediaPlayer.Play%2A> method of the <xref:System.Windows.Media.MediaPlayer> to start playing the media.  
+  
+     [!code-csharp[DrawingMiscSnippets_snip#VideoDrawingExampleInline6](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/VideoDrawingExample.cs#videodrawingexampleinline6)]  
+  
+ The following example uses a <xref:System.Windows.Media.VideoDrawing> and a <xref:System.Windows.Media.MediaPlayer> to play a video file once.  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#VideoDrawingExampleInline](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/VideoDrawingExample.cs#videodrawingexampleinline)]  
+  
+ To gain additional timing control over the media, use a <xref:System.Windows.Media.MediaTimeline> with the <xref:System.Windows.Media.MediaPlayer> and <xref:System.Windows.Media.VideoDrawing> objects. The <xref:System.Windows.Media.MediaTimeline> enables you to specify whether the video should repeat. To use a <xref:System.Windows.Media.MediaTimeline> with a <xref:System.Windows.Media.VideoDrawing>, you perform the following steps:  
+  
+1. Declare the <xref:System.Windows.Media.MediaTimeline> and set its timing behaviors.  
+  
+     [!code-csharp[DrawingMiscSnippets_snip#RepeatingVideoDrawingExampleInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/VideoDrawingExample.cs#repeatingvideodrawingexampleinline1)]  
+  
+2. Create a <xref:System.Windows.Media.MediaClock> from the <xref:System.Windows.Media.MediaTimeline>.  
+  
+     [!code-csharp[DrawingMiscSnippets_snip#RepeatingVideoDrawingExampleInline2](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/VideoDrawingExample.cs#repeatingvideodrawingexampleinline2)]  
+  
+3. Create a <xref:System.Windows.Media.MediaPlayer> and use the <xref:System.Windows.Media.MediaClock> to set its <xref:System.Windows.Media.MediaPlayer.Clock%2A> property.  
+  
+     [!code-csharp[DrawingMiscSnippets_snip#RepeatingVideoDrawingExampleInline3](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/VideoDrawingExample.cs#repeatingvideodrawingexampleinline3)]  
+  
+4. Create a <xref:System.Windows.Media.VideoDrawing> and assign the <xref:System.Windows.Media.MediaPlayer> to the <xref:System.Windows.Media.VideoDrawing.Player%2A> property of the <xref:System.Windows.Media.VideoDrawing>.  
+  
+     [!code-csharp[DrawingMiscSnippets_snip#RepeatingVideoDrawingExampleInline4](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/VideoDrawingExample.cs#repeatingvideodrawingexampleinline4)]  
+  
+ The following example uses a <xref:System.Windows.Media.MediaTimeline> with a <xref:System.Windows.Media.MediaPlayer> and a <xref:System.Windows.Media.VideoDrawing> to play a video repeatedly.  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#RepeatingVideoDrawingExampleInline](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/VideoDrawingExample.cs#repeatingvideodrawingexampleinline)]  
+  
+ Note that, when you use a <xref:System.Windows.Media.MediaTimeline>, you use the interactive <xref:System.Windows.Media.Animation.ClockController> returned from the <xref:System.Windows.Media.Animation.Clock.Controller%2A> property of the <xref:System.Windows.Media.MediaClock> to control media playback instead of the interactive methods of <xref:System.Windows.Media.MediaPlayer>.  
+  
+<a name="drawtext"></a>
+## Draw Text  
+ To draw text, you use a <xref:System.Windows.Media.GlyphRunDrawing> and a <xref:System.Windows.Media.GlyphRun>. The following example uses a <xref:System.Windows.Media.GlyphRunDrawing> to draw the text "Hello World".  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#GlyphRunDrawingExampleInline](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/GlyphRunDrawingExample.cs#glyphrundrawingexampleinline)]
+ [!code-xaml[DrawingMiscSnippets_snip#GlyphRunDrawingExampleInline](~/samples/snippets/xaml/VS_Snippets_Wpf/DrawingMiscSnippets_snip/XAML/GlyphRunExample.xaml#glyphrundrawingexampleinline)]  
+  
+ A <xref:System.Windows.Media.GlyphRun> is a low-level object intended for use with fixed-format document presentation and print scenarios. A simpler way to draw text to the screen is to use a <xref:System.Windows.Controls.Label> or a <xref:System.Windows.Controls.TextBlock>. For more information about <xref:System.Windows.Media.GlyphRun>, see the [Introduction to the GlyphRun Object and Glyphs Element](../advanced/introduction-to-the-glyphrun-object-and-glyphs-element.md) overview.  
+  
+<a name="compositedrawingssection"></a>
+## Composite Drawings  
+ A <xref:System.Windows.Media.DrawingGroup> enables you to combine multiple drawings into a single composite drawing. By using a <xref:System.Windows.Media.DrawingGroup>, you can combine shapes, images, and text into a single <xref:System.Windows.Media.Drawing> object.  
+  
+ The following example uses a <xref:System.Windows.Media.DrawingGroup> to combine two <xref:System.Windows.Media.GeometryDrawing> objects and an <xref:System.Windows.Media.ImageDrawing> object. This example produces the following output.  
+  
+ ![A DrawingGroup with multiple drawings](./media/graphicsmm-simple.jpg "graphicsmm_simple")  
+A composite drawing  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#GraphicsMMSimpleDrawingGroupExample](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/DrawingGroupExample.cs#graphicsmmsimpledrawinggroupexample)]
+ [!code-xaml[DrawingMiscSnippets_snip#GraphicsMMSimpleDrawingGroupExample](~/samples/snippets/xaml/VS_Snippets_Wpf/DrawingMiscSnippets_snip/XAML/DrawingGroupExample.xaml#graphicsmmsimpledrawinggroupexample)]  
+  
+ A <xref:System.Windows.Media.DrawingGroup> also enables you to apply opacity masks, transforms, bitmap effects, and other operations to its contents. <xref:System.Windows.Media.DrawingGroup> operations are applied in the following order: <xref:System.Windows.Media.DrawingGroup.OpacityMask%2A>, <xref:System.Windows.Media.DrawingGroup.Opacity%2A>, <xref:System.Windows.Media.DrawingGroup.BitmapEffect%2A>, <xref:System.Windows.Media.DrawingGroup.ClipGeometry%2A>, <xref:System.Windows.Media.DrawingGroup.GuidelineSet%2A>, and then <xref:System.Windows.Media.DrawingGroup.Transform%2A>.  
+  
+ The following illustration shows the order in which <xref:System.Windows.Media.DrawingGroup> operations are applied.  
+  
+ ![DrawingGroup order of operations](./media/graphcismm-drawinggroup-order.png "graphcismm_drawinggroup_order")  
+Order of DrawingGroup operations  
+  
+ The following table describes the properties you can use to manipulate a <xref:System.Windows.Media.DrawingGroup> object's contents.  
+  
+|Property|Description|Illustration|  
+|--------------|-----------------|------------------|  
+|<xref:System.Windows.Media.DrawingGroup.OpacityMask%2A>|Alters the opacity of selected portions of the <xref:System.Windows.Media.DrawingGroup> contents. For an example, see [How to: Control the Opacity of a Drawing](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/ms748242(v=vs.90)).|![A DrawingGroup with an opacity mask](./media/graphicsmm-opmask.png "graphicsmm_opmask")|  
+|<xref:System.Windows.Media.DrawingGroup.Opacity%2A>|Uniformly changes the opacity of the <xref:System.Windows.Media.DrawingGroup> contents. Use this property to make a <xref:System.Windows.Media.Drawing> transparent or partially transparent. For an example, see [How to: Apply an Opacity Mask to a Drawing](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/ms753195(v=vs.90)).|![DrawingGroups with different opacity settings](./media/graphicsmm-opacity.png "graphicsmm_opacity")|  
+|<xref:System.Windows.Media.DrawingGroup.BitmapEffect%2A>|Applies a <xref:System.Windows.Media.Effects.BitmapEffect> to the <xref:System.Windows.Media.DrawingGroup> contents. For an example, see [How to: Apply a BitmapEffect to a Drawing](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/ms752341(v=vs.90)).|![DrawingGroup with a BlurBitmapEffect](./media/graphicsmm-bitmap.png "graphicsmm_bitmap")|  
+|<xref:System.Windows.Media.DrawingGroup.ClipGeometry%2A>|Clips the <xref:System.Windows.Media.DrawingGroup> contents to a region you describe using a <xref:System.Windows.Media.Geometry>. For an example, see [How to: Clip a Drawing](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/ms743068(v=vs.90)) .|![DrawingGroup with a defined clip region](./media/graphicsmm-clipgeom.png "graphicsmm_clipgeom")|  
+|<xref:System.Windows.Media.DrawingGroup.GuidelineSet%2A>|Snaps device independent pixels to device pixels along the specified guidelines. This property is useful for ensuring that finely detailed graphics render sharply on low-DPI displays. For an example, see [Apply a GuidelineSet to a Drawing](how-to-apply-a-guidelineset-to-a-drawing.md).|![A DrawingGroup with and without a GuidelineSet](./media/graphicsmm-drawinggroup-guidelineset.png "graphicsmm_drawinggroup_guidelineset")|  
+|<xref:System.Windows.Media.DrawingGroup.Transform%2A>|Transforms the <xref:System.Windows.Media.DrawingGroup> contents. For an example, see [How to: Apply a Transform to a Drawing](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/ms742304(v=vs.90)).|![A rotated DrawingGroup](./media/graphicsmm-rotate.png "graphicsmm_rotate")|  
+  
+<a name="usingimagedrawing"></a>
+## Display a Drawing as an Image  
+ To display a <xref:System.Windows.Media.Drawing> with an <xref:System.Windows.Controls.Image> control, use a <xref:System.Windows.Media.DrawingImage> as the <xref:System.Windows.Controls.Image> control's <xref:System.Windows.Controls.Image.Source%2A> and set the <xref:System.Windows.Media.DrawingImage> object's <xref:System.Windows.Media.DrawingImage.Drawing%2A?displayProperty=nameWithType> property to the drawing you want to display.  
+  
+ The following example uses a <xref:System.Windows.Media.DrawingImage> and an <xref:System.Windows.Controls.Image> control to display a <xref:System.Windows.Media.GeometryDrawing>. This example produces the following output.  
+  
+ ![A GeometryDrawing of two ellipses](./media/graphicsmm-geodraw.jpg "graphicsmm_geodraw")  
+A DrawingImage  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#DrawingImageExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/DrawingImageExample.cs#drawingimageexamplewholepage)]
+ [!code-xaml[DrawingMiscSnippets_snip#DrawingImageExampleWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/DrawingMiscSnippets_snip/XAML/DrawingImageExample.xaml#drawingimageexamplewholepage)]  
+  
+<a name="renderingwithdrawingbrushsection"></a>
+## Paint an Object with a Drawing  
+ A <xref:System.Windows.Media.DrawingBrush> is a type of brush that paints an area with a drawing object. You can use it to paint just about any graphical object with a drawing. The <xref:System.Windows.Media.Drawing> property of a <xref:System.Windows.Media.DrawingBrush> describes its <xref:System.Windows.Media.DrawingBrush.Drawing%2A>. To render a <xref:System.Windows.Media.Drawing> with a <xref:System.Windows.Media.DrawingBrush>, add it to the brush using the brush's <xref:System.Windows.Media.Drawing> property and use the brush to paint a graphical object, such as a control or panel.  
+  
+ The following examples uses a <xref:System.Windows.Media.DrawingBrush> to paint the <xref:System.Windows.Shapes.Shape.Fill%2A> of a <xref:System.Windows.Shapes.Rectangle> with a pattern created from a <xref:System.Windows.Media.GeometryDrawing>. This example produces the following output.  
+  
+ ![A tiled DrawingBrush](./media/graphicsmm-drawingbrush-geometrydrawing.png "graphicsmm_drawingbrush_geometrydrawing")  
+A GeometryDrawing used with a DrawingBrush  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#DrawingBrushExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/DrawingBrushExample.cs#drawingbrushexamplewholepage)]
+ [!code-xaml[DrawingMiscSnippets_snip#DrawingBrushExampleWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/DrawingMiscSnippets_snip/XAML/DrawingBrushExample.xaml#drawingbrushexamplewholepage)]  
+  
+ The <xref:System.Windows.Media.DrawingBrush> class provides a variety of options for stretching and tiling its content. For more information about <xref:System.Windows.Media.DrawingBrush>, see the [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md) overview.  
+  
+<a name="renderingwithvisualsection"></a>
+## Render a Drawing with a Visual  
+ A <xref:System.Windows.Media.DrawingVisual> is a type of visual object designed to render a drawing. Working directly at the visual layer is an option for developers who want to build a highly customized graphical environment, and is not described in this overview. For more information, see the [Using DrawingVisual Objects](using-drawingvisual-objects.md) overview.  
+  
+<a name="drawingcontextobjects"></a>
+## DrawingContext Objects  
+ The <xref:System.Windows.Media.DrawingContext> class enables you to populate a <xref:System.Windows.Media.Visual> or a <xref:System.Windows.Media.Drawing> with visual content. Many such lower-level graphics objects use a <xref:System.Windows.Media.DrawingContext> because it describes graphical content very efficiently.  
+  
+ Although the <xref:System.Windows.Media.DrawingContext> draw methods appear similar to the draw methods of the <xref:System.Drawing.Graphics?displayProperty=nameWithType> type, they are actually very different. <xref:System.Windows.Media.DrawingContext> is used with a retained mode graphics system, while the <xref:System.Drawing.Graphics?displayProperty=nameWithType> type is used with an immediate mode graphics system. When you use a <xref:System.Windows.Media.DrawingContext> object's draw commands, you are actually storing a set of rendering instructions (although the exact storage mechanism depends on the type of object that supplies the <xref:System.Windows.Media.DrawingContext>) that will later be used by the graphics system; you are not drawing to the screen in real-time. For more information about how the Windows Presentation Foundation (WPF) graphics system works, see the [WPF Graphics Rendering Overview](wpf-graphics-rendering-overview.md).  
+  
+ You never directly instantiate a <xref:System.Windows.Media.DrawingContext>; you can, however, acquire a drawing context from certain methods, such as <xref:System.Windows.Media.DrawingGroup.Open%2A?displayProperty=nameWithType> and <xref:System.Windows.Media.DrawingVisual.RenderOpen%2A?displayProperty=nameWithType>.  
+  
+<a name="enumeratevisualcontents"></a>
+## Enumerate the Contents of a Visual  
+ In addition to their other uses, <xref:System.Windows.Media.Drawing> objects also provide an object model for enumerating the contents of a <xref:System.Windows.Media.Visual>.  
+  
+ The following example uses the <xref:System.Windows.Media.VisualTreeHelper.GetDrawing%2A> method to retrieve the <xref:System.Windows.Media.DrawingGroup> value of a <xref:System.Windows.Media.Visual> and enumerate it.  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#GraphicsMMRetrieveDrawings](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/EnumerateDrawingsExample.xaml.cs#graphicsmmretrievedrawings)]  
+  
+## See also
+
+- <xref:System.Windows.Media.Drawing>
+- <xref:System.Windows.Media.DrawingGroup>
+- [2D Graphics and Imaging](../advanced/optimizing-performance-2d-graphics-and-imaging.md)
+- [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md)
+- [Geometry Overview](geometry-overview.md)
+- [Shapes and Basic Drawing in WPF Overview](shapes-and-basic-drawing-in-wpf-overview.md)
+- [WPF Graphics Rendering Overview](wpf-graphics-rendering-overview.md)
+- [Freezable Objects Overview](../advanced/freezable-objects-overview.md)
+- [How-to Topics](drawings-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/drawings-how-to-topics.md

@@ -0,0 +1,31 @@
+---
+title: "Drawings How-to Topics"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "ImageDrawing objects [WPF]"
+  - "GlyphRunDrawing objects [WPF]"
+  - "GeometryDrawing objects [WPF]"
+  - "drawings [WPF], how-to topics"
+  - "Drawing objects [WPF]"
+  - "DrawingGroup objects [WPF]"
+ms.assetid: 5f445633-529c-4091-8a2c-13035ac8c41b
+---
+# Drawings How-to Topics
+The topics in this section describe how to use <xref:System.Windows.Media.Drawing> objects to draw shapes, images, or text.  
+  
+## In This Section  
+ [Apply a GuidelineSet to a Drawing](how-to-apply-a-guidelineset-to-a-drawing.md)  
+  [Create a Composite Drawing](how-to-create-a-composite-drawing.md)  
+  [Create a GeometryDrawing](how-to-create-a-geometrydrawing.md)  
+  [Draw an Image Using ImageDrawing](how-to-draw-an-image-using-imagedrawing.md)  
+  [Play Media using a VideoDrawing](how-to-play-media-using-a-videodrawing.md)  
+  [Use a Drawing as an Image Source](how-to-use-a-drawing-as-an-image-source.md)  
+  
+## See also
+
+- <xref:System.Windows.Media.Drawing>
+- [WPF Graphics Rendering Overview](wpf-graphics-rendering-overview.md)
+- [Shapes and Basic Drawing in WPF Overview](shapes-and-basic-drawing-in-wpf-overview.md)
+- [Graphics and Multimedia](index.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/drawings.md

@@ -0,0 +1,30 @@
+---
+title: "Drawings"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "graphics [WPF], drawings"
+  - "ImageDrawing objects [WPF]"
+  - "draw [WPF]"
+  - "drawings [WPF]"
+  - "GlyphRunDrawing objects [WPF]"
+  - "GeometryDrawing objects [WPF]"
+  - "Drawing objects [WPF]"
+  - "DrawingGroup objects [WPF]"
+ms.assetid: 6ab1fe6b-3eed-4432-a248-b487e7234e5b
+---
+# Drawings
+<xref:System.Windows.Media.Drawing> objects are used to efficiently draw shapes, images, or text. Drawings are used when painting with a <xref:System.Windows.Media.DrawingBrush> or programming with <xref:System.Windows.Media.Visual> objects.  
+  
+## In This Section  
+ [Drawing Objects Overview](drawing-objects-overview.md)  
+  [How-to Topics](drawings-how-to-topics.md)  
+  
+## See also
+
+- <xref:System.Windows.Media.Drawing>
+- [2D Graphics and Imaging](../advanced/optimizing-performance-2d-graphics-and-imaging.md)
+- [WPF Graphics Rendering Overview](wpf-graphics-rendering-overview.md)
+- [Shapes and Basic Drawing in WPF Overview](shapes-and-basic-drawing-in-wpf-overview.md)
+- [Graphics and Multimedia](index.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/easing-functions.md

@@ -0,0 +1,115 @@
+---
+title: "Easing Functions"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "applying mathematical formulas to animations [WPF]"
+  - "applying easing functions to animations [WPF]"
+  - "mathematical formulas [WPF], applying to animations"
+  - "animations [WPF], realistic movement"
+  - "easing functions [WPF]"
+  - "customizing easing functions [WPF]"
+  - "easing functions [WPF], definition"
+  - "easing functions [WPF], customizing"
+  - "animations [WPF], applying"
+ms.assetid: 075b9c2b-82c4-43fa-b3cd-de0b6236eb38
+---
+# Easing Functions
+Easing functions allow you to apply custom mathematical formulas to your animations. For example, you may want an object to realistically bounce or behave as though it were on a spring. You could use Key-Frame or even From/To/By animations to approximate these effects but it would take a significant amount of work and the animation would be less accurate than using a mathematical formula.  
+  
+ Besides creating your own custom easing function by inheriting from <xref:System.Windows.Media.Animation.EasingFunctionBase>, you can use one of several easing functions provided by the runtime to create common effects.  
+  
+- <xref:System.Windows.Media.Animation.BackEase>: Retracts the motion of an animation slightly before it begins to animate in the path indicated.  
+  
+- <xref:System.Windows.Media.Animation.BounceEase>: Creates a bouncing effect.  
+  
+- <xref:System.Windows.Media.Animation.CircleEase>: Creates an animation that accelerates and/or decelerates using a circular function.  
+  
+- <xref:System.Windows.Media.Animation.CubicEase>: Creates an animation that accelerates and/or decelerates using the formula *f*(*t*) = *t*<sup>3</sup>.  
+  
+- <xref:System.Windows.Media.Animation.ElasticEase>: Creates an animation that resembles a spring oscillating back and forth until it comes to rest.  
+  
+- <xref:System.Windows.Media.Animation.ExponentialEase>: Creates an animation that accelerates and/or decelerates using an exponential formula.  
+  
+- <xref:System.Windows.Media.Animation.PowerEase>: Creates an animation that accelerates and/or decelerates using the formula *f*(*t*) = *t*<sup>p</sup> where p is equal to the <xref:System.Windows.Media.Animation.PowerEase.Power%2A> property.  
+  
+- <xref:System.Windows.Media.Animation.QuadraticEase>: Creates an animation that accelerates and/or decelerates using the formula *f*(*t*) = *t*<sup>2</sup>.  
+  
+- <xref:System.Windows.Media.Animation.QuarticEase>: Creates an animation that accelerates and/or decelerates using the formula *f*(*t*) = *t*<sup>4</sup>.  
+  
+- <xref:System.Windows.Media.Animation.QuinticEase>: Create an animation that accelerates and/or decelerates using the formula *f*(*t*) = *t*<sup>5</sup>.  
+  
+- <xref:System.Windows.Media.Animation.SineEase>: Creates an animation that accelerates and/or decelerates using a sine formula.  
+  
+ To apply an easing function to an animation, use the `EasingFunction` property of the animation specify the easing function to apply to the animation. The following example applies a <xref:System.Windows.Media.Animation.BounceEase> easing function to a <xref:System.Windows.Media.Animation.DoubleAnimation> to create a bouncing effect.  
+  
+ [!code-xaml[BounceEase_snippet#BounceEase](~/samples/snippets/csharp/VS_Snippets_Wpf/bounceease_snippet/CS/window1.xaml#bounceease)]  
+  
+ In the previous example, the easing function was applied to a From/To/By animation. You can also apply these easing functions to Key-Frame animations. The following example shows how to use key frames with easing functions associated with them to create an animation of a rectangle that contracts upward, slows down, then expands downward (as though falling) and then bounces to a stop.  
+  
+ [!code-xaml[EasingFunctionDoubleKeyFrame_snippet#EasingFunctionDoubleKeyFrame](~/samples/snippets/csharp/VS_Snippets_Wpf/easingfunctiondoublekeyframe_snippet/CS/window1.xaml#easingfunctiondoublekeyframe)]  
+  
+ You can use the <xref:System.Windows.Media.Animation.EasingFunctionBase.EasingMode%2A> property to alter how the easing function behaves, that is, change how the animation interpolates. There are three possible values you can give for <xref:System.Windows.Media.Animation.EasingFunctionBase.EasingMode%2A>:  
+  
+- <xref:System.Windows.Media.Animation.EasingMode.EaseIn>: Interpolation follows the mathematical formula associated with the easing function.  
+  
+- <xref:System.Windows.Media.Animation.EasingMode.EaseOut>: Interpolation follows 100% interpolation minus the output of the formula associated with the easing function.  
+  
+- <xref:System.Windows.Media.Animation.EasingMode.EaseInOut>: Interpolation uses <xref:System.Windows.Media.Animation.EasingMode.EaseIn> for the first half of the animation and <xref:System.Windows.Media.Animation.EasingMode.EaseOut> for the second half.  
+  
+ The graphs below demonstrate the different values of <xref:System.Windows.Media.Animation.EasingFunctionBase.EasingMode%2A> where *f*(*x*) represents the animation progress and *t* represents time.  
+  
+ <xref:System.Windows.Media.Animation.BackEase>  
+  
+ ![BackEase EasingMode graphs.](./media/backease-graph.png "BackEase_Graph")  
+  
+ <xref:System.Windows.Media.Animation.BounceEase>  
+  
+ ![BounceEase EasingMode graphs.](./media/bounceease-graph.png "BounceEase_Graph")  
+  
+ <xref:System.Windows.Media.Animation.CircleEase>  
+  
+ ![CircleEase EasingMode graphs.](./media/circleease-graph.png "CircleEase_Graph")  
+  
+ <xref:System.Windows.Media.Animation.CubicEase>  
+  
+ ![CubicEase EasingMode graphs.](./media/cubicease-graph.png "CubicEase_Graph")  
+  
+ <xref:System.Windows.Media.Animation.ElasticEase>  
+  
+ ![ElasticEase with graphs of different easingmodes.](./media/elasticease-graph.png "ElasticEase_Graph")  
+  
+ <xref:System.Windows.Media.Animation.ExponentialEase>  
+  
+ ![ExponentialEase graphs of different easingmodes.](./media/exponentialease-graph.png "ExponentialEase_Graph")  
+  
+ <xref:System.Windows.Media.Animation.PowerEase>  
+  
+ ![QuarticEase with graphs of different easingmodes.](./media/quarticease-graph.png "QuarticEase_Graph")  
+  
+ <xref:System.Windows.Media.Animation.QuadraticEase>  
+  
+ ![QuadraticEase with graphs of different easingmodes](./media/quadraticease-graph.png "QuadraticEase_Graph")  
+  
+ <xref:System.Windows.Media.Animation.QuarticEase>  
+  
+ ![QuarticEase with graphs of different easingmodes.](./media/quarticease-graph.png "QuarticEase_Graph")  
+  
+ <xref:System.Windows.Media.Animation.QuinticEase>  
+  
+ ![QuinticEase with graphs of different easingmodes.](./media/quinticease-graph.png "QuinticEase_Graph")  
+  
+ <xref:System.Windows.Media.Animation.SineEase>  
+  
+ ![SineEase for different EasingMode values](./media/sineease-graph.png "SineEase_Graph")  
+  
+> [!NOTE]
+> You can use <xref:System.Windows.Media.Animation.PowerEase> to create the same behavior as <xref:System.Windows.Media.Animation.CubicEase>, <xref:System.Windows.Media.Animation.QuadraticEase>, <xref:System.Windows.Media.Animation.QuarticEase>, and <xref:System.Windows.Media.Animation.QuinticEase> by using the <xref:System.Windows.Media.Animation.PowerEase.Power%2A> property. For example, if you want to use <xref:System.Windows.Media.Animation.PowerEase> to substitute for <xref:System.Windows.Media.Animation.CubicEase>, specify a <xref:System.Windows.Media.Animation.PowerEase.Power%2A> value of 3.  
+  
+ In addition to using the easing functions included in the run-time, you can create your own custom easing functions by inheriting from <xref:System.Windows.Media.Animation.EasingFunctionBase>. The following example demonstrates how to create a simple custom easing function. You can add your own mathematical logic for how the easing function behaves by overriding the <xref:System.Windows.Media.Animation.EasingFunctionBase.EaseInCore%2A> method.
+  
+ [!code-csharp[CustomEasingFunction#CustomEasingFunction](~/samples/snippets/csharp/VS_Snippets_Wpf/customeasingfunction/csharp/customlog10easingfunction.cs#customeasingfunction)]
+ [!code-vb[CustomEasingFunction#CustomEasingFunction](~/samples/snippets/visualbasic/VS_Snippets_Wpf/customeasingfunction/visualbasic/customlog10easingfunction.vb#customeasingfunction)]
+ [!code-xaml[CustomEasingFunction#CustomEasingFunction](~/samples/snippets/csharp/VS_Snippets_Wpf/customeasingfunction/csharp/window1.xaml#customeasingfunction)]

dotnet-desktop-guide/framework/wpf/graphics-multimedia/extend-glass-frame-into-a-wpf-application.md

@@ -0,0 +1,152 @@
+---
+title: "Extend Glass Frame Into a WPF app"
+titleSuffix: ""
+ms.date: "03/30/2017"
+dev_langs:
+  - "csharp"
+  - "vb"
+helpviewer_keywords:
+  - "applications [WPF], extending glass frames into"
+  - "graphics [WPF], extending glass frames into applications"
+  - "extending glass frames into applications [WPF]"
+  - "glass frames [WPF], extending into applications"
+ms.assetid: 74388a3a-4b69-4a9d-ba1f-e107636bd660
+---
+
+# Extend Glass Frame Into a WPF Application
+
+This topic demonstrates how to extend the Windows Vista glass frame into the client area of a Windows Presentation Foundation (WPF) application.
+
+> [!NOTE]
+> This example will only work on a Windows Vista machine running the Desktop Window Manager (DWM) with glass enabled. Windows Vista Home Basic edition does not support the transparent glass effect. Areas that would typically render with the transparent glass effect on other editions of Windows Vista are rendered opaque.
+
+## Example
+
+The following image illustrates the glass frame extended into the address bar of Internet Explorer 7:
+
+![Screenshot showing glass frame extended behind IE7 address bar.](./media/extend-glass-frame-into-a-wpf-application/internet-explorer-glass-frame-extended-address-bar.png)
+
+To extend the glass frame on a WPF application, access to unmanaged API is needed. The following code example does a Platform Invoke (pinvoke) for the two API needed to extend the frame into the client area. Each of these API are declared in a class called **NonClientRegionAPI**.
+
+```csharp
+[StructLayout(LayoutKind.Sequential)]
+public struct MARGINS
+{
+    public int cxLeftWidth;      // width of left border that retains its size
+    public int cxRightWidth;     // width of right border that retains its size
+    public int cyTopHeight;      // height of top border that retains its size
+    public int cyBottomHeight;   // height of bottom border that retains its size
+};
+
+[DllImport("DwmApi.dll")]
+public static extern int DwmExtendFrameIntoClientArea(
+    IntPtr hwnd,
+    ref MARGINS pMarInset);
+```
+
+```vb
+<StructLayout(LayoutKind.Sequential)>
+Public Structure MARGINS
+    Public cxLeftWidth As Integer ' width of left border that retains its size
+    Public cxRightWidth As Integer ' width of right border that retains its size
+    Public cyTopHeight As Integer ' height of top border that retains its size
+    Public cyBottomHeight As Integer ' height of bottom border that retains its size
+End Structure
+
+<DllImport("DwmApi.dll")>
+Public Shared Function DwmExtendFrameIntoClientArea(ByVal hwnd As IntPtr, ByRef pMarInset As MARGINS) As Integer
+End Function
+```
+
+[DwmExtendFrameIntoClientArea](/windows/desktop/api/dwmapi/nf-dwmapi-dwmextendframeintoclientarea) is the DWM function that extends the frame into the client area. It takes two parameters; a window handle and a [MARGINS](/windows/win32/api/uxtheme/ns-uxtheme-margins) structure. [MARGINS](/windows/win32/api/uxtheme/ns-uxtheme-margins) is used to tell the DWM how much extra the frame should be extended into the client area.
+
+## Example
+
+To use the [DwmExtendFrameIntoClientArea](/windows/desktop/api/dwmapi/nf-dwmapi-dwmextendframeintoclientarea) function, a window handle must be obtained. In WPF, the window handle can be obtained from the <xref:System.Windows.Interop.HwndSource.Handle%2A> property of an <xref:System.Windows.Interop.HwndSource>. In the following example, the frame is extended into the client area on the <xref:System.Windows.FrameworkElement.Loaded> event of the window.
+
+```csharp
+void OnLoaded(object sender, RoutedEventArgs e)
+{
+   try
+   {
+      // Obtain the window handle for WPF application
+      IntPtr mainWindowPtr = new WindowInteropHelper(this).Handle;
+      HwndSource mainWindowSrc = HwndSource.FromHwnd(mainWindowPtr);
+      mainWindowSrc.CompositionTarget.BackgroundColor = Color.FromArgb(0, 0, 0, 0);
+
+      // Get System Dpi
+      System.Drawing.Graphics desktop = System.Drawing.Graphics.FromHwnd(mainWindowPtr);
+      float DesktopDpiX = desktop.DpiX;
+      float DesktopDpiY = desktop.DpiY;
+
+      // Set Margins
+      NonClientRegionAPI.MARGINS margins = new NonClientRegionAPI.MARGINS();
+
+      // Extend glass frame into client area
+      // Note that the default desktop Dpi is 96dpi. The  margins are
+      // adjusted for the system Dpi.
+      margins.cxLeftWidth = Convert.ToInt32(5 * (DesktopDpiX / 96));
+      margins.cxRightWidth = Convert.ToInt32(5 * (DesktopDpiX / 96));
+      margins.cyTopHeight = Convert.ToInt32(((int)topBar.ActualHeight + 5) * (DesktopDpiX / 96));
+      margins.cyBottomHeight = Convert.ToInt32(5 * (DesktopDpiX / 96));
+
+      int hr = NonClientRegionAPI.DwmExtendFrameIntoClientArea(mainWindowSrc.Handle, ref margins);
+      //
+      if (hr < 0)
+      {
+         //DwmExtendFrameIntoClientArea Failed
+      }
+   }
+   // If not Vista, paint background white.
+   catch (DllNotFoundException)
+   {
+      Application.Current.MainWindow.Background = Brushes.White;
+   }
+}
+```
+
+## Example
+
+The following example shows a simple window in which the frame is extended into the client area. The frame is extended behind the top border that contains the two <xref:System.Windows.Controls.TextBox> objects.
+
+```xaml
+<Window x:Class="SDKSample.Window1"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    Title="Extended Glass in WPF" Height="300" Width="400"
+    Loaded="OnLoaded" Background="Transparent"
+    >
+  <Grid ShowGridLines="True">
+    <DockPanel Name="mainDock">
+      <!-- The border is used to compute the rendered height with margins.
+           topBar contents will be displayed on the extended glass frame.-->
+      <Border Name="topBar" DockPanel.Dock="Top" >
+        <Grid Name="grid">
+          <Grid.ColumnDefinitions>
+            <ColumnDefinition MinWidth="100" Width="*"/>
+            <ColumnDefinition Width="Auto"/>
+          </Grid.ColumnDefinitions>
+          <TextBox Grid.Column="0" MinWidth="100" Margin="0,0,10,5">Path</TextBox>
+          <TextBox Grid.Column="1" MinWidth="75" Margin="0,0,0,5">Search</TextBox>
+        </Grid>
+      </Border>
+      <Grid DockPanel.Dock="Top" >
+        <Grid.ColumnDefinitions>
+          <ColumnDefinition/>
+        </Grid.ColumnDefinitions>
+        <TextBox Grid.Column="0" AcceptsReturn="True"/>
+      </Grid>
+    </DockPanel>
+  </Grid>
+</Window>
+```
+
+The following image illustrates the glass frame extended into a WPF application:
+
+![Screenshot showing a glass frame extended into a WPF application.](./media/extend-glass-frame-into-a-wpf-application/glass-frame-extended-wpf-application.png)
+
+## See also
+
+- [Desktop Window Manager Overview](/windows/desktop/dwm/dwm-overview)
+- [Desktop Window Manager Blur Overview](/windows/desktop/dwm/blur-ovw)
+- [DwmExtendFrameIntoClientArea](/windows/desktop/api/dwmapi/nf-dwmapi-dwmextendframeintoclientarea)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/from-to-by-animations-overview.md

@@ -0,0 +1,146 @@
+---
+title: "From-To-By Animations Overview"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "animation [WPF], From/to/by"
+  - "From/to/by animation"
+ms.assetid: 516fce0a-e7f8-49b8-b018-53b3d409a8a3
+---
+# From/To/By Animations Overview
+This topic describes how to use From/To/By animations to animate dependency properties. A From/To/By animation creates a transition between two values.  
+  
+<a name="prereq"></a>
+## Prerequisites  
+ To understand this topic, you should be familiar with [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animations features. For an introduction to animation features, see the [Animation Overview](animation-overview.md).  
+  
+<a name="whatisanimation"></a>
+## What Is a From/To/By Animation?  
+ A From/To/By animation is a type of <xref:System.Windows.Media.Animation.AnimationTimeline> that creates a transition between a starting value and an ending value. The amount of time that the transition takes to complete is determined by the <xref:System.Windows.Media.Animation.Timeline.Duration%2A> of that animation.  
+  
+ You can apply a From/To/By animation to a property by using a <xref:System.Windows.Media.Animation.Storyboard> in markup and code, or by using the <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A> method in code. You may also use a From/To/By Animation to create an <xref:System.Windows.Media.Animation.AnimationClock> and apply it to one or more properties. For more information about the different methods for applying animations, see the [Property Animation Techniques Overview](property-animation-techniques-overview.md).  
+  
+ From/To/By animations can have no more than two target values. If you require an animation that has more than two target values, use a key-frame animation. Key-frame animations are described in the [Key-Frame Animations Overview](key-frame-animations-overview.md).  
+  
+<a name="animation_types"></a>
+## From/To/By Animation Types  
+ Because animations generate property values, there are different animation types for different property types. To animate a property that takes a <xref:System.Double>, such as the <xref:System.Windows.FrameworkElement.Width%2A> property of an element, use an animation that produces <xref:System.Double> values. To animate a property that takes a <xref:System.Windows.Point>, use an animation that produces <xref:System.Windows.Point> values, and so on.  
+  
+ From/To/By animation classes belong to the <xref:System.Windows.Media.Animation> namespace and use the following naming convention:  
+  
+ *\<Type>* `Animation`  
+  
+ Where *\<Type>* is the type of value that the class animates.  
+  
+ [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] provides the following From/To/By animation classes.  
+  
+|Property type|Corresponding From/To/By animation class|  
+|-------------------|------------------------------------------------|  
+|<xref:System.Byte>|<xref:System.Windows.Media.Animation.ByteAnimation>|  
+|<xref:System.Windows.Media.Color>|<xref:System.Windows.Media.Animation.ColorAnimation>|  
+|<xref:System.Decimal>|<xref:System.Windows.Media.Animation.DecimalAnimation>|  
+|<xref:System.Double>|<xref:System.Windows.Media.Animation.DoubleAnimation>|  
+|<xref:System.Int16>|<xref:System.Windows.Media.Animation.Int16Animation>|  
+|<xref:System.Int32>|<xref:System.Windows.Media.Animation.Int32Animation>|  
+|<xref:System.Int64>|<xref:System.Windows.Media.Animation.Int64Animation>|  
+|<xref:System.Windows.Point>|<xref:System.Windows.Media.Animation.PointAnimation>|  
+|<xref:System.Windows.Media.Media3D.Quaternion>|<xref:System.Windows.Media.Animation.QuaternionAnimation>|  
+|<xref:System.Windows.Rect>|<xref:System.Windows.Media.Animation.RectAnimation>|  
+|<xref:System.Windows.Media.Media3D.Rotation3D>|<xref:System.Windows.Media.Animation.Rotation3DAnimation>|  
+|<xref:System.Single>|<xref:System.Windows.Media.Animation.SingleAnimation>|  
+|<xref:System.Windows.Size>|<xref:System.Windows.Media.Animation.SizeAnimation>|  
+|<xref:System.Windows.Thickness>|<xref:System.Windows.Media.Animation.ThicknessAnimation>|  
+|<xref:System.Windows.Media.Media3D.Vector3D>|<xref:System.Windows.Media.Animation.Vector3DAnimation>|  
+|<xref:System.Windows.Vector>|<xref:System.Windows.Media.Animation.VectorAnimation>|  
+  
+<a name="anim_values"></a>
+## Target Values  
+ A From/To/By animation creates a transition between two target values. It is common to specify a starting value (set it by using the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property) and an ending value (set it by using the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property). However, you can also specify only a starting value, a destination value, or an offset value. In these cases, the animation obtains the missing target value from the property that is being animated. The following list describes the different ways to specify the target values of an animation.  
+  
+- **Starting Value**  
+  
+     Use the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property when you want to explicitly specify the starting value of an animation. You can use the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property by itself, or with the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> or <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> property. If you specify only the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property, the animation transitions from that value to the base value of the animated property.  
+  
+- **Ending Value**  
+  
+     To specify an ending value of an animation, use its <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property. If you use the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property by itself, the animation obtains its starting value from the property that is being animated or from the output of another animation that is applied to the same property. You can use the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property together with the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property to explicitly specify starting and ending values for the animation.  
+  
+- **Offset Value**  
+  
+     The <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> property enables you to specify an offset instead of an explicit starting or ending value for the animation. The <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> property of an animation specifies by how much the animation changes a value over its duration. You can use the <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> property by itself or with the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property. If you specify only the <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> property, the animation adds the offset value to the base value of the property or to the output of another animation.  
+  
+<a name="examples"></a>
+## Using From/To/By Values  
+ The following sections describe how to use the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A>, <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A>, and <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> properties together or separately.  
+  
+ The examples in this section each use a <xref:System.Windows.Media.Animation.DoubleAnimation>, which is a type of From/To/By animation, to animate the <xref:System.Windows.FrameworkElement.Width%2A> property of a <xref:System.Windows.Shapes.Rectangle> that is 10 device independent pixels high and 100 device independent pixels wide.  
+  
+ Although each example uses a <xref:System.Windows.Media.Animation.DoubleAnimation>, the From, To, and By properties of all From/To/By animations behave identically. Although each of these examples uses a <xref:System.Windows.Media.Animation.Storyboard>, you can use From/To/By animations in other ways. For more information, see [Property Animation Techniques Overview](property-animation-techniques-overview.md).  
+  
+### From/To  
+ When you set the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> and <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> values together, the animation progresses from the value that is specified by the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property, to the value that is specified by the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property.  
+  
+ The following example sets the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property of the <xref:System.Windows.Media.Animation.DoubleAnimation> to 50 and its <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property to 300. As a result, the <xref:System.Windows.FrameworkElement.Width%2A> of the <xref:System.Windows.Shapes.Rectangle> is animated from 50 to 300.  
+  
+ [!code-csharp[basicvalues_snip#FromToAnimationInline](~/samples/snippets/csharp/VS_Snippets_Wpf/basicvalues_snip/CSharp/AnimationTargetValuesExample.cs#fromtoanimationinline)]
+ [!code-vb[basicvalues_snip#FromToAnimationInline](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicvalues_snip/VisualBasic/AnimationTargetValuesExample.vb#fromtoanimationinline)]  
+  
+### To  
+ When you set just the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property, the animation progresses from the base value of the animated property, or from the output of a composing animation that was previously applied to the same property, to the value that is specified by the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property.  
+  
+ ("Composing animation" refers to an <xref:System.Windows.Media.Animation.ClockState.Active> or <xref:System.Windows.Media.Animation.ClockState.Filling> animation that previously applied to the same property that is still in effect when the current animation was applied by using the <xref:System.Windows.Media.Animation.HandoffBehavior.Compose> handoff behavior.)  
+  
+ The following example sets just the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property of the <xref:System.Windows.Media.Animation.DoubleAnimation> to 300. Because no starting value was specified, the <xref:System.Windows.Media.Animation.DoubleAnimation> uses the base value (100) of the <xref:System.Windows.FrameworkElement.Width%2A> property as its starting value. The <xref:System.Windows.FrameworkElement.Width%2A> of the <xref:System.Windows.Shapes.Rectangle> is animated from 100 to the animation's target value of 300.  
+  
+ [!code-csharp[basicvalues_snip#ToAnimationInline](~/samples/snippets/csharp/VS_Snippets_Wpf/basicvalues_snip/CSharp/AnimationTargetValuesExample.cs#toanimationinline)]
+ [!code-vb[basicvalues_snip#ToAnimationInline](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicvalues_snip/VisualBasic/AnimationTargetValuesExample.vb#toanimationinline)]  
+  
+### By  
+ When you set just the <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> property of an animation, the animation progresses from the base value of the property that is being animated, or from the output of a composing animation to the sum of that value and the value that is specified by the <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> property.  
+  
+ The following example sets just the <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> property of the <xref:System.Windows.Media.Animation.DoubleAnimation> to 300. Because the example does not specify a starting value, the <xref:System.Windows.Media.Animation.DoubleAnimation> uses the base value of the <xref:System.Windows.FrameworkElement.Width%2A> property, 100, as its starting value. The ending value is determined by adding the <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> value of the animation, 300, to its starting value, 100: 400. As a result, the <xref:System.Windows.FrameworkElement.Width%2A> of the <xref:System.Windows.Shapes.Rectangle> is animated from 100 to 400.  
+  
+ [!code-csharp[basicvalues_snip#ByAnimationInline](~/samples/snippets/csharp/VS_Snippets_Wpf/basicvalues_snip/CSharp/AnimationTargetValuesExample.cs#byanimationinline)]
+ [!code-vb[basicvalues_snip#ByAnimationInline](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicvalues_snip/VisualBasic/AnimationTargetValuesExample.vb#byanimationinline)]  
+  
+### From/By  
+ When you set the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> and <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> properties of an animation, the animation progresses from the value that is specified by the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property, to the value that is specified by the sum of the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> and <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> properties.  
+  
+ The following example sets the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property of the <xref:System.Windows.Media.Animation.DoubleAnimation> to 50 and its <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> property to 300. The ending value is determined by adding the <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> value of the animation, 300, to its starting value, 50: 350. As a result, the <xref:System.Windows.FrameworkElement.Width%2A> of the <xref:System.Windows.Shapes.Rectangle> is animated from 50 to 350.  
+  
+ [!code-csharp[basicvalues_snip#FromByAnimationInline](~/samples/snippets/csharp/VS_Snippets_Wpf/basicvalues_snip/CSharp/AnimationTargetValuesExample.cs#frombyanimationinline)]
+ [!code-vb[basicvalues_snip#FromByAnimationInline](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicvalues_snip/VisualBasic/AnimationTargetValuesExample.vb#frombyanimationinline)]  
+  
+### From  
+ When you specify just the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> value of an animation, the animation progresses from the value that is specified by the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property, to the base value of the property that is being animated or to the output of a composing animation.  
+  
+ The following example sets just the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property of the <xref:System.Windows.Media.Animation.DoubleAnimation> to 50. Because no ending value was specified, the <xref:System.Windows.Media.Animation.DoubleAnimation> uses the base value of the <xref:System.Windows.FrameworkElement.Width%2A> property, 100, as its ending value. The <xref:System.Windows.FrameworkElement.Width%2A> of the <xref:System.Windows.Shapes.Rectangle> is animated from 50 to the base value of the <xref:System.Windows.FrameworkElement.Width%2A> property, 100.  
+  
+ [!code-csharp[basicvalues_snip#FromAnimationInline](~/samples/snippets/csharp/VS_Snippets_Wpf/basicvalues_snip/CSharp/AnimationTargetValuesExample.cs#fromanimationinline)]
+ [!code-vb[basicvalues_snip#FromAnimationInline](~/samples/snippets/visualbasic/VS_Snippets_Wpf/basicvalues_snip/VisualBasic/AnimationTargetValuesExample.vb#fromanimationinline)]  
+  
+### To/By  
+ If you set both the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> and the <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> properties of an animation, the <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> property is ignored.  
+  
+<a name="otheranimationtypes"></a>
+## Other Animation Types  
+ From/To/By animations are not the only type of animations that [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] provides: it also provides key-frame animations and path animations.  
+  
+- A key-frame animation animates along any number of destination values, described using key frames. For more information, see the [Key-Frame Animations Overview](key-frame-animations-overview.md).  
+  
+- A path animation generates output values from a <xref:System.Windows.Media.PathGeometry>. For more information, see the [Path Animations Overview](path-animations-overview.md).  
+  
+ [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] also enables you to create your own custom animation types. For more information, see the [Custom Animations Overview](custom-animations-overview.md).  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.Timeline>
+- <xref:System.Windows.Media.Animation.Storyboard>
+- [Animation Overview](animation-overview.md)
+- [Storyboards Overview](storyboards-overview.md)
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Path Animations Overview](path-animations-overview.md)
+- [Custom Animations Overview](custom-animations-overview.md)
+- [From, To, and By Animation Target Values Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/TargetValues)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/geometries-how-to-topics.md

@@ -0,0 +1,35 @@
+---
+title: "Geometries How-to Topics"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "geometry classes [WPF]"
+ms.assetid: 83873331-b013-472e-8197-8ba993dd242f
+---
+# Geometries How-to Topics
+The topics in this section demonstrate how to use <xref:System.Windows.Media.Geometry> objects in your applications.  
+  
+## In This Section  
+ [Animate an EllipseGeometry](how-to-animate-an-ellipsegeometry.md)  
+ [Animate the Size of an ArcSegment](how-to-animate-the-size-of-an-arcsegment.md)  
+ [Control the Fill of a Composite Shape](how-to-control-the-fill-of-a-composite-shape.md)  
+ [Create a Combined Geometry](how-to-create-a-combined-geometry.md)  
+ [Create a Composite Shape](how-to-create-a-composite-shape.md)  
+ [Create a Cubic Bezier Curve](how-to-create-a-cubic-bezier-curve.md)  
+ [Create a Line Using a LineGeometry](how-to-create-a-line-using-a-linegeometry.md)  
+ [Create a LineSegment in a PathGeometry](how-to-create-a-linesegment-in-a-pathgeometry.md)  
+ [Create a Shape by Using a PathGeometry](how-to-create-a-shape-by-using-a-pathgeometry.md)  
+ [Create a Shape Using a StreamGeometry](how-to-create-a-shape-using-a-streamgeometry.md)  
+ [Create a Quadratic Bezier Curve](how-to-create-a-quadratic-bezier-curve.md)  
+ [Create an Elliptical Arc](how-to-create-an-elliptical-arc.md)  
+ [Create Multiple Subpaths Within a PathGeometry](how-to-create-multiple-subpaths-within-a-pathgeometry.md)  
+ [Define a Rectangle Using a RectangleGeometry](how-to-define-a-rectangle-using-a-rectanglegeometry.md)  
+ [Round the Corners of a RectangleGeometry](how-to-round-the-corners-of-a-rectanglegeometry.md)  
+  
+## See also
+
+- <xref:System.Windows.Media.Brushes>
+- <xref:System.Windows.Shapes.Shape>
+- [Shapes and Basic Drawing in WPF Overview](shapes-and-basic-drawing-in-wpf-overview.md)
+- [Graphics and Multimedia](index.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/geometries.md

@@ -0,0 +1,27 @@
+---
+title: "Geometries"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "2D graphics [WPF]"
+  - "geometry classes [WPF]"
+  - "clipping regions defined [WPF]"
+  - "hit-test objects [WPF]"
+ms.assetid: 47ad531d-a4da-4e99-b12e-1de710c32493
+---
+# Geometries
+<xref:System.Windows.Media.Geometry> is a versatile class, used to render 2D graphics, hit-test objects, and define clipping regions  
+  
+## In This Section  
+ [Path Markup Syntax](path-markup-syntax.md)  
+ [Geometry Overview](geometry-overview.md)  
+ [How-to Topics](geometries-how-to-topics.md)  
+  
+## See also
+
+- <xref:System.Windows.Media.Brushes>
+- <xref:System.Windows.Shapes.Shape>
+- [2D Graphics and Imaging](../advanced/optimizing-performance-2d-graphics-and-imaging.md)
+- [Shapes and Basic Drawing in WPF Overview](shapes-and-basic-drawing-in-wpf-overview.md)
+- [Graphics and Multimedia](index.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/geometry-overview.md

@@ -0,0 +1,223 @@
+---
+title: "Geometry Overview"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "geometry classes [WPF]"
+  - "graphics [WPF], geometry classes"
+ms.assetid: 9fba8934-98b7-4af6-82f6-f4ef887f963a
+---
+# Geometry Overview
+This overview describes how to use the [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] <xref:System.Windows.Media.Geometry> classes to describe shapes. This topic also contrasts the differences between <xref:System.Windows.Media.Geometry> objects and <xref:System.Windows.Shapes.Shape> elements.  
+
+<a name="wcpsdk_graphics_geometry_introduction"></a>
+## What Is a Geometry?  
+ The <xref:System.Windows.Media.Geometry> class and the classes which derive from it, such as <xref:System.Windows.Media.EllipseGeometry>, <xref:System.Windows.Media.PathGeometry>, and <xref:System.Windows.Media.CombinedGeometry>, enable you to describe the geometry of a 2D shape. These geometric descriptions have many uses, such defining a shape to paint to the screen or defining hit-test and clip regions. You can even use a geometry to define an animation path.  
+  
+ <xref:System.Windows.Media.Geometry> objects can be simple, such as rectangles and circles, or composite, created from two or more geometry objects.  More complex geometries can be created by using the <xref:System.Windows.Media.PathGeometry> and <xref:System.Windows.Media.StreamGeometry> classes, which enable you to describe arcs and curves.  
+  
+ Because a <xref:System.Windows.Media.Geometry> is a type of <xref:System.Windows.Freezable>, <xref:System.Windows.Media.Geometry> objects provide several special features: they can be declared as [resources](/dotnet/desktop-wpf/fundamentals/xaml-resources-define), shared among multiple objects, made read-only to improve performance, cloned, and made thread-safe. For more information about the different features provided by <xref:System.Windows.Freezable> objects, see the [Freezable Objects Overview](../advanced/freezable-objects-overview.md).  
+  
+<a name="wcpsdk_graphics_geometry_geometryandshapes"></a>
+## Geometries vs. Shapes  
+ The <xref:System.Windows.Media.Geometry> and <xref:System.Windows.Shapes.Shape> classes seem similar in that they both describe 2D shapes (compare <xref:System.Windows.Media.EllipseGeometry> and <xref:System.Windows.Shapes.Ellipse> for example), but there are important differences.  
+  
+ For one, the <xref:System.Windows.Media.Geometry> class inherits from the <xref:System.Windows.Freezable> class while the <xref:System.Windows.Shapes.Shape> class inherits from <xref:System.Windows.FrameworkElement>. Because they are elements, <xref:System.Windows.Shapes.Shape> objects can render themselves and participate in the layout system, while <xref:System.Windows.Media.Geometry> objects cannot.  
+  
+ Although <xref:System.Windows.Shapes.Shape> objects are more readily usable than <xref:System.Windows.Media.Geometry> objects, <xref:System.Windows.Media.Geometry> objects are more versatile. While a <xref:System.Windows.Shapes.Shape> object is used to render 2D graphics, a <xref:System.Windows.Media.Geometry> object can be used to define the geometric region for 2D graphics, define a region for clipping, or define a region for hit testing, for example.  
+  
+### The Path Shape  
+ One <xref:System.Windows.Shapes.Shape>, the <xref:System.Windows.Shapes.Path> class, actually uses a <xref:System.Windows.Media.Geometry> to describe its contents. By setting the <xref:System.Windows.Shapes.Path.Data%2A> property of the <xref:System.Windows.Shapes.Path> with a <xref:System.Windows.Media.Geometry> and setting its <xref:System.Windows.Shapes.Shape.Fill%2A> and <xref:System.Windows.Shapes.Shape.Stroke%2A> properties, you can render a <xref:System.Windows.Media.Geometry>.  
+  
+<a name="commonproperties"></a>
+## Common Properties That Take a Geometry  
+ The preceding sections mentioned that Geometry objects can be used with other objects for a variety of purposes, such as drawing shapes, animating, and clipping. The following table lists several classes that have properties that take a <xref:System.Windows.Media.Geometry> object.  
+  
+|Type|Property|  
+|----------|--------------|  
+|<xref:System.Windows.Media.Animation.DoubleAnimationUsingPath>|<xref:System.Windows.Media.Animation.DoubleAnimationUsingPath.PathGeometry%2A>|  
+|<xref:System.Windows.Media.DrawingGroup>|<xref:System.Windows.Media.DrawingGroup.ClipGeometry%2A>|  
+|<xref:System.Windows.Media.GeometryDrawing>|<xref:System.Windows.Media.GeometryDrawing.Geometry%2A>|  
+|<xref:System.Windows.Shapes.Path>|<xref:System.Windows.Shapes.Path.Data%2A>|  
+|<xref:System.Windows.UIElement>|<xref:System.Windows.UIElement.Clip%2A>|  
+  
+<a name="wcpsdk_graphics_geometry_geometrytypes"></a>
+## Simple Geometry Types  
+ The base class for all geometries is the abstract class <xref:System.Windows.Media.Geometry>.  The classes which derive from the <xref:System.Windows.Media.Geometry> class can be roughly grouped into three categories: simple geometries, path geometries, and composite geometries.  
+  
+ Simple geometry classes include <xref:System.Windows.Media.LineGeometry>, <xref:System.Windows.Media.RectangleGeometry>, and <xref:System.Windows.Media.EllipseGeometry> and are used to create basic geometric shapes, such as lines, rectangles, and circles.  
+  
+- A <xref:System.Windows.Media.LineGeometry> is defined by specifying the start point of the line and the end point.  
+  
+- A <xref:System.Windows.Media.RectangleGeometry> is defined with a <xref:System.Windows.Rect> structure which specifies its relative position and its height and width. You can create a rounded rectangle by setting the <xref:System.Windows.Media.RectangleGeometry.RadiusX%2A> and <xref:System.Windows.Media.RectangleGeometry.RadiusY%2A> properties.  
+  
+- An <xref:System.Windows.Media.EllipseGeometry> is defined by a center point, an x-radius and a y-radius.  The following examples show how to create simple geometries for rendering and for clipping.  
+  
+ These same shapes, as well as more complex shapes, can be created using a <xref:System.Windows.Media.PathGeometry> or by combining geometry objects together, but these classes provide a simpler means for producing these basic geometric shapes.  
+  
+ The following example shows how to create and render a <xref:System.Windows.Media.LineGeometry>.  As noted previously, a <xref:System.Windows.Media.Geometry> object is unable to draw itself, so the example uses a <xref:System.Windows.Shapes.Path> shape to render the line.  Because a line has no area, setting the <xref:System.Windows.Shapes.Shape.Fill%2A> property of the <xref:System.Windows.Shapes.Path> would have no effect; instead, only the <xref:System.Windows.Shapes.Shape.Stroke%2A> and <xref:System.Windows.Shapes.Shape.StrokeThickness%2A> properties are specified. The following illustration shows the output from the example.  
+  
+ ![A LineGeometry](./media/graphicsmm-line.gif "graphicsmm_line")  
+A LineGeometry drawn from (10,20) to (100,130)  
+  
+ [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMLineGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmlinegeometryexample)]  
+  
+ [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMLineGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmlinegeometryexample)]
+ [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMLineGeometryExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmlinegeometryexample)]  
+  
+ The next example shows how to create and render an <xref:System.Windows.Media.EllipseGeometry>.  The examples sets the <xref:System.Windows.Media.EllipseGeometry.Center%2A> of the <xref:System.Windows.Media.EllipseGeometry> is set to the point `50,50` and the x-radius and the y-radius are both set to `50`, which creates a circle with a diameter of 100.  The interior of the ellipse is painted by assigning a value to the Path element's Fill property, in this case <xref:System.Windows.Media.Brushes.Gold%2A>. The following illustration shows the output from the example.  
+  
+ ![An EllipseGeometry](./media/graphicsmm-ellipse.gif "graphicsmm_ellipse")  
+An EllipseGeometry drawn at (50,50)  
+  
+ [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMEllipseGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmellipsegeometryexample)]  
+  
+ [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMEllipseGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmellipsegeometryexample)]
+ [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMEllipseGeometryExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmellipsegeometryexample)]  
+  
+ The following example shows how to create and render a <xref:System.Windows.Media.RectangleGeometry>.  The position and the dimensions of the rectangle are defined by a <xref:System.Windows.Rect> structure. The position is `50,50` and the height and width are both `25`, which creates a square. The following illustration shows the output from the example.  
+  
+ ![A RectangleGeometry](./media/graphicsmm-rectangle.gif "graphicsmm_rectangle")  
+A RectangleGeometry drawn at 50,50  
+  
+ [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMRectangleGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmrectanglegeometryexample)]  
+  
+ [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMRectangleGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmrectanglegeometryexample)]
+ [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMRectangleGeometryExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmrectanglegeometryexample)]  
+  
+ The following example shows how to use an <xref:System.Windows.Media.EllipseGeometry> as the clip region for an image.  An <xref:System.Windows.Controls.Image> object is defined with a <xref:System.Windows.FrameworkElement.Width%2A> of 200 and a <xref:System.Windows.FrameworkElement.Height%2A> of 150.  An <xref:System.Windows.Media.EllipseGeometry> with a <xref:System.Windows.Media.EllipseGeometry.RadiusX%2A> value of 100, a <xref:System.Windows.Media.EllipseGeometry.RadiusY%2A> value of 75, and a <xref:System.Windows.Media.EllipseGeometry.Center%2A> value of 100,75 is set to the <xref:System.Windows.UIElement.Clip%2A> property of the image.  Only the part of the image that is within the area of the ellipse will be displayed. The following illustration shows the output from the example.  
+  
+ ![An Image with and without clipping](./media/graphicsmm-clipexample.png "graphicsmm_clipexample")  
+An EllipseGeometry used to clip an Image control  
+  
+ [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMImageClipGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmimageclipgeometryexample)]  
+  
+ [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMImageClipGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmimageclipgeometryexample)]
+ [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMImageClipGeometryExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmimageclipgeometryexample)]  
+  
+<a name="wcpsdk_graphics_geometry_pathgeometry"></a>
+## Path Geometries  
+ The <xref:System.Windows.Media.PathGeometry> class and its lightweight equivalent, the <xref:System.Windows.Media.StreamGeometry> class, provide the means to describe multiple complex figures composed of arcs, curves, and lines.  
+  
+ At the heart of a <xref:System.Windows.Media.PathGeometry> is a collection of <xref:System.Windows.Media.PathFigure> objects, so named because each figure describes a discrete shape in the <xref:System.Windows.Media.PathGeometry>. Each <xref:System.Windows.Media.PathFigure> is itself comprised of one or more <xref:System.Windows.Media.PathSegment> objects, each of which describes a segment of the figure.  
+  
+ There are many types of segments.  
+  
+|Segment Type|Description|Example|  
+|------------------|-----------------|-------------|  
+|<xref:System.Windows.Media.ArcSegment>|Creates an elliptical arc between two points.|[Create an Elliptical Arc](how-to-create-an-elliptical-arc.md).|  
+|<xref:System.Windows.Media.BezierSegment>|Creates a cubic Bezier curve between two points.|[Create a Cubic Bezier Curve](how-to-create-a-cubic-bezier-curve.md).|  
+|<xref:System.Windows.Media.LineSegment>|Creates a line between two points.|[Create a LineSegment in a PathGeometry](how-to-create-a-linesegment-in-a-pathgeometry.md)|  
+|<xref:System.Windows.Media.PolyBezierSegment>|Creates a series of cubic Bezier curves.|See the <xref:System.Windows.Media.PolyBezierSegment> type page.|  
+|<xref:System.Windows.Media.PolyLineSegment>|Creates a series of lines.|See the <xref:System.Windows.Media.PolyLineSegment> type page.|  
+|<xref:System.Windows.Media.PolyQuadraticBezierSegment>|Creates a series of quadratic Bezier curves.|See the <xref:System.Windows.Media.PolyQuadraticBezierSegment> page.|  
+|<xref:System.Windows.Media.QuadraticBezierSegment>|Creates a quadratic Bezier curve.|[Create a Quadratic Bezier Curve](how-to-create-a-quadratic-bezier-curve.md).|  
+  
+ The segments within a <xref:System.Windows.Media.PathFigure> are combined into a single geometric shape with the end point of each segment being the start point of the next segment. The <xref:System.Windows.Media.PathFigure.StartPoint%2A> property of a <xref:System.Windows.Media.PathFigure> specifies the point from which the first segment is drawn. Each subsequent segment starts at the end point of the previous segment. For example, a vertical line from `10,50` to `10,150` can be defined by setting the <xref:System.Windows.Media.PathFigure.StartPoint%2A> property to `10,50` and creating a <xref:System.Windows.Media.LineSegment> with a <xref:System.Windows.Media.LineSegment.Point%2A> property setting of `10,150`.  
+  
+ The following example creates a simple <xref:System.Windows.Media.PathGeometry> comprised of a single <xref:System.Windows.Media.PathFigure> with a <xref:System.Windows.Media.LineSegment> and displays it using a <xref:System.Windows.Shapes.Path> element. The <xref:System.Windows.Media.PathFigure> object's <xref:System.Windows.Media.PathFigure.StartPoint%2A> is set to `10,20` and a <xref:System.Windows.Media.LineSegment> is defined with an end point of `100,130`. The following illustration shows the <xref:System.Windows.Media.PathGeometry> created by this example.  
+  
+ ![A LineGeometry](./media/graphicsmm-line.gif "graphicsmm_line")  
+A PathGeometry that contains a single LineSegment  
+  
+ [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMPathGeometryLineExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmpathgeometrylineexample)]  
+  
+ [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMPathGeometryLineExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmpathgeometrylineexample)]
+ [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMPathGeometryLineExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmpathgeometrylineexample)]  
+  
+ It is worth contrasting this example with the preceding <xref:System.Windows.Media.LineGeometry> example.  The syntax used for a <xref:System.Windows.Media.PathGeometry> is much more verbose than that used for a simple <xref:System.Windows.Media.LineGeometry>, and it may make more sense to use the <xref:System.Windows.Media.LineGeometry> class in this case, but the verbose syntax of the <xref:System.Windows.Media.PathGeometry> allows for extremely intricate and complex geometric regions.  
+  
+ More complex geometries can be created by using a combination of <xref:System.Windows.Media.PathSegment> objects.  
+  
+ The next example uses a <xref:System.Windows.Media.BezierSegment>, a <xref:System.Windows.Media.LineSegment>, and an <xref:System.Windows.Media.ArcSegment> to create shape. The example first creates a cubic Bezier curve is by defining four points: a start point, which is the end point of the previous segment, an end point (<xref:System.Windows.Media.BezierSegment.Point3%2A>), and two control points (<xref:System.Windows.Media.BezierSegment.Point1%2A> and <xref:System.Windows.Media.BezierSegment.Point2%2A>).  The two control points of a cubic Bezier curve behave like magnets, attracting portions of what would otherwise be a straight line towards themselves, producing a curve. The first control point, <xref:System.Windows.Media.BezierSegment.Point1%2A>, affects the beginning portion of the curve; the second control point, <xref:System.Windows.Media.BezierSegment.Point2%2A>, affects the ending portion of the curve.  
+  
+ The example then adds a <xref:System.Windows.Media.LineSegment>, which is drawn between the end point of the preceding <xref:System.Windows.Media.BezierSegment> that preceded it to the point specified by its <xref:System.Windows.Media.LineSegment> property.  
+  
+ The example then adds an <xref:System.Windows.Media.ArcSegment>, which is drawn from the end point of the preceding <xref:System.Windows.Media.LineSegment> to the point specified by its <xref:System.Windows.Media.ArcSegment.Point%2A> property. The example also specifies the arc's x- and y-radius (<xref:System.Windows.Media.ArcSegment.Size%2A>), a rotation angle (<xref:System.Windows.Media.ArcSegment.RotationAngle%2A>), a flag indicating how large the angle of the resulting arc should be (<xref:System.Windows.Media.ArcSegment.IsLargeArc%2A>), and a value indicating in which direction the arc is drawn (<xref:System.Windows.Media.ArcSegment.SweepDirection%2A>). The following illustration shows the shape created by this example.  
+  
+ ![A PathGeometry](./media/graphicsmm-path2.gif "graphicsmm_path2")  
+A PathGeometry  
+  
+ [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMPathGeometryComplexExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmpathgeometrycomplexexample)]  
+  
+ [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMPathGeometryComplexExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmpathgeometrycomplexexample)]
+ [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMPathGeometryComplexExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmpathgeometrycomplexexample)]  
+  
+ Even more complex geometries can be created by using multiple <xref:System.Windows.Media.PathFigure> objects within a <xref:System.Windows.Media.PathGeometry>.  
+  
+ The following example creates a <xref:System.Windows.Media.PathGeometry> with two <xref:System.Windows.Media.PathFigure> objects, each of which contains multiple <xref:System.Windows.Media.PathSegment> objects.  The <xref:System.Windows.Media.PathFigure> from the above example and a <xref:System.Windows.Media.PathFigure> with a <xref:System.Windows.Media.PolyLineSegment> and a <xref:System.Windows.Media.QuadraticBezierSegment> are used.  A <xref:System.Windows.Media.PolyLineSegment> is defined with an array of points and the <xref:System.Windows.Media.QuadraticBezierSegment> is defined with a control point and an end point. The following illustration shows the shape created by this example.  
+  
+ ![A PathGeometry](./media/graphicsmm-path.gif "graphicsmm_path")  
+A PathGeometry with multiple figures  
+  
+ [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMPathGeometryComplexMultiExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmpathgeometrycomplexmultiexample)]  
+  
+ [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMPathGeometryComplexMultiExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmpathgeometrycomplexmultiexample)]
+ [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMPathGeometryComplexMultiExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmpathgeometrycomplexmultiexample)]  
+  
+### StreamGeometry  
+ Like the <xref:System.Windows.Media.PathGeometry> class, a <xref:System.Windows.Media.StreamGeometry> defines a complex geometric shape that may contain curves, arcs, and lines. Unlike a <xref:System.Windows.Media.PathGeometry>, the contents of a  <xref:System.Windows.Media.StreamGeometry> do not support data binding, animation, or modification. Use a <xref:System.Windows.Media.StreamGeometry> when you need to describe a complex geometry but do not want the overhead of supporting data binding, animation, or modification. Because of its efficiency, the <xref:System.Windows.Media.StreamGeometry> class is a good choice for describing adorners.  
+  
+ For an example, see [Create a Shape Using a StreamGeometry](how-to-create-a-shape-using-a-streamgeometry.md).  
+  
+### Path Markup Syntax  
+ The <xref:System.Windows.Media.PathGeometry> and <xref:System.Windows.Media.StreamGeometry> types support a [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)] attribute syntax using a special series of move and draw commands. For more information, see [Path Markup Syntax](path-markup-syntax.md).  
+  
+<a name="wcpsdk_graphics_geometry_introduction2"></a>
+## Composite Geometries  
+ Composite geometry objects can be created using a <xref:System.Windows.Media.GeometryGroup>, a <xref:System.Windows.Media.CombinedGeometry>, or by calling the static <xref:System.Windows.Media.Geometry> method <xref:System.Windows.Media.Geometry.Combine%2A>.  
+  
+- The <xref:System.Windows.Media.CombinedGeometry> object and the <xref:System.Windows.Media.Geometry.Combine%2A> method performs a Boolean operation to combine the area defined by two geometries. <xref:System.Windows.Media.Geometry> objects that have no area are discarded. Only two <xref:System.Windows.Media.Geometry> objects can be combined (although these two geometries may also be composite geometries).  
+  
+- The <xref:System.Windows.Media.GeometryGroup> class creates an amalgamation of the <xref:System.Windows.Media.Geometry> objects it contains without combining their area. Any number of <xref:System.Windows.Media.Geometry> objects can be added to a <xref:System.Windows.Media.GeometryGroup>. For an example, see [Create a Composite Shape](how-to-create-a-composite-shape.md).  
+  
+ Because they do not perform a combine operation, using <xref:System.Windows.Media.GeometryGroup> objects provides performance benefits over using <xref:System.Windows.Media.CombinedGeometry> objects or the <xref:System.Windows.Media.Geometry.Combine%2A> method.  
+  
+<a name="combindgeometriessection"></a>
+## Combined Geometries  
+ The preceding section mentioned the <xref:System.Windows.Media.CombinedGeometry> object and the <xref:System.Windows.Media.Geometry.Combine%2A> method combine the area defined by the geometries they contain. The <xref:System.Windows.Media.GeometryCombineMode> enumeration specifies how the geometries are combined. The possible values for the <xref:System.Windows.Media.CombinedGeometry.GeometryCombineMode%2A> property are: <xref:System.Windows.Media.GeometryCombineMode.Union>, <xref:System.Windows.Media.GeometryCombineMode.Intersect>, <xref:System.Windows.Media.GeometryCombineMode.Exclude>, and <xref:System.Windows.Media.GeometryCombineMode.Xor>.  
+  
+ In the following example, a <xref:System.Windows.Media.CombinedGeometry> is defined with a combine mode of Union.  Both <xref:System.Windows.Media.CombinedGeometry.Geometry1%2A> and the <xref:System.Windows.Media.CombinedGeometry.Geometry2%2A> are defined as circles of the same radius, but with centers offset by 50.  
+  
+ [!code-xaml[GeometrySample#23](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/combininggeometriesexample.xaml#23)]  
+  
+ ![Results of the Union combine mode](./media/mil-task-combined-geometry-union.PNG "mil_task_combined_geometry_union")  
+  
+ In the following example, a <xref:System.Windows.Media.CombinedGeometry> is defined with a combine mode of <xref:System.Windows.Media.GeometryCombineMode.Xor>.  Both <xref:System.Windows.Media.CombinedGeometry.Geometry1%2A> and the <xref:System.Windows.Media.CombinedGeometry.Geometry2%2A> are defined as circles of the same radius, but with centers offset by 50.  
+  
+ [!code-xaml[GeometrySample#24](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/combininggeometriesexample.xaml#24)]  
+  
+ ![Results of the Xor combine mode](./media/mil-task-combined-geometry-xor.PNG "mil_task_combined_geometry_xor")  
+  
+ For additional examples, see [Create a Composite Shape](how-to-create-a-composite-shape.md) and [Create a Combined Geometry](how-to-create-a-combined-geometry.md).  
+  
+<a name="freezable_features"></a>
+## Freezable Features  
+ Because it inherits from the <xref:System.Windows.Freezable> class, the <xref:System.Windows.Media.Geometry> class  provide several special features: <xref:System.Windows.Media.Geometry> objects can be declared as [XAML Resources](/dotnet/desktop-wpf/fundamentals/xaml-resources-define), shared among multiple objects, made read-only to improve performance, cloned, and made thread-safe. For more information about the different features provided by <xref:System.Windows.Freezable> objects, see the [Freezable Objects Overview](../advanced/freezable-objects-overview.md).  
+  
+<a name="othergeometryfeatures"></a>
+## Other Geometry Features  
+ The <xref:System.Windows.Media.Geometry> class also provides useful utility methods, such as the following:  
+  
+- <xref:System.Windows.Media.Geometry.GetArea%2A> - Gets the area of the <xref:System.Windows.Media.Geometry>.  
+  
+- <xref:System.Windows.Media.Geometry.FillContains%2A> - Determines whether the Geometry contains another <xref:System.Windows.Media.Geometry>.  
+  
+- <xref:System.Windows.Media.Geometry.StrokeContains%2A> - Determines whether the stroke of a <xref:System.Windows.Media.Geometry> contains a specified point.  
+  
+ See the <xref:System.Windows.Media.Geometry> class for a complete listing of its methods.  
+  
+## See also
+
+- <xref:System.Windows.Media.Geometry>
+- <xref:System.Windows.Media.PathGeometry>
+- <xref:System.Windows.Shapes.Path>
+- <xref:System.Windows.Media.GeometryDrawing>
+- [2D Graphics and Imaging](../advanced/optimizing-performance-2d-graphics-and-imaging.md)
+- [Path Markup Syntax](path-markup-syntax.md)
+- [How-to Topics](geometries-how-to-topics.md)
+- [Animation Overview](animation-overview.md)
+- [Shapes and Basic Drawing in WPF Overview](shapes-and-basic-drawing-in-wpf-overview.md)
+- [Drawing Objects Overview](drawing-objects-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/graphics-how-to-topics.md

@@ -0,0 +1,33 @@
+---
+title: "Graphics How-to Topics"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "graphic effects [WPF]"
+  - "graphics [WPF], how-to topics"
+  - "visual effects [WPF]"
+ms.assetid: 959cb1cc-d26c-4bbc-b637-251091987288
+---
+# Graphics How-to Topics
+The following topics demonstrate how to use the graphic capabilities of the [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)].  
+  
+## In This Section  
+ [Animate a Rectangle](how-to-animate-a-rectangle.md)  
+ [Animate the Position of an Object by Using PointAnimation](how-to-animate-the-position-of-an-object-by-using-pointanimation.md)  
+ [Transform Points and Vectors](how-to-transform-points-and-vectors.md)  
+ [Extend Glass Frame Into a WPF Application](extend-glass-frame-into-a-wpf-application.md)  
+ [How to: Improve Rendering Performance by Caching an Element](how-to-improve-rendering-performance-by-caching-an-element.md)  
+ [How to: Use a Cached Element as a Brush](how-to-use-a-cached-element-as-a-brush.md)  
+  
+## See also
+
+- <xref:System.Windows.Shapes.Shape>
+- <xref:System.Windows.Media.Transform>
+- <xref:System.Windows.Media.Imaging.BitmapImage>
+- <xref:System.Windows.Media.Geometry>
+- <xref:System.Windows.Media.Drawing>
+- <xref:System.Windows.Media.Brush>
+- <xref:System.Windows.Media.Effects.BitmapEffect>
+- [Graphics and Multimedia](index.md)
+- [WPF Graphics Rendering Overview](wpf-graphics-rendering-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/graphics-rendering-registry-settings.md

@@ -0,0 +1,96 @@
+---
+title: "Graphics Rendering Registry Settings"
+description: Find out how to use registry settings for troubleshooting, debugging, and product support purposes in the Windows Presentation Foundation (WPF).
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "rendering graphics [WPF], registry settings"
+  - "rendering graphics [WPF]"
+  - "rendering graphics [WPF], troubleshooting"
+  - "troubleshooting graphics rendering [WPF]"
+  - "graphics [WPF], rendering"
+ms.assetid: f4b41b42-327d-407c-b398-3ed5f505df8b
+---
+# Graphics Rendering Registry Settings
+This topic provides an overview of the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] graphics rendering registry settings that affect [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] applications.  
+
+<a name="overview"></a>
+## When to Use Graphics Rendering Registry Settings  
+ These registry settings are provided for troubleshooting, debugging, and product support purposes. Because changes to the registry affect all [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] applications, your application should never alter these registry keys automatically, or during installation.  
+  
+<a name="xpdmandwddm"></a>
+## What are XPDM and WDDM?  
+ Some of the graphics rendering registry settings have different default values, depending on whether your video card uses an XPDM or WDDM driver. XPDM is the Microsoft Windows XP Display Driver Model and WDDM is the Windows Display Driver Model. WDDM is available on computers running Windows Vista and Windows 7. XPDM is available on computers running Windows Vista, Microsoft Windows XP, and Microsoft Windows Server 2003. For more information about WDDM, see [Windows Display Driver Model (WDDM) Design Guide](/windows-hardware/drivers/display/windows-vista-display-driver-model-design-guide).  
+  
+<a name="registry_settings"></a>
+## Registry Settings  
+ [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] provides four registry settings for controlling [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] rendering:  
+  
+|Setting|Description|  
+|-------------|-----------------|  
+|**Disable Hardware Acceleration Option**|Specifies whether hardware acceleration should be enabled.|  
+|**Maximum Multisample Value**|Specifies the degree of multisampling for antialiasing 3D content.|  
+|**Required Video Driver Date Setting**|Specifies whether the system disables hardware acceleration for drivers released before November 2004.|  
+|**Use Reference Rasterizer Option**|Specifies whether [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] should use the reference rasterizer.|  
+  
+ These settings can be accessed by any external configuration utility that knows how to reference the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] registry settings. These settings can also be created or modified by accessing the values directly by using the Windows Registry Editor.  
+  
+<a name="disablehardwareacceleration"></a>
+## Disable Hardware Acceleration Option  
+  
+|Registry key|Value type|  
+|------------------|----------------|  
+|`HKEY_CURRENT_USER\SOFTWARE\Microsoft\Avalon.Graphics\DisableHWAcceleration`|DWORD|  
+  
+ The **disable hardware acceleration option** enables you to turn off hardware acceleration for debugging and test purposes. When you see rendering artifacts in an application, try turning off hardware acceleration. If the artifact disappears, the problem might be with your video driver.  
+  
+ The **disable hardware acceleration option** is a DWORD value that is either 0 or 1. A value of 1 disables hardware acceleration. A value of 0 enables hardware acceleration, provided the system meets hardware acceleration requirements; for more information, see [Graphics Rendering Tiers](../advanced/graphics-rendering-tiers.md).  
+  
+<a name="maxmultisample"></a>
+## Maximum Multisample Value  
+  
+|Registry key|Value type|  
+|------------------|----------------|  
+|`HKEY_CURRENT_USER\SOFTWARE\Microsoft\Avalon.Graphics\MaxMultisampleType`|DWORD|  
+  
+ The **maximum multisample value** enables you to adjust the maximum amount of antialiasing of 3D content. Use this level to disable 3D antialiasing in Windows Vista.  
+  
+ The **maximum multisample value** is a DWORD value that ranges from 0 to 16. A value of 0 specifies that multisample antialiasing of 3D content should be disabled, and a value of 16 will attempt to use up to 16x multisample antialiasing, if supported by the video card. Beware that setting this registry key value on computers using XPDM drivers will cause applications to use a large amount of additional video memory, decrease the performance of 3D rendering, and has the potential to introduce rendering errors and stability problems.  
+  
+ When this registry key is not set, [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] defaults to 0 for XPDM drivers and 4 for WDDM drivers.  
+  
+<a name="requiredvideodriverdatesetting"></a>
+## Required Video Driver Date Setting  
+  
+|Registry key|Value type|  
+|------------------|----------------|  
+|`HKEY_CURRENT_USER\SOFTWARE\Microsoft\Avalon.Graphics\RequiredVideoDriverDate`|String|  
+  
+ In November, 2004, Microsoft released a new version of the driver testing guidelines; the drivers written after this date offer better stability. By default, [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] will use the hardware acceleration pipeline for these drivers and will fall back to software rendering for XPDM drivers published before this date.  
+  
+ The **required video driver date setting** enables you to specify an alternate minimum date for XPDM drivers. You should only specify a date earlier than November, 2004 if you are confident that your video driver is stable enough to support [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)].  
+  
+ The required video driver setting takes a string of the following format:  
+  
+| |  
+|-|  
+|*YYYY* `/` *MM* `/` *DD*|  
+  
+ Where *YYYY* is the four-digit year, *MM* is the two-digit month, and *DD* is the two digit day. When this value is unset, [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] uses November, 2004 as its required video driver date.  
+  
+<a name="usereferencerasterizeroption"></a>
+## Use Reference Rasterizer Option  
+  
+|Registry key|Value type|  
+|------------------|----------------|  
+|`HKEY_CURRENT_USER\SOFTWARE\Microsoft\Avalon.Graphics\UseReferenceRasterizer`|DWORD|  
+  
+ The **use reference rasterizer option** enables you to force [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] into a simulated hardware rendering mode for debugging: [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] goes into hardware mode, but uses the Microsoft Direct3D reference software rasterizer, d3dref9.dll, instead of an actual hardware device.  
+  
+ The reference rasterizer is very slow, but bypasses your video driver to avoid any rendering issues caused by driver problems. For this reason, you can use the reference rasterizer to determine if rendering issues are caused by the video driver. The d3dref9.dll file must be in a location where the application can access it, such as in any location in the system path or in the local directory of the application.  
+  
+ The **use reference rasterizer option** takes a DWORD value. A value of 0 indicates that the reference rasterizer is not used. Any other non-zero value forces [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] to use the reference rasterizer.  
+  
+## See also
+
+- [Graphics Rendering Tiers](../advanced/graphics-rendering-tiers.md)
+- [WPF Graphics Rendering Overview](wpf-graphics-rendering-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/graphics.md

@@ -0,0 +1,36 @@
+---
+title: "Graphics"
+ms.date: "03/30/2017"
+f1_keywords: 
+  - "AutoGeneratedOrientationPage"
+helpviewer_keywords: 
+  - "visual effects [WPF]"
+  - "graphics [WPF], effects"
+ms.assetid: 3bfc652e-91b7-4697-a4f4-83ff0e98327e
+---
+# Graphics
+[!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] offers integrated support for multimedia, vector graphics, animation, and content composition, making it easy for developers to build interesting user interfaces and content.  
+  
+## In This Section  
+ [Bitmap Effects](bitmap-effects.md)  
+ [Brushes](brushes.md)  
+ [Drawings](drawings.md)  
+ [Geometries](geometries.md)  
+ [Images](images.md)  
+ [Shapes](shapes.md)  
+ [Transformations](transformations.md)  
+ [Graphics Rendering Registry Settings](graphics-rendering-registry-settings.md)  
+ [How-to Topics](graphics-how-to-topics.md)  
+  
+## See also
+
+- <xref:System.Windows.Shapes.Shape>
+- <xref:System.Windows.Media.Transform>
+- <xref:System.Windows.Media.Imaging.BitmapImage>
+- <xref:System.Windows.Media.Geometry>
+- <xref:System.Windows.Media.Drawing>
+- <xref:System.Windows.Media.Brush>
+- <xref:System.Windows.Media.Effects.BitmapEffect>
+- [2D Graphics and Imaging](../advanced/optimizing-performance-2d-graphics-and-imaging.md)
+- [Graphics and Multimedia](index.md)
+- [WPF Graphics Rendering Overview](wpf-graphics-rendering-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/hit-testing-in-the-visual-layer.md

@@ -0,0 +1,143 @@
+---
+title: "Hit Testing in the Visual Layer"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "hit testing functionality [WPF]"
+  - "visual layer [WPF], hit testing functionality"
+ms.assetid: b1a64b61-14be-4d75-b89a-5c67bebb2c7b
+---
+# Hit Testing in the Visual Layer
+This topic provides an overview of hit testing functionality provided by the visual layer. Hit testing support allows you to determine whether a geometry or point value falls within the rendered content of a <xref:System.Windows.Media.Visual>, allowing you to implement user interface behavior such as a selection rectangle to select multiple objects.  
+
+<a name="hit_testing_scenarios"></a>
+## Hit Testing Scenarios  
+ The <xref:System.Windows.UIElement> class provides the <xref:System.Windows.UIElement.InputHitTest%2A> method, which allows you to hit test against an element using a given coordinate value. In many cases, the <xref:System.Windows.UIElement.InputHitTest%2A> method provides the desired functionality for implementing hit testing of elements. However, there are several scenarios in which you may need to implement hit testing at the visual layer.  
+  
+- Hit testing against non-<xref:System.Windows.UIElement> objects: This applies if you are hit testing non-<xref:System.Windows.UIElement> objects, such as <xref:System.Windows.Media.DrawingVisual> or graphics objects.  
+  
+- Hit testing using a geometry: This applies if you need to hit test using a geometry object rather than the coordinate value of a point.  
+  
+- Hit testing against multiple objects: This applies when you need to hit test against multiple objects, such as overlapping objects. You can get results for all visuals intersecting a geometry or point, not just the first one.  
+  
+- Ignoring <xref:System.Windows.UIElement> hit testing policy: This applies when you need to ignore the <xref:System.Windows.UIElement> hit testing policy, which takes into consideration such factors as whether an element is disabled or invisible.  
+  
+> [!NOTE]
+> For a complete code sample illustrating hit testing at the visual layer, see [Hit Test Using DrawingVisuals Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Visual%20Layer/DrawingVisual) and [Hit Test with Win32 Interoperation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Visual%20Layer/VisualsHitTesting).  
+  
+<a name="hit_testing_support"></a>
+## Hit Testing Support  
+ The purpose of the <xref:System.Windows.Media.VisualTreeHelper.HitTest%2A> methods in the <xref:System.Windows.Media.VisualTreeHelper> class is to determine whether a geometry or point coordinate value is within the rendered content of a given object, such as a control or graphic element. For example, you could use hit testing to determine whether a mouse click within the bounding rectangle of an object falls within the geometry of a circle. You can also choose to override the default implementation of hit testing to perform your own custom hit test calculations.  
+  
+ The following illustration shows the relationship between a non-rectangular object's region and its bounding rectangle.  
+  
+ ![Diagram of valid hit test region](./media/wcpsdk-mmgraphics-visuals-hittest-1.png "wcpsdk_mmgraphics_visuals_hittest_1")  
+Diagram of valid hit test region  
+  
+<a name="hit_testing_and_z-order"></a>
+## Hit Testing and Z-Order  
+ The [!INCLUDE[TLA#tla_winclient](../../../includes/tlasharptla-winclient-md.md)] visual layer supports hit testing against all objects under a point or geometry, not just the top-most object. Results are returned in z-order. However, the visual object that you pass as the parameter to the <xref:System.Windows.Media.VisualTreeHelper.HitTest%2A> method determines which portion of the visual tree that will be hit test. You can hit test against the entire visual tree, or any portion of it.  
+  
+ In the following illustration, the circle object is on top of both the square and triangle objects. If you are only interested in hit testing the visual object whose z-order value is top-most, you can set the visual hit test enumeration to return <xref:System.Windows.Media.HitTestResultBehavior.Stop> from the <xref:System.Windows.Media.HitTestResultCallback> to stop the hit test traversal after the first item.  
+  
+ ![Diagram of the z&#45;order of a visual tree](./media/wcpsdk-mmgraphics-visuals-hittest-2.png "wcpsdk_mmgraphics_visuals_hittest_2")  
+Diagram of the z-order of a visual tree  
+  
+ If you want to enumerate all visual objects under a specific point or geometry, return <xref:System.Windows.Media.HitTestResultBehavior.Continue> from the <xref:System.Windows.Media.HitTestResultCallback>. This means you can hit test for visual objects that are beneath other objects, even if they are wholly obscured. See the sample code in the section "Using a Hit Test Results Callback" for more information.  
+  
+> [!NOTE]
+> A visual object that is transparent can also be hit test.  
+  
+<a name="using_default_hit_testing"></a>
+## Using Default Hit Testing  
+ You can identify whether a point is within the geometry of a visual object, by using the <xref:System.Windows.Media.VisualTreeHelper.HitTest%2A> method to specify a visual object and a point coordinate value to test against. The visual object parameter identifies the starting point in the visual tree for the hit test search. If a visual object is found in the visual tree whose geometry contains the coordinate, it is set to the <xref:System.Windows.Media.HitTestResult.VisualHit%2A> property of a <xref:System.Windows.Media.HitTestResult> object. The <xref:System.Windows.Media.HitTestResult> is then returned from the <xref:System.Windows.Media.VisualTreeHelper.HitTest%2A> method. If the point is not contained with the visual sub-tree you are hit testing, <xref:System.Windows.Media.VisualTreeHelper.HitTest%2A> returns `null`.  
+  
+> [!NOTE]
+> Default hit testing always returns the top-most object in the z-order. In order to identify all visual objects, even those that may be partly or wholly obscured, use a hit test result callback.  
+  
+ The coordinate value you pass as the point parameter for the <xref:System.Windows.Media.VisualTreeHelper.HitTest%2A> method has to be relative to the coordinate space of the visual object you are hit testing against. For example, if you have nested visual objects defined at (100, 100) in the parent's coordinate space, then hit testing a child visual at (0, 0) is equivalent to hit testing at (100, 100) in the parent's coordinate space.  
+  
+ The following code shows how to set up mouse event handlers for a <xref:System.Windows.UIElement> object that is used to capture events used for hit testing.  
+  
+ [!code-csharp[HitTestingOverview#100](~/samples/snippets/csharp/VS_Snippets_Wpf/HitTestingOverview/CSharp/Window1.xaml.cs#100)]
+ [!code-vb[HitTestingOverview#100](~/samples/snippets/visualbasic/VS_Snippets_Wpf/HitTestingOverview/visualbasic/window1.xaml.vb#100)]  
+  
+### How the Visual Tree Affects Hit Testing  
+ The starting point in the visual tree determines which objects are returned during the hit test enumeration of objects. If you have multiple objects you want to hit test, the visual object used as the starting point in the visual tree must be the common ancestor of all objects of interest. For example, if you were interested in hit testing both the button element and drawing visual in the following diagram, you would have to set the starting point in the visual tree to the common ancestor of both. In this case, the canvas element is the common ancestor of both the button element and the drawing visual.  
+  
+ ![Diagram of a visual tree hierarchy](./media/wcpsdk-mmgraphics-visuals-overview-01.gif "wcpsdk_mmgraphics_visuals_overview_01")  
+Diagram of a visual tree hierarchy  
+  
+> [!NOTE]
+> The <xref:System.Windows.UIElement.IsHitTestVisible%2A> property gets or sets a value that declares whether a <xref:System.Windows.UIElement>-derived object can possibly be returned as a hit test result from some portion of its rendered content. This allows you to selectively alter the visual tree to determine which visual objects are involved in a hit test.  
+  
+<a name="using_a_hit_test_result_callback"></a>
+## Using a Hit Test Result Callback  
+ You can enumerate all visual objects in a visual tree whose geometry contains a specified coordinate value. This allows you to identify all visual objects, even those that may be partly or wholly obscured by other visual objects. To enumerate visual objects in a visual tree use the <xref:System.Windows.Media.VisualTreeHelper.HitTest%2A> method with a hit test callback function. The hit test callback function is called by the system when the coordinate value you specify is contained in a visual object.  
+  
+ During the hit test results enumeration, you should not perform any operation that modifies the visual tree. Adding or removing an object from the visual tree while it is being traversed can result in unpredictable behavior. You can safely modify the visual tree after the <xref:System.Windows.Media.VisualTreeHelper.HitTest%2A> method returns. You may want to provide a data structure, such as an <xref:System.Collections.ArrayList>, to store values during the hit test results enumeration.  
+  
+ [!code-csharp[HitTestingOverview#101](~/samples/snippets/csharp/VS_Snippets_Wpf/HitTestingOverview/CSharp/Window1.xaml.cs#101)]
+ [!code-vb[HitTestingOverview#101](~/samples/snippets/visualbasic/VS_Snippets_Wpf/HitTestingOverview/visualbasic/window1.xaml.vb#101)]  
+  
+ The hit test callback method defines the actions you perform when a hit test is identified on a particular visual object in the visual tree. After you perform the actions, you return a <xref:System.Windows.Media.HitTestResultBehavior> value that determines whether to continue the enumeration of any other visual objects or not.  
+  
+ [!code-csharp[HitTestingOverview#102](~/samples/snippets/csharp/VS_Snippets_Wpf/HitTestingOverview/CSharp/Window1.xaml.cs#102)]
+ [!code-vb[HitTestingOverview#102](~/samples/snippets/visualbasic/VS_Snippets_Wpf/HitTestingOverview/visualbasic/window1.xaml.vb#102)]  
+  
+> [!NOTE]
+> The order of enumeration of hit visual objects is by z-order. The visual object at the top-most z-order level is the first object enumerated. Any other visual objects enumerated are at decreasing z-order level. This order of enumeration corresponds to the rendering order of the visuals.  
+  
+ You can stop the enumeration of visual objects at any time in the hit test callback function by returning <xref:System.Windows.Media.HitTestResultBehavior.Stop>.  
+  
+ [!code-csharp[HitTestingOverview#103](~/samples/snippets/csharp/VS_Snippets_Wpf/HitTestingOverview/CSharp/Window1.xaml.cs#103)]
+ [!code-vb[HitTestingOverview#103](~/samples/snippets/visualbasic/VS_Snippets_Wpf/HitTestingOverview/visualbasic/window1.xaml.vb#103)]  
+  
+<a name="using_a_hit_test_filter_callback"></a>
+## Using a Hit Test Filter Callback  
+ You can use an optional hit test filter to restrict the objects that are passed on to the hit test results. This allows you to ignore parts of the visual tree that you are not interested in processing in your hit test results. To implement a hit test filter, you define a hit test filter callback function and pass it as a parameter value when you call the <xref:System.Windows.Media.VisualTreeHelper.HitTest%2A> method.  
+  
+ [!code-csharp[HitTestingOverview#104](~/samples/snippets/csharp/VS_Snippets_Wpf/HitTestingOverview/CSharp/Window1.xaml.cs#104)]
+ [!code-vb[HitTestingOverview#104](~/samples/snippets/visualbasic/VS_Snippets_Wpf/HitTestingOverview/visualbasic/window1.xaml.vb#104)]  
+  
+ If you do not want to supply the optional hit test filter callback function, pass a `null` value as its parameter for the <xref:System.Windows.Media.VisualTreeHelper.HitTest%2A> method.  
+  
+ [!code-csharp[HitTestingOverview#105](~/samples/snippets/csharp/VS_Snippets_Wpf/HitTestingOverview/CSharp/Window1.xaml.cs#105)]
+ [!code-vb[HitTestingOverview#105](~/samples/snippets/visualbasic/VS_Snippets_Wpf/HitTestingOverview/visualbasic/window1.xaml.vb#105)]  
+  
+ ![Pruning a visual tree using a hit test filter](./media/filteredvisualtree-01.png "FilteredVisualTree_01")  
+Pruning a visual tree  
+  
+ The hit test filter callback function allows you to enumerate through all the visuals whose rendered content contains the coordinates you specify. However, you may want to ignore certain branches of the visual tree that you are not interested in processing in your hit test results callback function. The return value of the hit test filter callback function determines what type of action the enumeration of the visual objects should take. For example, if you return the value, <xref:System.Windows.Media.HitTestFilterBehavior.ContinueSkipSelfAndChildren>, you can remove the current visual object and its children from the hit test results enumeration. This means that the hit test results callback function will not see these objects in its enumeration. Pruning the visual tree of objects decreases the amount of processing during the hit test results enumeration pass. In the following code example, the filter skips labels and their descendants and hit tests everything else.  
+  
+ [!code-csharp[HitTestingOverview#106](~/samples/snippets/csharp/VS_Snippets_Wpf/HitTestingOverview/CSharp/Window1.xaml.cs#106)]
+ [!code-vb[HitTestingOverview#106](~/samples/snippets/visualbasic/VS_Snippets_Wpf/HitTestingOverview/visualbasic/window1.xaml.vb#106)]  
+  
+> [!NOTE]
+> The hit test filter callback will sometimes be called in cases where the hit test results callback is not called.  
+  
+<a name="overriding_default_hit_testing"></a>
+## Overriding Default Hit Testing  
+ You can override a visual object’s default hit testing support by overriding the <xref:System.Windows.Media.Visual.HitTestCore%2A> method. This means that when you invoke the <xref:System.Windows.Media.VisualTreeHelper.HitTest%2A> method, your overridden implementation of <xref:System.Windows.Media.Visual.HitTestCore%2A> is called. Your overridden method is called when a hit test falls within the bounding rectangle of the visual object, even if the coordinate falls outside the rendered content of the visual object.  
+  
+ [!code-csharp[HitTestingOverview#107](~/samples/snippets/csharp/VS_Snippets_Wpf/HitTestingOverview/CSharp/Window1.xaml.cs#107)]
+ [!code-vb[HitTestingOverview#107](~/samples/snippets/visualbasic/VS_Snippets_Wpf/HitTestingOverview/visualbasic/window1.xaml.vb#107)]  
+  
+ There may be times when you want to hit test against both the bounding rectangle and the rendered content of a visual object. By using the `PointHitTestParameters` parameter value in your overridden <xref:System.Windows.Media.Visual.HitTestCore%2A> method as the parameter to the base method <xref:System.Windows.Media.Visual.HitTestCore%2A>, you can perform actions based on a hit of the bounding rectangle of a visual object, and then perform a second hit test against the rendered content of the visual object.  
+  
+ [!code-csharp[HitTestingOverview#108](~/samples/snippets/csharp/VS_Snippets_Wpf/HitTestingOverview/CSharp/Window1.xaml.cs#108)]
+ [!code-vb[HitTestingOverview#108](~/samples/snippets/visualbasic/VS_Snippets_Wpf/HitTestingOverview/visualbasic/window1.xaml.vb#108)]  
+  
+## See also
+
+- <xref:System.Windows.Media.VisualTreeHelper.HitTest%2A>
+- <xref:System.Windows.Media.HitTestResult>
+- <xref:System.Windows.Media.HitTestResultCallback>
+- <xref:System.Windows.Media.HitTestFilterCallback>
+- <xref:System.Windows.UIElement.IsHitTestVisible%2A>
+- [Hit Test Using DrawingVisuals Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Visual%20Layer/DrawingVisual)
+- [Hit Test with Win32 Interoperation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Visual%20Layer/VisualsHitTesting)
+- [Hit Test Geometry in a Visual](how-to-hit-test-geometry-in-a-visual.md)
+- [Hit Test Using a Win32 Host Container](how-to-hit-test-using-a-win32-host-container.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-accelerate-or-decelerate-an-animation.md

@@ -0,0 +1,18 @@
+---
+title: "How to: Accelerate or Decelerate an Animation"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "decelerating animation [WPF]"
+  - "accelerating animation [WPF]"
+  - "animation [WPF], accelerating"
+  - "animation [WPF], decelerating"
+ms.assetid: 4f383b2c-f94d-4a4e-9a06-f56f5dae95f9
+---
+# How to: Accelerate or decelerate an animation
+
+This example demonstrates how to make an animation accelerate and decelerate over time. In the following example, several rectangles are animated by animations with different <xref:System.Windows.Media.Animation.Timeline.AccelerationRatio%2A> and <xref:System.Windows.Media.Animation.Timeline.DecelerationRatio%2A> settings.  
+  
+## Example  
+ [!code-xaml[timingbehaviors_snip#1](~/samples/snippets/csharp/VS_Snippets_Wpf/timingbehaviors_snip/CSharp/AccelDecelExample.xaml#1)]  
+  
+ Code has been omitted from this example. For the complete code, see the [Animation Timing Behavior (C#)](https://github.com/dotnet/docs/tree/master/samples/snippets/csharp/VS_Snippets_Wpf/timingbehaviors_procedural_snip/CSharp) or [Animation Timing Behavior (Visual Basic)](https://github.com/dotnet/docs/tree/master/samples/snippets/visualbasic/VS_Snippets_Wpf/timingbehaviors_procedural_snip/visualbasic).

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-accumulate-animation-values-during-repeat-cycles.md

@@ -0,0 +1,35 @@
+---
+title: "How to: Accumulate Animation Values During Repeat Cycles"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "accumulating animation values across repeating cycles [WPF]"
+  - "animation [WPF], accumulating values across repeating cycles"
+ms.assetid: 548df369-c7cc-4dab-b569-08b95ced2e7e
+---
+# How to: Accumulate Animation Values During Repeat Cycles
+This example shows how to use the <xref:System.Windows.Media.Animation.DoubleAnimation.IsCumulative%2A> property to accumulate animation values across repeating cycles.  
+  
+## Example  
+ Use the <xref:System.Windows.Media.Animation.DoubleAnimation.IsCumulative%2A> property to accumulate base values of an animation across repeating cycles. For example, if you set an animation to repeat 9 times (<xref:System.Windows.Media.Animation.Timeline.RepeatBehavior%2A> = "9x") and you set the property to animate between 10 and 15 (From = 10 To = 15), the property animates from 10 to 15 during the first cycle, from 15 to 20 during the second cycle, from 20 to 25 during the third cycle, and so on. Hence, each animation cycle uses the ending animation value from the previous animation cycle as its base value.  
+  
+ You can use the `IsCumulative` property with most basic animations and most key frame animations. For more information, see [Animation Overview](animation-overview.md) and [Key-Frame Animations Overview](key-frame-animations-overview.md).  
+  
+ The following example shows this behavior by animating the width of four rectangles. The example:  
+  
+- Animates the first rectangle with <xref:System.Windows.Media.Animation.DoubleAnimation> and sets the <xref:System.Windows.Media.Animation.DoubleAnimation.IsCumulative%2A> property to `true`.  
+  
+- Animates the second rectangle with <xref:System.Windows.Media.Animation.DoubleAnimation> and sets the <xref:System.Windows.Media.Animation.DoubleAnimation.IsCumulative%2A> property to the default value of `false`.  
+  
+- Animates the third rectangle with <xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames> and sets the <xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames.IsCumulative%2A> property to `true`.  
+  
+- Animates the last rectangle with <xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames> and sets the <xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames.IsCumulative%2A> property to `false`.  
+  
+ [!code-xaml[timingbehaviors_snip#IsCumulativeWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/timingbehaviors_snip/CSharp/IsCumulativeExample.xaml#iscumulativewholepage)]  
+  
+## See also
+
+- [Add an Animation Output Value to an Animation Starting Value](how-to-add-an-animation-output-value-to-an-animation-starting-value.md)
+- [Repeat an Animation](how-to-repeat-an-animation.md)
+- [Animation Overview](animation-overview.md)
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [How-to Topics](animation-and-timing-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-add-an-animation-output-value-to-an-animation-starting-value.md

@@ -0,0 +1,23 @@
+---
+title: "How to: Add an Animation Output Value to an Animation Starting Value"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "animation [WPF]"
+ms.assetid: b89a82be-b03d-481e-a8d3-cc513d09ca00
+---
+# How to: Add an Animation Output Value to an Animation Starting Value
+This example shows how to add an animation output value to an animation starting value.  
+  
+## Example  
+ The <xref:System.Windows.Media.Animation.DoubleAnimation.IsAdditive%2A> property specifies whether you want the output value of an animation added to the starting value (base value) of an animated property. You can use the <xref:System.Windows.Media.Animation.DoubleAnimation.IsAdditive%2A> property with most basic animations and most key frame animations. For more information, see [Animation Overview](animation-overview.md) and [Key-Frame Animations Overview](key-frame-animations-overview.md).  
+  
+ The following example shows the effect of using the <xref:System.Windows.Media.Animation.DoubleAnimation.IsAdditive%2A?displayProperty=nameWithType> property with <xref:System.Windows.Media.Animation.DoubleAnimation> and using the <xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames.IsAdditive%2A?displayProperty=nameWithType> property with <xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames>.  
+  
+ [!code-xaml[timingbehaviors_snip#IsAdditiveWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/timingbehaviors_snip/CSharp/IsAdditiveExample.xaml#isadditivewholepage)]  
+  
+## See also
+
+- [Accumulate Animation Values During Repeat Cycles](how-to-accumulate-animation-values-during-repeat-cycles.md)
+- [Animation Overview](animation-overview.md)
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Animation and Timing How-to Topics](animation-and-timing-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-3-d-translations.md

@@ -0,0 +1,30 @@
+---
+title: "How to: Animate 3D Translations"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "animation [WPF], 3D translations"
+  - "3D translations [WPF], animating"
+ms.assetid: d4eece1f-0cd2-4a2c-8370-293354c380e4
+---
+# How to: Animate 3D Translations
+This topic demonstrates how to animate a translation transformation set on a 3D model.  
+  
+ The code below shows the application of a <xref:System.Windows.Media.Media3D.TranslateTransform3D> object to the <xref:System.Windows.Media.Media3D.Model3D.Transform%2A> property of a <xref:System.Windows.Media.Media3D.GeometryModel3D>.  
+  
+ [!code-xaml[Animation3DGallery_snip#Translation3DAnimationInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/Translation3DAnimationExample.xaml#translation3danimationinline1)]  
+  
+ The <xref:System.Windows.Media.Media3D.TranslateTransform3D.OffsetX%2A> property of this <xref:System.Windows.Media.Media3D.TranslateTransform3D> object is animated using the code below.  
+  
+ [!code-xaml[Animation3DGallery_snip#Translation3DAnimationInline2](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/Translation3DAnimationExample.xaml#translation3danimationinline2)]  
+  
+## Example  
+ The following code shows the entire sample.  
+  
+ [!code-xaml[Animation3DGallery_snip#Translation3DAnimationExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/Translation3DAnimationExample.xaml#translation3danimationexamplewholepage)]  
+  
+## See also
+
+- [Animation Overview](animation-overview.md)
+- [Create a 3D Scene](how-to-create-a-3-d-scene.md)
+- [3D Graphics Overview](3-d-graphics-overview.md)
+- [Transforms Overview](transforms-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-3-d-rotation-using-key-frames.md

@@ -0,0 +1,29 @@
+---
+title: "How to: Animate a 3D Rotation Using Key Frames"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "animation [WPF], 3D translations [WPF], with key frames (Rotation3DAnimation)"
+  - "key frames [WPF], Rotation3DAnimation"
+  - "3D translations [WPF], animating [WPF], with key frames (Rotation3DAnimation)"
+ms.assetid: 6f671b95-7f30-4836-9a4f-aeb7dc30121f
+---
+# How to: Animate a 3D Rotation Using Key Frames
+In the following example, <xref:System.Windows.Media.Animation.Rotation3DAnimationUsingKeyFrames> is used to make a 3D object rotate while its axis of rotation animates resulting in a "wobble". This animation uses the following key frames:  
+  
+1. <xref:System.Windows.Media.Animation.LinearRotation3DKeyFrame> is used to create a smooth, linear interpolation between values.  
+  
+2. <xref:System.Windows.Media.Animation.DiscreteRotation3DKeyFrame> is used to create sudden "jumps" between values (no interpolation).  
+  
+3. <xref:System.Windows.Media.Animation.SplineRotation3DKeyFrame> is used to create a variable transition between values depending on the <xref:System.Windows.Media.Animation.SplineRotation3DKeyFrame.KeySpline%2A> property. In the example below, this part of the animation starts off slow but toward the end of the time segment, speeds up exponentially.  
+  
+## Example  
+ [!code-xaml[Animation3DGallery_snip#Rotation3DAnimationUsingKeyFramesExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/Rotation3DAnimationUsingKeyFramesExample.xaml#rotation3danimationusingkeyframesexamplewholepage)]  
+  
+## See also
+
+- [3D Graphics Overview](3-d-graphics-overview.md)
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Animate a 3D Rotation Using Storyboards](how-to-animate-a-3-d-rotation-using-storyboards.md)
+- [Animate a 3D Rotation Using Rotation3DAnimation](how-to-animate-a-3-d-rotation-using-rotation3danimation.md)
+- [Animate a 3D Rotation Using Quaternions](how-to-animate-a-3-d-rotation-using-quaternions.md)
+- [Animate a 3D Rotation Using Key Frames (QuaternionAnimationUsingKeyFrames)](animate-a-3-d-rotation-quaternionanimationusingkeyframes.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-3-d-rotation-using-quaternions.md

@@ -0,0 +1,33 @@
+---
+title: "How to: Animate a 3D Rotation Using Quaternions"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "quaternions [WPF]"
+  - "animation [WPF], 3D translations [WPF], with quaternions"
+  - "3D translations [WPF], animating [WPF], with quaternions"
+ms.assetid: adca9cb1-066b-4de8-abbb-6b4007579ee7
+---
+# How to: Animate a 3D Rotation Using Quaternions
+This example shows how to animate a rotation of a 3D object using quaternions.  
+  
+ The code below shows a <xref:System.Windows.Media.Media3D.QuaternionRotation3D> used as the value for the <xref:System.Windows.Media.Media3D.RotateTransform3D.Rotation%2A> property of a <xref:System.Windows.Media.Media3D.RotateTransform3D>.  
+  
+ [!code-xaml[Animation3DGallery_snip#QuaternionAnimationExampleInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/QuaternionAnimationExample.xaml#quaternionanimationexampleinline1)]  
+  
+ This <xref:System.Windows.Media.Media3D.QuaternionRotation3D> is animated with a <xref:System.Windows.Media.Animation.QuaternionAnimation> within a <xref:System.Windows.Media.Animation.Storyboard> using the code below.  
+  
+ [!code-xaml[Animation3DGallery_snip#QuaternionAnimationExampleInline2](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/QuaternionAnimationExample.xaml#quaternionanimationexampleinline2)]  
+  
+## Example  
+ The following code shows the entire sample.  
+  
+ [!code-xaml[Animation3DGallery_snip#QuaternionAnimationExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/QuaternionAnimationExample.xaml#quaternionanimationexamplewholepage)]  
+  
+## See also
+
+- [Animation Overview](animation-overview.md)
+- [Create a 3D Scene](how-to-create-a-3-d-scene.md)
+- [3D Graphics Overview](3-d-graphics-overview.md)
+- [Transforms Overview](transforms-overview.md)
+- [Animate a 3D Rotation Using Storyboards](how-to-animate-a-3-d-rotation-using-storyboards.md)
+- [Animate a 3D Rotation Using Rotation3DAnimation](how-to-animate-a-3-d-rotation-using-rotation3danimation.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-3-d-rotation-using-rotation3danimation.md

@@ -0,0 +1,22 @@
+---
+title: "How to: Animate a 3D Rotation Using Rotation3DAnimation"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "3D translations [WPF], animating [WPF], with Rotation3DAnimation"
+  - "Rotation3DAnimation [WPF]"
+  - "animation [WPF], 3D translations [WPF], with Rotation3DAnimation"
+ms.assetid: a92223ec-b634-4f5e-8e79-d33bc43ecfb3
+---
+# How to: Animate a 3D Rotation Using Rotation3DAnimation
+The following example shows how to make a 3D object rotate while it "wobbles" by using <xref:System.Windows.Media.Animation.Rotation3DAnimation> to animate the <xref:System.Windows.Media.Media3D.RotateTransform3D.Rotation%2A> property of the <xref:System.Windows.Media.Media3D.RotateTransform3D> object applied to the 3D object.  
+  
+## Example  
+ [!code-xaml[Animation3DGallery_snip#Rotation3DAnimationExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/Rotation3DAnimationExample.xaml#rotation3danimationexamplewholepage)]  
+  
+## See also
+
+- [3D Graphics Overview](3-d-graphics-overview.md)
+- [Animate a 3D Rotation Using Key Frames (Rotation3DAnimationUsingKeyFrames)](how-to-animate-a-3-d-rotation-using-key-frames.md)
+- [Animate a 3D Rotation Using Storyboards](how-to-animate-a-3-d-rotation-using-storyboards.md)
+- [Animate a 3D Rotation Using Quaternions](how-to-animate-a-3-d-rotation-using-quaternions.md)
+- [Animation Overview](animation-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-3-d-rotation-using-storyboards.md

@@ -0,0 +1,21 @@
+---
+title: "How to: Animate a 3D Rotation Using Storyboards"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "Storyboards [WPF]"
+  - "3D translations [WPF], animating [WPF], with Storyboards"
+  - "animation [WPF], 3D translations [WPF], with Storyboards"
+ms.assetid: 1020e44e-e21e-49a8-be53-53cbc1910e83
+---
+# How to: Animate a 3D Rotation Using Storyboards
+The following example shows how to make a 3D object rotate while it "wobbles" by animating the <xref:System.Windows.Media.Media3D.AxisAngleRotation3D.Angle%2A> and <xref:System.Windows.Media.Media3D.AxisAngleRotation3D.Axis%2A> properties of an <xref:System.Windows.Media.Media3D.AxisAngleRotation3D> object. This <xref:System.Windows.Media.Media3D.AxisAngleRotation3D> object specifies the rotation transform of the 3D object and so animating its properties creates the desire rotation effect. Within the Storyboard, <xref:System.Windows.Media.Animation.DoubleAnimation> is used to animate the <xref:System.Windows.Media.Media3D.AxisAngleRotation3D.Angle%2A> property while <xref:System.Windows.Media.Animation.Vector3DAnimation> is used to animate the <xref:System.Windows.Media.Media3D.AxisAngleRotation3D.Axis%2A> property.  
+  
+## Example  
+ [!code-xaml[Animation3DGallery_snip#Rotate3DUsingAxisAngleRotation3DExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/Rotat3DUsingAxisAngleRotation3DExample.xaml#rotate3dusingaxisanglerotation3dexamplewholepage)]  
+  
+## See also
+
+- [Animate a 3D Rotation Using Rotation3DAnimation](how-to-animate-a-3-d-rotation-using-rotation3danimation.md)
+- [Animate a 3D Rotation Using Key Frames (Rotation3DAnimationUsingKeyFrames)](how-to-animate-a-3-d-rotation-using-key-frames.md)
+- [3D Graphics Overview](3-d-graphics-overview.md)
+- [Storyboards Overview](storyboards-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-boolean-by-using-key-frames.md

@@ -0,0 +1,31 @@
+---
+title: "How to: Animate a Boolean by Using Key Frames"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "Booleans [WPF], animating with key frames"
+  - "animation [WPF], Booleans with key frames"
+  - "key frames [WPF], animating Booleans with"
+ms.assetid: 4b0fac96-6231-4fcf-9775-4dd673ddc785
+---
+# How to: Animate a Boolean by Using Key Frames
+This example shows how to animate the Boolean property value of a <xref:System.Windows.Controls.Button> control by using key frames.  
+  
+## Example  
+ The following example uses the <xref:System.Windows.Media.Animation.BooleanAnimationUsingKeyFrames> class to animate the <xref:System.Windows.UIElement.IsEnabled%2A> property of a <xref:System.Windows.Controls.Button> control. All the key frames in this example use an instance of the <xref:System.Windows.Media.Animation.DiscreteBooleanKeyFrame> class. Discrete key frames like <xref:System.Windows.Media.Animation.DiscreteBooleanKeyFrame> create sudden jumps between values, that is, the movement of the animation is jerky.  
+  
+ [!code-csharp[keyframes_snip#BooleanAnimationUsingKeyFramesWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/keyframes_snip/CSharp/BooleanAnimationUsingKeyFramesExample.cs#booleananimationusingkeyframeswholepage)]
+ [!code-vb[keyframes_snip#BooleanAnimationUsingKeyFramesWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/keyframes_snip/visualbasic/booleananimationusingkeyframesexample.vb#booleananimationusingkeyframeswholepage)]
+ [!code-xaml[keyframes_snip#BooleanAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/BooleanAnimationUsingKeyFramesExample.xaml#booleananimationusingkeyframeswholepage)]  
+  
+ For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.BooleanAnimationUsingKeyFrames>
+- <xref:System.Windows.UIElement.IsEnabled%2A>
+- <xref:System.Windows.Controls.Button>
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-double-by-using-key-frames.md

@@ -0,0 +1,41 @@
+---
+title: "How to: Animate a Double by Using Key Frames"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "Doubles [WPF], animating with key frames"
+  - "animation [WPF], Doubles with key frames"
+  - "key frames [WPF], animating Doubles with"
+ms.assetid: 3a1a7dba-7694-4907-8a2f-3408baebfa82
+---
+# How to: Animate a Double by Using Key Frames
+This example shows how to animate the value of a property that takes a <xref:System.Double> by using key frames.  
+  
+## Example  
+ The following example moves a rectangle across a screen. The example uses the <xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames> class to animate the <xref:System.Windows.Media.TranslateTransform.X%2A> property of a <xref:System.Windows.Media.TranslateTransform> applied to a <xref:System.Windows.Shapes.Rectangle>. This animation, which repeats indefinitely, uses three key frames in the following manner:  
+  
+1. During the first three seconds, uses an instance of the <xref:System.Windows.Media.Animation.LinearDoubleKeyFrame> class to move the rectangle along a path at a steady rate from its starting position to the 500 position. Linear key frames like <xref:System.Windows.Media.Animation.LinearDoubleKeyFrame> create a smooth linear transition between values.  
+  
+2. At the end of the fourth second, uses an instance of the <xref:System.Windows.Media.Animation.DiscreteDoubleKeyFrame> class to suddenly move the rectangle to the next position. Discrete key frames like <xref:System.Windows.Media.Animation.DiscreteDoubleKeyFrame> create sudden jumps between values. In this example, the rectangle is at the starting position and then suddenly appears at the 500 position.  
+  
+3. In the final two seconds, uses an instance of the <xref:System.Windows.Media.Animation.SplineDoubleKeyFrame> class to move the rectangle back to its starting position. Spline key frames like <xref:System.Windows.Media.Animation.SplineDoubleKeyFrame> create a variable transition between values according to the value of the <xref:System.Windows.Media.Animation.SplineDoubleKeyFrame.KeySpline%2A> property. In this example, the rectangle begins by moving slowly and then speeds up exponentially toward the end of the time segment.  
+  
+ [!code-csharp[keyframes_snip#AltDoubleAnimationUsingKeyFramesWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/keyframes_snip/CSharp/AltDoubleAnimationUsingKeyFramesExample.cs#altdoubleanimationusingkeyframeswholepage)]
+ [!code-vb[keyframes_snip#AltDoubleAnimationUsingKeyFramesWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/keyframes_snip/visualbasic/altdoubleanimationusingkeyframesexample.vb#altdoubleanimationusingkeyframeswholepage)]
+ [!code-xaml[keyframes_snip#AltDoubleAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/AltDoubleAnimationUsingKeyFramesExample.xaml#altdoubleanimationusingkeyframeswholepage)]  
+  
+ For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).  
+  
+ For consistency with other animation examples, the code versions of this example use a <xref:System.Windows.Media.Animation.Storyboard> object to apply the <xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames>. Alternatively, when applying a single animation in code, it is simpler to use the <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A> method instead of using a <xref:System.Windows.Media.Animation.Storyboard>. For an example, see [Animate a Property Without Using a Storyboard](how-to-animate-a-property-without-using-a-storyboard.md).  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames>
+- <xref:System.Windows.Shapes.Rectangle>
+- <xref:System.Windows.Media.Animation.LinearDoubleKeyFrame>
+- <xref:System.Windows.Media.Animation.DiscreteDoubleKeyFrame>
+- <xref:System.Windows.Media.Animation.SplineDoubleKeyFrame>
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-matrix-by-using-key-frames.md

@@ -0,0 +1,36 @@
+---
+title: "How to: Animate a Matrix by Using Key Frames"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "animation [WPF], Matrix properties with key frames"
+  - "Matrix properties [WPF], animating with key frames"
+  - "key frames [WPF], animating Matrix properties with"
+ms.assetid: b851a4c7-ecb1-420e-9203-83e7afd037fd
+---
+# How to: Animate a Matrix by Using Key Frames
+This example shows how to animate the <xref:System.Windows.Media.MatrixTransform.Matrix%2A> property of a <xref:System.Windows.Media.MatrixTransform> by using key frames.  
+  
+## Example  
+ The following example uses the <xref:System.Windows.Media.Animation.MatrixAnimationUsingKeyFrames> class to animate the <xref:System.Windows.Media.MatrixTransform.Matrix%2A> property of a <xref:System.Windows.Media.MatrixTransform>. The example uses the <xref:System.Windows.Media.MatrixTransform> object to transform the appearance and position of a <xref:System.Windows.Controls.Button>.  
+  
+ This animation uses the <xref:System.Windows.Media.Animation.DiscreteMatrixKeyFrame> class to create two key frames and does the following with them:  
+  
+1. Animates the first <xref:System.Windows.Media.Matrix> during the first 0.2 seconds. The example changes the <xref:System.Windows.Media.Matrix.M11%2A> and <xref:System.Windows.Media.Matrix.M12%2A> properties of the <xref:System.Windows.Media.Matrix>. This change causes the button to stretch and become skewed. The example also changes the <xref:System.Windows.Media.Matrix.OffsetX%2A> and <xref:System.Windows.Media.Matrix.OffsetY%2A> properties so that the button changes position.  
+  
+2. Animates the second <xref:System.Windows.Media.Matrix> at 1.0 seconds. The button moves to another position while the button is no longer skewed or stretched.  
+  
+3. Repeats the animation indefinitely.  
+  
+> [!NOTE]
+> Key frames that derive from the <xref:System.Windows.Media.Animation.DiscreteMatrixKeyFrame> object create sudden jumps between values, that is, the movement of the animation is jerky.  
+  
+ [!code-xaml[keyframes_snip#MatrixAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/MatrixAnimationUsingKeyFramesExample.xaml#matrixanimationusingkeyframeswholepage)]  
+  
+ For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).  
+  
+## See also
+
+- <xref:System.Windows.Media.MatrixTransform.Matrix%2A>
+- <xref:System.Windows.Media.MatrixTransform>
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-point-by-using-key-frames.md

@@ -0,0 +1,39 @@
+---
+title: "How to: Animate a Point by Using Key Frames"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "key frames [WPF], animating Points with"
+  - "Points [WPF], animating with key frames"
+  - "animation [WPF], Points with key frames"
+ms.assetid: d2e2ef10-0773-4133-856e-d41c09f60ded
+---
+# How to: Animate a Point by Using Key Frames
+This example shows how to use the <xref:System.Windows.Media.Animation.PointAnimationUsingKeyFrames> class to animate a <xref:System.Windows.Point>.  
+  
+## Example  
+ The following example moves an ellipse along a triangular path. The example uses the <xref:System.Windows.Media.Animation.PointAnimationUsingKeyFrames> class to animate the <xref:System.Windows.Media.EllipseGeometry.Center%2A> property of an <xref:System.Windows.Media.EllipseGeometry>. This animation uses three key frames in the following manner:  
+  
+1. During the first half second, uses an instance of the <xref:System.Windows.Media.Animation.LinearPointKeyFrame> class to move the ellipse along a path at a steady rate from its starting position. Linear key frames like <xref:System.Windows.Media.Animation.LinearPointKeyFrame> create a smooth linear interpolation between values.  
+  
+2. During the end of the next half second, uses an instance of the <xref:System.Windows.Media.Animation.DiscretePointKeyFrame> class to suddenly move the ellipse along the path to the next position. Discrete key frames like <xref:System.Windows.Media.Animation.DiscretePointKeyFrame> create sudden jumps between values.  
+  
+3. During the final two seconds, uses an instance of the <xref:System.Windows.Media.Animation.SplinePointKeyFrame> class to move the ellipse back to its starting position. Spline key frames like <xref:System.Windows.Media.Animation.SplinePointKeyFrame> create a variable transition between values according to the values of the <xref:System.Windows.Media.Animation.SplinePointKeyFrame.KeySpline%2A> property. In this example, the animation begins slowly and speeds up exponentially toward the end of the time segment.  
+  
+ [!code-csharp[keyframes_snip#PointAnimationUsingKeyFramesWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/keyframes_snip/CSharp/PointAnimationUsingKeyFramesExample.cs#pointanimationusingkeyframeswholepage)]
+ [!code-vb[keyframes_snip#PointAnimationUsingKeyFramesWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/keyframes_snip/visualbasic/pointanimationusingkeyframesexample.vb#pointanimationusingkeyframeswholepage)]
+ [!code-xaml[keyframes_snip#PointAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/PointAnimationUsingKeyFramesExample.xaml#pointanimationusingkeyframeswholepage)]  
+  
+ For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).  
+  
+ For consistency with other animation examples, the code versions of this example use a <xref:System.Windows.Media.Animation.Storyboard> object to apply the <xref:System.Windows.Media.Animation.PointAnimationUsingKeyFrames>. However, when applying a single animation in code, it's simpler to use the <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A> method instead of using a <xref:System.Windows.Media.Animation.Storyboard>. For an example, see [Animate a Property Without Using a Storyboard](how-to-animate-a-property-without-using-a-storyboard.md).  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.PointAnimationUsingKeyFrames>
+- <xref:System.Windows.Media.EllipseGeometry.Center%2A?displayProperty=nameWithType>
+- <xref:System.Windows.Media.EllipseGeometry>
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-property-by-using-a-storyboard.md

@@ -0,0 +1,35 @@
+---
+title: "How to: Animate a Property by Using a Storyboard"
+description: Enliven your user interface with animations and storyboards for properties in Windows Presentation Foundation (WPF). 
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "animation [WPF], Storyboards"
+  - "Storyboards [WPF], animation"
+ms.assetid: f4a314e9-1da2-4367-85fc-1232487efa7a
+---
+# How to: Animate a Property by Using a Storyboard
+This example shows how to use a <xref:System.Windows.Media.Animation.Storyboard> to animate properties. To animate a property by using a <xref:System.Windows.Media.Animation.Storyboard>, create an animation for each property that you want to animate and also create a <xref:System.Windows.Media.Animation.Storyboard> to contain the animations.  
+  
+ The type of property determines the type of animation to use. For example, to animate a property that takes <xref:System.Double> values, use a <xref:System.Windows.Media.Animation.DoubleAnimation>. The <xref:System.Windows.Media.Animation.Storyboard.TargetName%2A> and <xref:System.Windows.Media.Animation.Storyboard.TargetProperty> attached properties specify the object and property to which the animation is applied.  
+  
+ To start a storyboard in [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)], use a <xref:System.Windows.Media.Animation.BeginStoryboard> action and an <xref:System.Windows.EventTrigger>. The <xref:System.Windows.EventTrigger> begins the <xref:System.Windows.Media.Animation.BeginStoryboard> action when the event that is specified by its <xref:System.Windows.EventTrigger.RoutedEvent%2A> property occurs. The <xref:System.Windows.Media.Animation.BeginStoryboard> action starts the <xref:System.Windows.Media.Animation.Storyboard>.  
+  
+ The following example uses <xref:System.Windows.Media.Animation.Storyboard> objects to animate two <xref:System.Windows.Controls.Button> controls. To make the first button change in size, its <xref:System.Windows.FrameworkElement.Width%2A> is animated. To make the second button change color, the <xref:System.Windows.Media.SolidColorBrush.Color%2A> property of the <xref:System.Windows.Media.SolidColorBrush> is used to set the <xref:System.Windows.Controls.Control.Background%2A> of the button that is animated.  
+  
+## Example  
+ [!code-xaml[AnimatePropertyStoryboards#1](~/samples/snippets/xaml/VS_Snippets_Wpf/AnimatePropertyStoryboards/XAML/StoryboardExample.xaml#1)]  
+  
+> [!NOTE]
+> Although animations can target both a <xref:System.Windows.FrameworkElement> object, such as a <xref:System.Windows.Controls.Control> or <xref:System.Windows.Controls.Panel>, and a <xref:System.Windows.Freezable> object, such as a <xref:System.Windows.Media.Brush> or <xref:System.Windows.Media.Transform>, only framework elements have a <xref:System.Windows.FrameworkElement.Name%2A> property. To assign a name to a freezable so that it can be targeted by an animation, use the [x:Name Directive](/dotnet/desktop-wpf/xaml-services/xname-directive), as the previous example shows.  
+  
+ If you use code, you must create a <xref:System.Windows.NameScope> for a <xref:System.Windows.FrameworkElement> and register the names of the objects to animate with that <xref:System.Windows.FrameworkElement>. To start the animations in code, use a <xref:System.Windows.Media.Animation.BeginStoryboard> action with an <xref:System.Windows.EventTrigger>. Optionally, you can use an event handler and the <xref:System.Windows.Media.Animation.Storyboard.Begin%2A> method of <xref:System.Windows.Media.Animation.Storyboard>. The following example shows how to use the <xref:System.Windows.Media.Animation.Storyboard.Begin%2A> method.  
+  
+ [!code-csharp[AnimatePropertyStoryboards#11](~/samples/snippets/csharp/VS_Snippets_Wpf/AnimatePropertyStoryboards/CSharp/StoryboardExample.cs#11)]
+ [!code-vb[AnimatePropertyStoryboards#11](~/samples/snippets/visualbasic/VS_Snippets_Wpf/AnimatePropertyStoryboards/VisualBasic/StoryboardExample.vb#11)]  
+  
+ For more information about animation and storyboards, see [Animation Overview](animation-overview.md).  
+  
+ If you use code, you are not limited to using <xref:System.Windows.Media.Animation.Storyboard> objects in order to animate properties. For more information and examples, see [Animate a Property Without Using a Storyboard](how-to-animate-a-property-without-using-a-storyboard.md) and [Animate a Property by Using an AnimationClock](how-to-animate-a-property-by-using-an-animationclock.md).

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-property-by-using-an-animationclock.md

@@ -0,0 +1,37 @@
+---
+title: "How to: Animate a Property by Using an AnimationClock"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "animation [WPF], properties [WPF], with AnimationClocks"
+  - "AnimationClocks [WPF]"
+ms.assetid: e6542021-714c-4675-9567-04f1c7380834
+---
+# How to: Animate a Property by Using an AnimationClock
+This example shows how to use <xref:System.Windows.Media.Animation.Clock> objects to animate a property.  
+  
+ There are three ways to animate a dependency property:  
+  
+- Create an <xref:System.Windows.Media.Animation.AnimationTimeline> and associate it with that property by using a <xref:System.Windows.Media.Animation.Storyboard>.  
+  
+- Use the object's <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A> method to apply a single <xref:System.Windows.Media.Animation.AnimationTimeline> to a target property.  
+  
+- Create an <xref:System.Windows.Media.Animation.AnimationClock> from an <xref:System.Windows.Media.Animation.AnimationTimeline> and apply it to a property.  
+  
+ <xref:System.Windows.Media.Animation.Storyboard> objects and the <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A> method enable you to animate properties without directly creating and distributing clocks (for examples, see [Animate a Property by Using a Storyboard](how-to-animate-a-property-by-using-a-storyboard.md) and [Animate a Property Without Using a Storyboard](how-to-animate-a-property-without-using-a-storyboard.md)); clocks are created and distributed for you automatically.  
+  
+## Example  
+ The following example shows how to create an <xref:System.Windows.Media.Animation.AnimationClock> and apply it to two similar properties.  
+  
+ [!code-csharp[timingbehaviors_procedural_snip#GraphicsMMCreateAnimationClockWholeClass](~/samples/snippets/csharp/VS_Snippets_Wpf/timingbehaviors_procedural_snip/CSharp/AnimationClockExample.cs#graphicsmmcreateanimationclockwholeclass)]
+ [!code-vb[timingbehaviors_procedural_snip#GraphicsMMCreateAnimationClockWholeClass](~/samples/snippets/visualbasic/VS_Snippets_Wpf/timingbehaviors_procedural_snip/visualbasic/animationclockexample.vb#graphicsmmcreateanimationclockwholeclass)]  
+  
+ For an example showing how to interactively control a <xref:System.Windows.Media.Animation.Clock> after it starts, see [Interactively Control a Clock](how-to-interactively-control-a-clock.md).  
+  
+## See also
+
+- [Animate a Property by Using a Storyboard](how-to-animate-a-property-by-using-a-storyboard.md)
+- [Animate a Property Without Using a Storyboard](how-to-animate-a-property-without-using-a-storyboard.md)
+- [Property Animation Techniques Overview](property-animation-techniques-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-property-without-using-a-storyboard.md

@@ -0,0 +1,40 @@
+---
+title: "How to: Animate a Property Without Using a Storyboard"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+  - "cpp"
+helpviewer_keywords: 
+  - "non-Storyboard animation"
+  - "local animation [WPF]"
+  - "animation [WPF], non-Storyboard (local)"
+ms.assetid: d411db70-4df7-487d-82bc-95a7c1b2e7f8
+---
+# How to: Animate a Property Without Using a Storyboard
+This example shows one way to apply an animation to a property without using a <xref:System.Windows.Media.Animation.Storyboard>.  
+  
+> [!NOTE]
+> This functionality is not available in [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)]. For information about animating a property in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)], see [Animate a Property by Using a Storyboard](how-to-animate-a-property-by-using-a-storyboard.md).  
+  
+ To apply a local animation to a property, use the <xref:System.Windows.UIElement.BeginAnimation%2A> method. This method takes two parameters: a <xref:System.Windows.DependencyProperty> that specifies the property to animate, and the animation to apply to that property.  
+  
+## Example  
+ The following example shows how to animate the width and background color of a <xref:System.Windows.Controls.Button>.  
+  
+ [!code-cpp[animateproperty#11](~/samples/snippets/cpp/VS_Snippets_Wpf/animateproperty/CPP/LocalAnimationExample.cpp#11)]
+ [!code-csharp[animateproperty#11](~/samples/snippets/csharp/VS_Snippets_Wpf/animateproperty/CSharp/LocalAnimationExample.cs#11)]
+ [!code-vb[animateproperty#11](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animateproperty/VisualBasic/LocalAnimationExample.vb#11)]  
+  
+ A variety of animation classes in the <xref:System.Windows.Media.Animation> namespace exist for animating different types of properties. For more information about animating properties, see [Animation Overview](animation-overview.md). For more information about dependency properties (the type of properties that are shown in these examples) and their features, see [Dependency Properties Overview](../advanced/dependency-properties-overview.md).  
+  
+ There are other ways to animate without using <xref:System.Windows.Media.Animation.Storyboard> objects; for more information, see [Property Animation Techniques Overview](property-animation-techniques-overview.md).  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.AnimationTimeline>
+- <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A>
+- <xref:System.Windows.Media.Animation>
+- <xref:System.Windows.Media.Animation.Storyboard>
+- [Property Animation Techniques Overview](property-animation-techniques-overview.md)
+- [Animation Overview](animation-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-rectangle-geometry-by-using-key-frames.md

@@ -0,0 +1,37 @@
+---
+title: "How to: Animate a Rectangle Geometry by Using Key Frames"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "key frames [WPF], animating RectangleGeometry objects with"
+  - "RectangleGeometry objects [WPF], animating with key frames"
+  - "animation [WPF], RectangleGeometry objects with key frames"
+ms.assetid: a8b45ceb-0e32-4ba1-928f-df6d30db17c6
+---
+# How to: Animate a Rectangle Geometry by Using Key Frames
+This example shows how to animate the <xref:System.Windows.Media.RectangleGeometry.Rect%2A> property of a <xref:System.Windows.Media.RectangleGeometry> by using key frames.  
+  
+## Example  
+ The following example uses the <xref:System.Windows.Media.Animation.RectAnimationUsingKeyFrames> class to animate the <xref:System.Windows.Media.RectangleGeometry.Rect%2A> property of a <xref:System.Windows.Media.RectangleGeometry>. This animation uses three key frames in the following manner:  
+  
+1. During the first two seconds, uses an instance of the <xref:System.Windows.Media.Animation.LinearRectKeyFrame> class to animate a gradual change in the position, width, and height of a rectangle. Linear key frames like <xref:System.Windows.Media.Animation.LinearRectKeyFrame> create a smooth linear transition between values.  
+  
+2. During the end of the next half second, uses an instance of the <xref:System.Windows.Media.Animation.DiscreteRectKeyFrame> class to suddenly decrease the height of the rectangle. Discrete key frames like <xref:System.Windows.Media.Animation.DiscreteRectKeyFrame> create sudden changes between values, that is, the decrease in height occurs quickly and is not subtle.  
+  
+3. During the final two seconds, uses an instance of the <xref:System.Windows.Media.Animation.SplineRectKeyFrame> class to change the rectangle back to its original size and position. Spline key frames like <xref:System.Windows.Media.Animation.SplineRectKeyFrame> create a variable transition between values according to the values of the <xref:System.Windows.Media.Animation.SplineRectKeyFrame.KeySpline%2A> property. In this example, the change begins slowly and speeds up exponentially toward the end of the time segment.  
+  
+ [!code-csharp[keyframes_snip#RectAnimationUsingKeyFramesWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/keyframes_snip/CSharp/RectAnimationUsingKeyFramesExample.cs#rectanimationusingkeyframeswholepage)]
+ [!code-vb[keyframes_snip#RectAnimationUsingKeyFramesWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/keyframes_snip/visualbasic/rectanimationusingkeyframesexample.vb#rectanimationusingkeyframeswholepage)]
+ [!code-xaml[keyframes_snip#RectAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/RectAnimationUsingKeyFramesExample.xaml#rectanimationusingkeyframeswholepage)]  
+  
+ For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).  
+  
+## See also
+
+- <xref:System.Windows.Media.RectangleGeometry>
+- <xref:System.Windows.Media.RectangleGeometry.Rect%2A>
+- <xref:System.Windows.Media.Animation.RectAnimationUsingKeyFrames>
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-rectangle.md

@@ -0,0 +1,29 @@
+---
+title: "How to: Animate a Rectangle"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "animation [WPF], rectangles"
+  - "rectangles [WPF], animating"
+ms.assetid: 572ffb95-790d-4ace-adbf-b2ea8a90e75b
+---
+# How to: Animate a Rectangle
+This example shows how to animate changes to the size and position of a rectangle.  
+  
+## Example  
+ The following example uses an instance of the <xref:System.Windows.Media.Animation.RectAnimation> class to animate the <xref:System.Windows.Media.RectangleGeometry.Rect%2A> property of a <xref:System.Windows.Media.RectangleGeometry>, which animates changes to the size and position of the rectangle.  
+  
+ [!code-csharp[BasicAnimations_snip#RectAnimationWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/BasicAnimations_snip/CSharp/RectAnimationExample.cs#rectanimationwholepage)]
+ [!code-vb[BasicAnimations_snip#RectAnimationWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BasicAnimations_snip/VisualBasic/RectAnimationExample.vb#rectanimationwholepage)]  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.RectAnimation>
+- <xref:System.Windows.Media.RectangleGeometry.Rect%2A>
+- <xref:System.Windows.Media.RectangleGeometry>
+- [Animation Overview](animation-overview.md)
+- [Graphics and Multimedia](index.md)
+- [Graphics How-to Topics](graphics-how-to-topics.md)
+- [Animation and Timing How-to Topics](animation-and-timing-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-a-string-by-using-key-frames.md

@@ -0,0 +1,29 @@
+---
+title: "How to: Animate a String by Using Key Frames"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "animation [WPF], strings with key frames"
+  - "strings [WPF], animating with key frames"
+  - "key frames [WPF], animating strings with"
+ms.assetid: c62bc9fd-c09a-4227-bce0-0a1ab82049dd
+---
+# How to: Animate a String by Using Key Frames
+This example shows how to animate a string, which in this example is the <xref:System.Windows.Controls.ContentControl.Content%2A> property of a <xref:System.Windows.Controls.Button> control, by using key frames.  
+  
+## Example  
+ The following example uses the <xref:System.Windows.Media.Animation.StringAnimationUsingKeyFrames> class to animate the <xref:System.Windows.Controls.ContentControl.Content%2A> property of a <xref:System.Windows.Controls.Button>.  
+  
+ All the key frames in this example use an instance of the <xref:System.Windows.Media.Animation.DiscreteStringKeyFrame> class because a string animation that is created with key frames can only use discrete key frames. Discrete key frames like <xref:System.Windows.Media.Animation.DiscreteStringKeyFrame> create sudden jumps between values, that is, changes to the animation occur quickly and are not subtle.  
+  
+ [!code-xaml[keyframes_snip#StringAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/StringAnimationUsingKeyFramesExample.xaml#stringanimationusingkeyframeswholepage)]  
+  
+ For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.StringAnimationUsingKeyFrames>
+- <xref:System.Windows.Controls.ContentControl.Content%2A>
+- <xref:System.Windows.Controls.Button>
+- <xref:System.Windows.Media.Animation.DiscreteStringKeyFrame>
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-an-ellipsegeometry.md

@@ -0,0 +1,26 @@
+---
+title: "How to: Animate an EllipseGeometry"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "animation [WPF], EllipseGeometry objects [WPF]"
+  - "EllipseGeometry objects [WPF], animating"
+  - "graphics [WPF], animation"
+ms.assetid: 767b9b6e-9cb7-482e-b6c2-fee7750c3995
+---
+# How to: Animate an EllipseGeometry
+This example shows how to animate a <xref:System.Windows.Media.Geometry> within a <xref:System.Windows.Shapes.Path> element. In the following example, a <xref:System.Windows.Media.Animation.PointAnimation> is used to animate the <xref:System.Windows.Media.EllipseGeometry.Center%2A> of an <xref:System.Windows.Media.EllipseGeometry>.  
+  
+## Example  
+ [!code-xaml[animatepath_snip_XAML#1](~/samples/snippets/csharp/VS_Snippets_Wpf/animatepath_snip_XAML/CS/EllipseGeometryExample.xaml#1)]  
+  
+ [!code-csharp[animatepath_snip#101](~/samples/snippets/csharp/VS_Snippets_Wpf/animatepath_snip/CSharp/EllipseGeometryExample.cs#101)]  
+  
+ [!code-vb[animatepath_snip#201](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animatepath_snip/VisualBasic/EllipseGeometryExample.vb#201)]  
+  
+## See also
+
+- [Animation Overview](animation-overview.md)
+- [Geometry Overview](geometry-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-an-object-along-a-path-double-animation.md

@@ -0,0 +1,34 @@
+---
+title: "How to: Animate an Object Along a Path (Double Animation)"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "animation [WPF], objects along paths (double animation)"
+  - "double animation [WPF]"
+ms.assetid: 5a3c4a99-f303-42ad-a52a-e4794bb1798e
+---
+# How to: Animate an Object Along a Path (Double Animation)
+This example shows how to use the <xref:System.Windows.Media.Animation.DoubleAnimationUsingPath> class to move an object along a path defined by a <xref:System.Windows.Media.PathGeometry>.  
+  
+## Example  
+ The following example uses two <xref:System.Windows.Media.Animation.DoubleAnimationUsingPath> objects to move a rectangle along a geometric path:  
+  
+- The first <xref:System.Windows.Media.Animation.DoubleAnimationUsingPath> animates the <xref:System.Windows.Media.TranslateTransform.X%2A> of the <xref:System.Windows.Media.TranslateTransform> applied to the rectangle. It makes the rectangle move horizontally along the path.  
+  
+- The second <xref:System.Windows.Media.Animation.DoubleAnimationUsingPath> animates the <xref:System.Windows.Media.TranslateTransform.Y%2A> of the <xref:System.Windows.Media.TranslateTransform> applied to the rectangle. It makes the rectangle move vertically along the path.  
+  
+ [!code-xaml[PathAnimationGallery_snippet#DoubleAnimationUsingPathWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/PathAnimationGallery_snippet/CS/doubleanimationusingpathexample.xaml#doubleanimationusingpathwholepage)]  
+  
+ [!code-csharp[PathAnimationGallery_procedural_snip#DoubleAnimationUsingPathWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/PathAnimationGallery_procedural_snip/CSharp/DoubleAnimationUsingPathExample.cs#doubleanimationusingpathwholepage)]
+ [!code-vb[PathAnimationGallery_procedural_snip#DoubleAnimationUsingPathWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PathAnimationGallery_procedural_snip/VisualBasic/DoubleAnimationUsingPathExample.vb#doubleanimationusingpathwholepage)]  
+  
+ For the complete sample, see [Path Animation Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/PathAnimations).  
+  
+ Another way to move an object using a geometric path is to use a <xref:System.Windows.Media.Animation.MatrixAnimationUsingPath> object. For an example, see [Animate an Object Along a Path (Matrix Animation)](how-to-animate-an-object-along-a-path-matrix-animation.md).  
+  
+## See also
+
+- [Animation Overview](animation-overview.md)
+- [Path Animation How-to Topics](path-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-an-object-along-a-path-matrix-animation.md

@@ -0,0 +1,35 @@
+---
+title: "How to: Animate an Object Along a Path (Matrix Animation)"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "animation [WPF], objects along paths (matrix animation)"
+  - "matrix animation [WPF]"
+ms.assetid: 7000e697-1414-468c-b915-cf66062fc49e
+---
+# How to: Animate an Object Along a Path (Matrix Animation)
+This example shows how to use the <xref:System.Windows.Media.Animation.MatrixAnimationUsingPath> class to animate an object along a path that is defined by a <xref:System.Windows.Media.PathGeometry>.  
+  
+## Example  
+ The following example animates an object along a path by doing the following:  
+  
+- Applies a <xref:System.Windows.Media.MatrixTransform> to the object in order to move it.  
+  
+- Defines the path by using a <xref:System.Windows.Media.PathGeometry>.  
+  
+- Creates a <xref:System.Windows.Media.Animation.MatrixAnimationUsingPath> and uses it to animate the <xref:System.Windows.Media.Matrix> property of the <xref:System.Windows.Media.MatrixTransform>. The <xref:System.Windows.Media.Animation.MatrixAnimationUsingPath> takes the <xref:System.Windows.Media.PathGeometry> and uses it to generate <xref:System.Windows.Media.Matrix> values.  
+  
+ [!code-xaml[PathAnimationGallery_snippet#MatrixAnimationUsingPathWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/PathAnimationGallery_snippet/CS/matrixanimationusingpathexample.xaml#matrixanimationusingpathwholepage)]  
+  
+ [!code-csharp[PathAnimationGallery_procedural_snip#MatrixAnimationUsingPathWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/PathAnimationGallery_procedural_snip/CSharp/MatrixAnimationUsingPathExample.cs#matrixanimationusingpathwholepage)]
+ [!code-vb[PathAnimationGallery_procedural_snip#MatrixAnimationUsingPathWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PathAnimationGallery_procedural_snip/VisualBasic/MatrixAnimationUsingPathExample.vb#matrixanimationusingpathwholepage)]  
+  
+ For the complete sample, see [Path Animation Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/PathAnimations). For more information about geometric paths, see the [Geometry Overview](geometry-overview.md).  
+  
+## See also
+
+- [Animation Overview](animation-overview.md)
+- [Path Animation Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/PathAnimations)
+- [Path Animation How-to Topics](path-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-an-object-along-a-path-point-animation.md

@@ -0,0 +1,31 @@
+---
+title: "How to: Animate an Object Along a Path (Point Animation)"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "animation [WPF], objects along paths (point animation)"
+  - "point animation [WPF]"
+ms.assetid: 1fa3f817-35bc-41a1-b366-f5a20b70da0c
+---
+# How to: Animate an Object Along a Path (Point Animation)
+This example shows how to use a <xref:System.Windows.Media.Animation.PointAnimationUsingPath> object to animate a <xref:System.Windows.Point> along a curved path.  
+  
+## Example  
+ The following example moves an <xref:System.Windows.Media.EllipseGeometry> along a path defined by a <xref:System.Windows.Media.PathGeometry>. The ellipse geometry's <xref:System.Windows.Media.EllipseGeometry.Center%2A> property, which takes a <xref:System.Windows.Point> value, specifies its position; to move the ellipse geometry, you animate its <xref:System.Windows.Media.EllipseGeometry.Center%2A> property. The example uses a <xref:System.Windows.Media.Animation.PointAnimationUsingPath> to animate the <xref:System.Windows.Media.EllipseGeometry> object's <xref:System.Windows.Media.EllipseGeometry.Center%2A> property.  
+  
+ [!code-xaml[PathAnimationGallery_snippet#PointAnimationUsingPathWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/PathAnimationGallery_snippet/CS/pointanimationusingpathexample.xaml#pointanimationusingpathwholepage)]  
+  
+ [!code-csharp[PathAnimationGallery_procedural_snip#PointAnimationUsingPathWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/PathAnimationGallery_procedural_snip/CSharp/PointAnimationUsingPathExample.cs#pointanimationusingpathwholepage)]
+ [!code-vb[PathAnimationGallery_procedural_snip#PointAnimationUsingPathWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/PathAnimationGallery_procedural_snip/VisualBasic/PointAnimationUsingPathExample.vb#pointanimationusingpathwholepage)]  
+  
+ For the complete sample, see [Path Animation Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/PathAnimations).  
+  
+ The code version of the preceding sample used a <xref:System.Windows.Media.Animation.Storyboard> to animate the <xref:System.Windows.Media.EllipseGeometry>, even though only one animation was applied. A <xref:System.Windows.Media.Animation.Storyboard> is often the easiest way to apply multiple animations because these animations can be controlled by the same <xref:System.Windows.Media.Animation.Storyboard>. However, an easier way to apply a single animation to a property when using code is to use the <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A> method. For an example, see [Animate a Property Without Using a Storyboard](how-to-animate-a-property-without-using-a-storyboard.md).  
+  
+## See also
+
+- [Path Animation Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/PathAnimations)
+- [Animation Overview](animation-overview.md)
+- [Path Animation How-to Topics](path-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-an-object-by-using-key-frames.md

@@ -0,0 +1,40 @@
+---
+title: "How to: Animate an Object by Using Key Frames"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "animation [WPF], objects with key frames"
+  - "key frames [WPF], animating objects with"
+ms.assetid: b1f15ba9-cac7-4cea-8699-5c6b55c05c5e
+---
+# How to: Animate an Object by Using Key Frames
+This example shows how to animate an object, which in this example is the <xref:System.Windows.Controls.Page.Background%2A> property of a <xref:System.Windows.Controls.Page> control, by using key frames.  
+  
+## Example  
+ The following example uses the <xref:System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames> class to animate color changes for the <xref:System.Windows.Controls.Page.Background%2A> property of a <xref:System.Windows.Controls.Page> control. The example animation changes to a different background brush at regular intervals. This animation uses the <xref:System.Windows.Media.Animation.DiscreteObjectKeyFrame> class to create three different key frames. The animation uses key frames in the following manner:  
+  
+1. At the end of the first second, animates an instance of the <xref:System.Windows.Media.LinearGradientBrush> class. This section of the example applies a linear gradient to the background color so that the color transitions from yellow to orange to red.  
+  
+2. At the end of the next second, animates an instance of the <xref:System.Windows.Media.RadialGradientBrush> class. This section of the example applies a radial gradient to the background color so that the color transitions from white to blue to black.  
+  
+3. At the end of the third second, animates an instance of the <xref:System.Windows.Media.DrawingBrush> class. This section of the example applies a checkerboard pattern to the background.  
+  
+4. The animation begins again and repeats indefinitely.  
+  
+> [!NOTE]
+> <xref:System.Windows.Media.Animation.DiscreteObjectKeyFrame> is the only type of key frame that you can use with the <xref:System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames> class. Key frames like <xref:System.Windows.Media.Animation.DiscreteObjectKeyFrame> create sudden changes in values, that is, the color changes in this example occur suddenly.  
+  
+ [!code-xaml[keyframes_snip#ObjectAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/ObjectAnimationUsingKeyFramesExample.xaml#objectanimationusingkeyframeswholepage)]  
+  
+ For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames>
+- <xref:System.Windows.Controls.Page.Background%2A>
+- <xref:System.Windows.Controls.Page>
+- <xref:System.Windows.Media.Animation.DiscreteObjectKeyFrame>
+- <xref:System.Windows.Media.LinearGradientBrush>
+- <xref:System.Windows.Media.RadialGradientBrush>
+- <xref:System.Windows.Media.DrawingBrush>
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-camera-position-and-direction-in-a-3d-scene.md

@@ -0,0 +1,24 @@
+---
+title: "How to: Animate Camera Position and Direction in a 3D Scene"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "animation [WPF], camera position in 3D scenes"
+  - "camera direction [WPF], animating in 3D scenes"
+  - "3D scenes [WPF], animating camera position"
+  - "3D scenes [WPF], animating camera direction"
+  - "camera position [WPF], animating in 3D scenes"
+  - "animation [WPF], camera direction in 3D scenes"
+ms.assetid: 480224b7-a5e5-4165-ba7f-ef760ddff94a
+---
+# How to: Animate Camera Position and Direction in a 3D Scene
+The following example shows how to animate the position of a camera and animate the direction it is pointing in a 3D scene. This is done by using <xref:System.Windows.Media.Animation.Point3DAnimation> and <xref:System.Windows.Media.Animation.Vector3DAnimation> to animate the <xref:System.Windows.Media.Media3D.ProjectionCamera.Position%2A> and <xref:System.Windows.Media.Media3D.ProjectionCamera.LookDirection%2A> properties respectively of the <xref:System.Windows.Media.Media3D.PerspectiveCamera>. You might use an animation like this to change the onlooker's view of a scene in response to an event.  
+  
+## Example  
+ [!code-xaml[Animation3DGallery_snip#PointVector3DAnimationExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/PointVector3DAnimationExample.xaml#pointvector3danimationexamplewholepage)]  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.Vector3DAnimation>
+- <xref:System.Windows.Media.Animation.Point3DAnimation>
+- [Animate Camera Position and Direction Using Key Frames](how-to-animate-camera-position-and-direction-using-key-frames.md)
+- [3D Graphics Overview](3-d-graphics-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-camera-position-and-direction-using-key-frames.md

@@ -0,0 +1,28 @@
+---
+title: "How to: Animate Camera Position and Direction Using Key Frames"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "animation [WPF], camera direction with key frames"
+  - "key frames [WPF], animating camera direction"
+  - "animation [WPF], camera position with key frames"
+  - "camera position [WPF], animating with key frames"
+  - "key frames [WPF], animating camera position"
+  - "camera direction [WPF], animating with key frames"
+ms.assetid: 5753024e-0057-454d-947f-43ea686879c7
+---
+# How to: Animate Camera Position and Direction Using Key Frames
+In the following example, <xref:System.Windows.Media.Animation.Point3DAnimationUsingKeyFrames> is used to animate the position of a <xref:System.Windows.Media.Media3D.PerspectiveCamera> in a 3D scene. In addition, <xref:System.Windows.Media.Animation.Vector3DAnimationUsingKeyFrames> is used to animate the direction the camera is pointing in the 3D scene. Both of these animations use several key frames which create a series of animation effects:  
+  
+1. <xref:System.Windows.Media.Animation.LinearPoint3DKeyFrame> and <xref:System.Windows.Media.Animation.LinearVector3DKeyFrame> are used to create a smooth, linear interpolation between values.  
+  
+2. <xref:System.Windows.Media.Animation.DiscretePoint3DKeyFrame> and <xref:System.Windows.Media.Animation.DiscreteVector3DKeyFrame> are used to create sudden "jumps" between values (no interpolation).  
+  
+3. <xref:System.Windows.Media.Animation.SplinePoint3DKeyFrame> and <xref:System.Windows.Media.Animation.SplineVector3DKeyFrame> are used to create a variable transition between values depending on the <xref:System.Windows.Media.Animation.SplinePoint3DKeyFrame.KeySpline%2A> property. In the example below, the animation starts off slow but toward the end of the time segment, speeds up exponentially.  
+  
+## Example  
+ [!code-xaml[Animation3DGallery_snip#PointVector3DAnimationUsingKeyFramesExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/PointVector3DAnimationUsingKeyFramesExample.xaml#pointvector3danimationusingkeyframesexamplewholepage)]  
+  
+## See also
+
+- [Animate Camera Position and Direction in a 3D Scene](how-to-animate-camera-position-and-direction-in-a-3d-scene.md)
+- [3D Graphics Overview](3-d-graphics-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-color-by-using-key-frames.md

@@ -0,0 +1,37 @@
+---
+title: "How to: Animate Color by Using Key Frames"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "colors [WPF], animating with key frames"
+  - "animation [WPF], colors with key frames"
+  - "key frames [WPF], animating colors with"
+ms.assetid: ab04ffa6-4de9-4d5b-a3b4-4e35d5b2ef35
+---
+# How to: Animate Color by Using Key Frames
+This example shows how to animate the <xref:System.Windows.Media.SolidColorBrush.Color%2A> of a <xref:System.Windows.Media.SolidColorBrush> by using key frames.  
+  
+## Example  
+ The following example uses the <xref:System.Windows.Media.Animation.ColorAnimationUsingKeyFrames> class to animate the <xref:System.Windows.Media.SolidColorBrush.Color%2A> property of a <xref:System.Windows.Media.SolidColorBrush>. This animation uses three key frames in the following manner:  
+  
+1. During the first two seconds, uses an instance of the <xref:System.Windows.Media.Animation.LinearColorKeyFrame> class to gradually change the color from green to red. Linear key frames like <xref:System.Windows.Media.Animation.LinearColorKeyFrame> create a smooth linear transition between values.  
+  
+2. During the end of the next half second, uses an instance of the <xref:System.Windows.Media.Animation.DiscreteColorKeyFrame> class to quickly change the color from red to yellow. Discrete key frames like <xref:System.Windows.Media.Animation.DiscreteColorKeyFrame> create sudden changes between values, that is, the color change in this part of the animation occurs quickly and is not subtle.  
+  
+3. During the final two seconds, uses an instance of the <xref:System.Windows.Media.Animation.SplineColorKeyFrame> class to change the color again—this time from yellow back to green. Spline key frames like <xref:System.Windows.Media.Animation.SplineColorKeyFrame> create a variable transition between values according to the values of the <xref:System.Windows.Media.Animation.SplineColorKeyFrame.KeySpline%2A> property. In this example, the change in color begins slowly and speeds up exponentially toward the end of the time segment.  
+  
+ [!code-csharp[keyframes_snip#ColorAnimationUsingKeyFramesWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/keyframes_snip/CSharp/ColorAnimationUsingKeyFramesExample.cs#coloranimationusingkeyframeswholepage)]
+ [!code-vb[keyframes_snip#ColorAnimationUsingKeyFramesWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/keyframes_snip/visualbasic/coloranimationusingkeyframesexample.vb#coloranimationusingkeyframeswholepage)]
+ [!code-xaml[keyframes_snip#ColorAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/ColorAnimationUsingKeyFramesExample.xaml#coloranimationusingkeyframeswholepage)]  
+  
+ For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).  
+  
+## See also
+
+- <xref:System.Windows.Media.SolidColorBrush.Color%2A>
+- <xref:System.Windows.Media.SolidColorBrush>
+- <xref:System.Windows.Media.Animation.ColorAnimationUsingKeyFrames>
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-in-a-controltemplate.md

@@ -0,0 +1,19 @@
+---
+title: "How to: Animate in a ControlTemplate"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "animation [WPF], ControlTemplates"
+  - "ControlTemplates [WPF], animating within"
+ms.assetid: 97abb5d9-4dc7-4085-a011-54bd8bcb497b
+---
+# How to: Animate in a ControlTemplate
+This example shows how to use <xref:System.Windows.Media.Animation.Storyboard>, <xref:System.Windows.EventTrigger>, and <xref:System.Windows.Trigger> objects to animate within a <xref:System.Windows.Controls.ControlTemplate>.  
+  
+## Example  
+ [!code-xaml[AnimatePropertyStoryboards#GraphicsMMControlTemplateStoryboardExample](~/samples/snippets/xaml/VS_Snippets_Wpf/AnimatePropertyStoryboards/XAML/ControlTemplateStoryboardExample.xaml#graphicsmmcontroltemplatestoryboardexample)]  
+  
+ For more information about animating properties with storyboards, see [Storyboards Overview](storyboards-overview.md).  
+  
+## See also
+
+- <xref:System.Windows.Controls.ControlTemplate>

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-in-a-style.md

@@ -0,0 +1,21 @@
+---
+title: "How to animate in a style"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "animation [WPF], properties [WPF], within styles"
+  - "styles [WPF], animating properties within"
+ms.assetid: 6a791f3d-6b1f-4972-a2f9-35880bcfd954
+---
+# How to animate in a style
+
+This example shows how to animate properties within a style. When animating within a style, only the framework element for which the style is defined can be targeted directly. To target a freezable object, you must "dot down" from a property of the styled element.
+
+In the following example, several animations are defined within a style and applied to a <xref:System.Windows.Controls.Button>. When the user moves the mouse over the button, it fades from opaque to partially translucent and back again, repeatedly. When the user moves the mouse off the button, it becomes completely opaque. When the button is clicked, its background color changes from orange to white and back again. Because the <xref:System.Windows.Media.SolidColorBrush> used to paint the button can't be targeted directly, it is accessed by dotting down from the button's <xref:System.Windows.Controls.Control.Background%2A> property.
+
+## Example
+
+[!code-xaml[timingbehaviors_snip#21](~/samples/snippets/csharp/VS_Snippets_Wpf/timingbehaviors_snip/CSharp/StyleStoryboardsExample.xaml#21)]
+
+Note that when animating within a style, it's possible to target objects that don't exist. For example, suppose your style uses a <xref:System.Windows.Media.SolidColorBrush> to set a Button's background property, but at some point the style is overridden and the button's background is set with a <xref:System.Windows.Media.LinearGradientBrush>.  Trying to animate the <xref:System.Windows.Media.SolidColorBrush> won't throw an exception; the animation will simply fail silently.
+
+For more information about storyboard targeting syntax, see the [Storyboards Overview](storyboards-overview.md). For more information about animation, see the [Animation Overview](animation-overview.md). For more information about styles, see the [Styling and Templating](/dotnet/desktop-wpf/fundamentals/styles-templates-overview).

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-material-properties-in-a-3-d-scene.md

@@ -0,0 +1,29 @@
+---
+title: "How to: Animate Material Properties in a 3D Scene"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "Material properties [WPF], animating in 3D scenes"
+  - "animation [WPF], Material properties in 3D scenes"
+  - "3D scenes [WPF], animating Material properties"
+ms.assetid: 229fd6eb-7401-4992-b0c9-8b28de230c0f
+---
+# How to: Animate Material Properties in a 3D Scene
+This example shows how to animate the <xref:System.Windows.Media.Brush.Opacity%2A> property of the <xref:System.Windows.Media.Media3D.Material> applied to a 3D model.  
+  
+ The following code example defines the <xref:System.Windows.Media.LinearGradientBrush> used as the <xref:System.Windows.Media.Media3D.Material> applied to the 3D object.  
+  
+ [!code-xaml[Animation3DGallery_snip#AnimateMaterialExampleInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/AnimateMaterialExample.xaml#animatematerialexampleinline1)]  
+  
+ The <xref:System.Windows.Media.Brush.Opacity%2A> property of this <xref:System.Windows.Media.LinearGradientBrush> is animated using the code example below.  
+  
+ [!code-xaml[Animation3DGallery_snip#AnimateMaterialExampleInline2](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/AnimateMaterialExample.xaml#animatematerialexampleinline2)]  
+  
+## Example  
+ The following code shows the entire sample.  
+  
+ [!code-xaml[Animation3DGallery_snip#AnimateMaterialExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/AnimateMaterialExample.xaml#animatematerialexamplewholepage)]  
+  
+## See also
+
+- [Create a 3D Scene](how-to-create-a-3-d-scene.md)
+- [3D Graphics Overview](3-d-graphics-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-size-changes-by-using-key-frames.md

@@ -0,0 +1,35 @@
+---
+title: "How to: Animate Size Changes by Using Key Frames"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "key frames [WPF], animating size changes with"
+  - "animation [WPF], size changes with key frames"
+  - "size changes [WPF], animating with key frames"
+ms.assetid: 86bd2950-d4c9-4ec4-aa8d-7dc3ccadded4
+---
+# How to: Animate Size Changes by Using Key Frames
+This example shows how to animate size changes by using key frames.  
+  
+## Example  
+ The following example uses the <xref:System.Windows.Media.Animation.SizeAnimationUsingKeyFrames> class to animate the <xref:System.Windows.Media.ArcSegment.Size%2A> property of an <xref:System.Windows.Media.ArcSegment>. This animation uses three key frames in the following manner:  
+  
+1. During the first half second of the animation, uses an instance of the <xref:System.Windows.Media.Animation.LinearSizeKeyFrame> class to gradually increase the size of the arc. Linear key frames like <xref:System.Windows.Media.Animation.LinearSizeKeyFrame> create a smooth linear transition between values.  
+  
+2. At the end of the next half second, uses an instance of the <xref:System.Windows.Media.Animation.DiscreteSizeKeyFrame> class to suddenly increase the size of the arc. Discrete key frames like <xref:System.Windows.Media.Animation.DiscreteSizeKeyFrame> create sudden jumps between values, that is, the size changes occur suddenly and are not subtle.  
+  
+3. Over the final two seconds, uses an instance of the <xref:System.Windows.Media.Animation.SplineSizeKeyFrame> class to increase the size of the arc. Spline key frames like <xref:System.Windows.Media.Animation.SplineSizeKeyFrame> create a variable transition between values according to the values of the <xref:System.Windows.Media.Animation.SplineSizeKeyFrame.KeySpline%2A> property. In this example, the size of the arc increases slowly at first and then increases exponentially toward the end of the time segment.  
+  
+ [!code-xaml[keyframes_snip#SizeAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/SizeAnimationUsingKeyFramesExample.xaml#sizeanimationusingkeyframeswholepage)]  
+  
+ For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.SizeAnimationUsingKeyFrames>
+- <xref:System.Windows.Media.ArcSegment.Size%2A>
+- <xref:System.Windows.Media.ArcSegment>
+- <xref:System.Windows.Media.Animation.LinearSizeKeyFrame>
+- <xref:System.Windows.Media.Animation.DiscreteSizeKeyFrame>
+- <xref:System.Windows.Media.Animation.SplineSizeKeyFrame>
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-the-color-or-opacity-of-a-solidcolorbrush.md

@@ -0,0 +1,35 @@
+---
+title: "How to: Animate the Color or Opacity of a SolidColorBrush"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "SolidColorBrush [WPF], animating color of"
+  - "colors [WPF], animating"
+  - "opacity [WPF], animating"
+  - "animation [WPF], color of SolidColorBrush"
+  - "animation [WPF], opacity of SolidColorBrush"
+  - "SolidColorBrush [WPF], animating opacity of"
+ms.assetid: d9154354-843f-4713-bad1-35bb0ba6eaeb
+---
+# How to: Animate the Color or Opacity of a SolidColorBrush
+This example shows how to animate the <xref:System.Windows.Media.SolidColorBrush.Color%2A> and <xref:System.Windows.Media.Brush.Opacity%2A> of a <xref:System.Windows.Media.SolidColorBrush>.  
+  
+## Example  
+ The following example uses three animations to animate the <xref:System.Windows.Media.SolidColorBrush.Color%2A> and <xref:System.Windows.Media.Brush.Opacity%2A> of a <xref:System.Windows.Media.SolidColorBrush>.  
+  
+- The first animation, a <xref:System.Windows.Media.Animation.ColorAnimation>, changes the brush's color to <xref:System.Windows.Media.Colors.Gray%2A> when the mouse enters the rectangle.  
+  
+- The next animation, another <xref:System.Windows.Media.Animation.ColorAnimation>, changes the brush's color to <xref:System.Windows.Media.Colors.Orange%2A> when the mouse leaves the rectangle.  
+  
+- The final animation, a <xref:System.Windows.Media.Animation.DoubleAnimation>, changes the brush's opacity to 0.0 when the left mouse button is pressed.  
+  
+ [!code-csharp[brushanimations_snip#SolidColorBrushAnimationExample](~/samples/snippets/csharp/VS_Snippets_Wpf/brushanimations_snip/CSharp/SolidColorBrushExample.cs#solidcolorbrushanimationexample)]  
+  
+ For a more complete sample, which shows how to animate different types of brushes, see the [Brushes Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Brushes). For more information about animation, see the [Animation Overview](animation-overview.md).  
+  
+ For consistency with other animation examples, the code versions of this example use a <xref:System.Windows.Media.Animation.Storyboard> object to apply their animations. However, when applying a single animation in code, it's simpler to use the <xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A> method instead of using a <xref:System.Windows.Media.Animation.Storyboard>. For an example, see [Animate a Property Without Using a Storyboard](how-to-animate-a-property-without-using-a-storyboard.md).  
+  
+## See also
+
+- [Animation Overview](animation-overview.md)
+- [Storyboards Overview](storyboards-overview.md)
+- [Brushes Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Brushes)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-the-opacity-of-an-element-or-brush.md

@@ -0,0 +1,20 @@
+---
+title: "How to: Animate the Opacity of an Element or Brush"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "opacity [WPF], animating"
+  - "animation [WPF], Opacity property"
+ms.assetid: 572af23b-39dd-48d1-9db5-4bca56a4b3d3
+---
+# How to: Animate the Opacity of an Element or Brush
+To make a framework element fade in and out of view, you can animate its <xref:System.Windows.UIElement.Opacity%2A> property or you can animate the <xref:System.Windows.Media.Brush.Opacity%2A> property of the <xref:System.Windows.Media.Brush> (or brushes) used to paint it. Animating the element's opacity makes it and its children fade in and out of view, but animating the brush used to paint the element enables you to be more selective about which portion of the element fades. For example, you could animate the opacity of a brush used to paint a button's background. This would cause the button's background to fade in and out of view, while leaving its text fully opaque.  
+  
+> [!NOTE]
+> Animating the <xref:System.Windows.Media.Brush.Opacity%2A> of a <xref:System.Windows.Media.Brush> provides performance benefits over animating the <xref:System.Windows.UIElement.Opacity%2A> property of an element.  
+  
+ In the following example, two buttons are animated so that they fade in and out of view. The Opacity of the first <xref:System.Windows.Controls.Button> is animated from `1.0` to `0.0` over a <xref:System.Windows.Media.Animation.Timeline.Duration%2A> of five seconds. The second button is also animated, but the Opacity of the SolidColorBrush used to paint its <xref:System.Windows.Controls.Control.Background%2A> is animated rather than the opacity of the entire button. When the example is run, the first button completely fades in and out of view, while only the background of the second button fades in and out of view. Its text and border remain fully opaque.  
+  
+## Example  
+ [!code-xaml[timingbehaviors_snip#10](~/samples/snippets/csharp/VS_Snippets_Wpf/timingbehaviors_snip/CSharp/OpacityAnimationExample.xaml#10)]  
+  
+ Code has been omitted from this example. The full sample also shows how to animate the opacity of a <xref:System.Windows.Media.Color> within a <xref:System.Windows.Media.LinearGradientBrush>.  For the full sample, see the [Animating the Opacity of an Element Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/OpacityAnimation).

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-the-position-of-an-object-by-using-pointanimation.md

@@ -0,0 +1,30 @@
+---
+title: "How to: Animate the Position of an Object by Using PointAnimation"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "graphics [WPF], animation"
+  - "animation [WPF], PointAnimation"
+ms.assetid: 42310977-cc90-438a-8a47-0345898e01be
+---
+# How to: Animate the Position of an Object by Using PointAnimation
+This example shows how to use the <xref:System.Windows.Media.Animation.PointAnimation> class to animate an object along a <xref:System.Windows.Shapes.Path>.  
+  
+## Example  
+ The following example moves an ellipse along a <xref:System.Windows.Shapes.Path> from one point on the screen to another. The example animates the position of an <xref:System.Windows.Media.EllipseGeometry> by using <xref:System.Windows.Media.Animation.PointAnimation> to animate the <xref:System.Windows.Media.EllipseGeometry.Center%2A> property.  
+  
+ [!code-csharp[BasicAnimations_snip#PointAnimationWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/BasicAnimations_snip/CSharp/PointAnimationExample.cs#pointanimationwholepage)]
+ [!code-vb[BasicAnimations_snip#PointAnimationWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BasicAnimations_snip/VisualBasic/PointAnimationExample.vb#pointanimationwholepage)]  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.PointAnimation>
+- <xref:System.Windows.Shapes.Path>
+- <xref:System.Windows.Media.EllipseGeometry>
+- <xref:System.Windows.Media.EllipseGeometry.Center%2A>
+- [Animation Overview](animation-overview.md)
+- [Graphics and Multimedia](index.md)
+- [Graphics How-to Topics](graphics-how-to-topics.md)
+- [Animation and Timing How-to Topics](animation-and-timing-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-the-position-or-color-of-a-gradient-stop.md

@@ -0,0 +1,40 @@
+---
+title: "How to: Animate the Position or Color of a Gradient Stop"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "position [WPF], animating"
+  - "animation [WPF], position of GradientStop objects"
+  - "GradientStop objects [WPF], animating color of"
+  - "colors [WPF], animating"
+  - "animation [WPF], color of GradientStop objects"
+  - "GradientStop objects [WPF], animating position of"
+ms.assetid: 6f5b8b47-6c32-4b8e-98ee-fdf6515ec843
+---
+# How to: Animate the Position or Color of a Gradient Stop
+This example shows how to animate the <xref:System.Windows.Media.GradientStop.Color%2A> and <xref:System.Windows.Media.GradientStop.Offset%2A> of <xref:System.Windows.Media.GradientStop> objects.  
+  
+## Example  
+ The following example animates three gradient stops inside a <xref:System.Windows.Media.LinearGradientBrush>. The example uses three animations, each of which animates a different gradient stop:  
+  
+- The first animation, a <xref:System.Windows.Media.Animation.DoubleAnimation>, animates the first gradient stop's <xref:System.Windows.Media.GradientStop.Offset%2A> from 0.0 to 1.0 and then back to 0.0. As a result, the first color in the gradient shifts from the left side to the right side of the rectangle and then back to the left side.  
+  
+- The second animation, a <xref:System.Windows.Media.Animation.ColorAnimation>, animates the second gradient stop's <xref:System.Windows.Media.GradientStop.Color%2A> from <xref:System.Windows.Media.Colors.Purple%2A> to <xref:System.Windows.Media.Colors.Yellow%2A> and then back to <xref:System.Windows.Media.Colors.Purple%2A>. As a result, the middle color in the gradient changes from purple to yellow and back to purple.  
+  
+- The third animation, another <xref:System.Windows.Media.Animation.ColorAnimation>, animates the opacity of the third gradient stop's <xref:System.Windows.Media.GradientStop.Color%2A> by -1 and then back. As a result, the third color in the gradient fades away and then becomes opaque again.  
+  
+ [!code-csharp[BrushesIntroduction_snip#GraphicsMMGradientAnimationExamplesWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushesIntroduction_snip/CSharp/GradientStopAnimationExample.cs#graphicsmmgradientanimationexampleswholepage)]
+ [!code-vb[BrushesIntroduction_snip#GraphicsMMGradientAnimationExamplesWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushesIntroduction_snip/visualbasic/gradientstopanimationexample.vb#graphicsmmgradientanimationexampleswholepage)]
+ [!code-xaml[BrushesIntroduction_snip#GraphicsMMGradientAnimationExamplesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushesIntroduction_snip/XAML/GradientStopAnimationExample.xaml#graphicsmmgradientanimationexampleswholepage)]  
+  
+ Although this example uses a <xref:System.Windows.Media.LinearGradientBrush>, the process is the same for animating <xref:System.Windows.Media.GradientStop> objects inside a <xref:System.Windows.Media.RadialGradientBrush>.  
+  
+ For additional examples, see the [Brushes Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Brushes).  
+  
+## See also
+
+- <xref:System.Windows.Media.GradientStop>
+- [Animation Overview](animation-overview.md)
+- [Storyboards Overview](storyboards-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-the-size-of-an-arcsegment.md

@@ -0,0 +1,31 @@
+---
+title: "How to: Animate the Size of an ArcSegment"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "graphics [WPF], animation"
+  - "animation [WPF], ArcSegment size"
+  - "ArcSegment [WPF], animating size"
+ms.assetid: f93a1065-b00a-4d7e-9d4b-37023f98186a
+---
+# How to: Animate the Size of an ArcSegment
+This example shows how to animate the <xref:System.Windows.Media.ArcSegment.Size%2A> property of an <xref:System.Windows.Media.ArcSegment>.  
+  
+## Example  
+ The following example creates an <xref:System.Windows.Media.ArcSegment> that animates its <xref:System.Windows.Media.ArcSegment.Size%2A> when it loads on the screen.  
+  
+ [!code-csharp[BasicAnimations_snip#SizeAnimationWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/BasicAnimations_snip/CSharp/SizeAnimationExample.cs#sizeanimationwholepage)]
+ [!code-vb[BasicAnimations_snip#SizeAnimationWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BasicAnimations_snip/VisualBasic/SizeAnimationExample.vb#sizeanimationwholepage)]  
+  
+ For additional geometry and animation samples, see the [Geometries Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Geometry).  
+  
+## See also
+
+- <xref:System.Windows.Media.ArcSegment.Size%2A>
+- <xref:System.Windows.Media.ArcSegment>
+- [Animation Overview](animation-overview.md)
+- [Geometry Overview](geometry-overview.md)
+- [Geometries How-to Topics](geometries-how-to-topics.md)
+- [Animation and Timing How-to Topics](animation-and-timing-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-animate-the-thickness-of-a-border-by-using-key-frames.md

@@ -0,0 +1,33 @@
+---
+title: "How to: Animate the Thickness of a Border by Using Key Frames"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "animation [WPF], border thickness with key frames"
+  - "key frames [WPF], animating border thickness with"
+  - "border thickness [WPF], animating with key frames"
+ms.assetid: 3a9cb463-0a63-407d-aae7-3fbb1a559947
+---
+# How to: Animate the Thickness of a Border by Using Key Frames
+This example shows how to animate the <xref:System.Windows.Controls.Control.BorderThickness%2A> property of a <xref:System.Windows.Controls.Border>.  
+  
+## Example  
+ The following example uses the <xref:System.Windows.Media.Animation.ThicknessAnimationUsingKeyFrames> class to animate the <xref:System.Windows.Controls.Control.BorderThickness%2A> property of a <xref:System.Windows.Controls.Border>. This animation uses three key frames in the following manner:  
+  
+1. During the first half second, uses an instance of the <xref:System.Windows.Media.Animation.LinearThicknessKeyFrame> class to gradually increase the thickness of the border. The example uses <xref:System.Windows.Media.Animation.LinearThicknessKeyFrame> to create a smooth linear increase between values.  
+  
+2. At the end of the next half second, uses an instance of the <xref:System.Windows.Media.Animation.DiscreteThicknessKeyFrame> class to suddenly increase the thickness of the border. Discrete key frames like those derived from <xref:System.Windows.Media.Animation.DiscreteThicknessKeyFrame> create sudden jumps between values, that is, the movement of the animation is jerky.  
+  
+3. During the final two seconds, uses an instance of the <xref:System.Windows.Media.Animation.SplineThicknessKeyFrame> class to decrease the thickness of the border. Spline key frames like those derived from <xref:System.Windows.Media.Animation.SplineThicknessKeyFrame> create a variable transition between values according to the values of the <xref:System.Windows.Media.Animation.SplineThicknessKeyFrame.KeySpline%2A> property. In this key frame, the animation starts off slow and speeds up exponentially toward the end of the time segment.  
+  
+ [!code-xaml[keyframes_snip#ThicknessAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/ThicknessAnimationUsingKeyFramesExample.xaml#thicknessanimationusingkeyframeswholepage)]  
+  
+ For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).  
+  
+## See also
+
+- <xref:System.Windows.Media.Animation.LinearThicknessKeyFrame>
+- <xref:System.Windows.Media.Animation.DiscreteThicknessKeyFrame>
+- <xref:System.Windows.Media.Animation.SplineThicknessKeyFrame>
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)
+- [Animate a BorderThickness Value](../controls/how-to-animate-a-borderthickness-value.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-apply-a-drawing-to-a-3-d-model.md

@@ -0,0 +1,31 @@
+---
+title: "How to: Apply a Drawing to a 3D Model"
+ms.date: "03/30/2017"
+helpviewer_keywords:
+  - "drawings [WPF], applying to 3D models"
+  - "3D models [WPF], applying drawings to"
+ms.assetid: 68357577-b7fc-446e-8be9-a8cc7df3a350
+---
+# How to: Apply a Drawing to a 3D Model
+
+This example shows how to use a <xref:System.Windows.Media.DrawingBrush> as the <xref:System.Windows.Media.Media3D.Material> applied to a 3D model.
+
+The following code defines a <xref:System.Windows.Media.DrawingGroup> as the content of a <xref:System.Windows.Media.DrawingBrush>.  The <xref:System.Windows.Media.DrawingBrush> is set as the <xref:System.Windows.Media.Media3D.DiffuseMaterial.Brush%2A> property of the <xref:System.Windows.Media.Media3D.DiffuseMaterial> applied to a 3D plane.
+
+> [!NOTE]
+> It is often desirable to define complex objects and values like the drawing below as resources which can be reused and simplify your code. See [XAML Resources](/dotnet/desktop-wpf/fundamentals/xaml-resources-define) for more information.
+
+[!code-xaml[3DGallery_snip#ApplyDrawingToMaterialInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_snip/CS/ApplyDrawingToMaterialExample.xaml#applydrawingtomaterialinline1)]
+
+## Example
+
+The following code shows the entire sample.
+
+[!code-xaml[3DGallery_snip#ApplyDrawingToMaterialExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_snip/CS/ApplyDrawingToMaterialExample.xaml#applydrawingtomaterialexamplewholepage)]
+
+## See also
+
+- [XAML Resources](/dotnet/desktop-wpf/fundamentals/xaml-resources-define)
+- [Create a 3D Scene](how-to-create-a-3-d-scene.md)
+- [Drawing Objects Overview](drawing-objects-overview.md)
+- [3D Graphics Overview](3-d-graphics-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-apply-a-guidelineset-to-a-drawing.md

@@ -0,0 +1,28 @@
+---
+title: "How to: Apply a GuidelineSet to a Drawing"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "GuidelineSet property [WPF], applying to drawings"
+  - "graphics [WPF], GuidelineSet property"
+ms.assetid: 45f3e0b4-8820-45a7-b865-b8ea5b17b0c8
+---
+# How to: Apply a GuidelineSet to a Drawing
+This example shows how to apply a <xref:System.Windows.Media.GuidelineSet> to a <xref:System.Windows.Media.DrawingGroup>.  
+  
+ The <xref:System.Windows.Media.DrawingGroup> class is the only type of <xref:System.Windows.Media.Drawing> that has a <xref:System.Windows.Media.DrawingGroup.GuidelineSet%2A> property. To apply a <xref:System.Windows.Media.GuidelineSet> to another type of <xref:System.Windows.Media.Drawing>, add it to a <xref:System.Windows.Media.DrawingGroup> and then apply the <xref:System.Windows.Media.GuidelineSet> to your <xref:System.Windows.Media.DrawingGroup>.  
+  
+## Example  
+ The following example creates two <xref:System.Windows.Media.DrawingGroup> objects that are almost identical; the only difference is: the second <xref:System.Windows.Media.DrawingGroup> has a <xref:System.Windows.Media.GuidelineSet> and the first does not.  
+  
+ The following illustration shows the output from the example. Because the rendering difference between the two <xref:System.Windows.Media.DrawingGroup> objects is so subtle, portions of the drawings are enlarged.  
+  
+ ![A DrawingGroup with and without a GuidelineSet](./media/graphicsmm-drawinggroup-guidelineset.png "graphicsmm_drawinggroup_guidelineset")  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#GraphicsMMDrawingGroupGuidelineSetExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/DrawingGroupGuidelineSetExample.cs#graphicsmmdrawinggroupguidelinesetexamplewholepage)]
+ [!code-xaml[DrawingMiscSnippets_snip#GraphicsMMDrawingGroupGuidelineSetExampleWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/DrawingMiscSnippets_snip/XAML/DrawingGroupGuidelineSetExample.xaml#graphicsmmdrawinggroupguidelinesetexamplewholepage)]  
+  
+## See also
+
+- <xref:System.Windows.Media.DrawingGroup>
+- <xref:System.Windows.Media.GuidelineSet>
+- [Drawing Objects Overview](drawing-objects-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-apply-a-transform-to-a-bitmapimage.md

@@ -0,0 +1,23 @@
+---
+title: "How to: Apply a Transform to a BitmapImage"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "bitmap images [WPF]"
+  - "Transforms [WPF]"
+ms.assetid: 5c042f8d-d569-45e4-ab32-868b89759bf2
+---
+# How to: Apply a Transform to a BitmapImage
+This example demonstrates how to apply a <xref:System.Windows.Media.Transform> to a <xref:System.Windows.Media.Imaging.BitmapImage>.  
+  
+## Example  
+ [!code-csharp[ImagingSnippetGallery_procedural_snip#TransformedBitmapInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/CSharp/TransformedBitmapExample.cs#transformedbitmapinline1)]
+ [!code-vb[ImagingSnippetGallery_procedural_snip#TransformedBitmapInline1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/VB/TransformedBitmapExample.vb#transformedbitmapinline1)]  
+  
+## See also
+
+- <xref:System.Windows.Media.Imaging.BitmapSource>
+- [Imaging Overview](imaging-overview.md)
+- [Rotate an Image](../controls/how-to-rotate-an-image.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-apply-a-transform-to-an-element-when-an-event-occurs.md

@@ -0,0 +1,38 @@
+---
+title: "How to: Apply a Transform to an Element When an Event Occurs"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "graphics [WPF], transformations as event responses"
+  - "properties [WPF], LayoutTransform"
+  - "transformations as event responses [WPF]"
+  - "properties [WPF], RenderTransform"
+  - "LayoutTransform property [WPF]"
+ms.assetid: 71e4327e-ca57-444c-a3cf-09fb381491a0
+---
+# How to: Apply a Transform to an Element When an Event Occurs
+This example shows how to apply a <xref:System.Windows.Media.ScaleTransform> when an event occurs. The concept that is shown here is the same that you use for applying other types of transformations. For more information about the available types of transformations, see the <xref:System.Windows.Media.Transform> class or [Transforms Overview](transforms-overview.md).  
+  
+ You can apply a transform to an element in either of these two ways:  
+  
+- If you do *not* want the transform to affect layout, use the <xref:System.Windows.UIElement.RenderTransform%2A> property of the element.  
+  
+- If you do want the transform to affect layout, use the <xref:System.Windows.FrameworkElement.LayoutTransform%2A> property of the element.  
+  
+ The following example applies a <xref:System.Windows.Media.ScaleTransform> to the <xref:System.Windows.UIElement.RenderTransform%2A> property of a button. When the mouse moves over the button, the <xref:System.Windows.Media.ScaleTransform.ScaleX%2A> and <xref:System.Windows.Media.ScaleTransform.ScaleY%2A> properties of the <xref:System.Windows.Media.ScaleTransform> are set to `2`, which causes the button to become larger. When the mouse moves off the button, <xref:System.Windows.Media.ScaleTransform.ScaleX%2A> and <xref:System.Windows.Media.ScaleTransform.ScaleY%2A> are set to `1`, which causes the button to return to its original size.  
+  
+## Example  
+ [!code-xaml[ButtonTransform#1](~/samples/snippets/csharp/VS_Snippets_Wpf/ButtonTransform/CSharp/ButtonTransformExample.xaml#1)]  
+  
+ [!code-csharp[ButtonTransform#1cb](~/samples/snippets/csharp/VS_Snippets_Wpf/ButtonTransform/CSharp/ButtonTransformExample.xaml.cs#1cb)]
+ [!code-vb[ButtonTransform#1cb](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ButtonTransform/VisualBasic/ButtonTransformExample.xaml.vb#1cb)]  
+  
+## See also
+
+- <xref:System.Windows.Media.Transform>
+- <xref:System.Windows.Media.ScaleTransform>
+- [Transforms Overview](transforms-overview.md)
+- [How-to Topics](transformations-how-to-topics.md)
+- [Routed Events Overview](../advanced/routed-events-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-apply-emissive-material-to-a-3-d-object.md

@@ -0,0 +1,38 @@
+---
+title: "How to: Apply Emissive Material to a 3D Object"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "EmissiveMaterial [WPF], applying to 3D objects"
+  - "3D objects [WPF], applying EmissiveMaterial"
+ms.assetid: fd442cc2-5adc-487a-ba70-e45ed54bb3b4
+---
+# How to: Apply Emissive Material to a 3D Object
+The following example shows how to use <xref:System.Windows.Media.Media3D.EmissiveMaterial> to add color to an existing Material equal to the color of the EmissiveMaterial's brush. The code below shows <xref:System.Windows.Media.Media3D.DiffuseMaterial> and <xref:System.Windows.Media.Media3D.EmissiveMaterial> applied in combination to add blue to the DiffuseMaterial's appearance.  
+  
+ [!code-xaml[3DGallery_snip#EmmisiveMaterialAnimationExampleInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_snip/CS/EmissiveMaterialExample.xaml#emmisivematerialanimationexampleinline1)]  
+  
+ In procedural code:  
+  
+ [!code-csharp[3DGallery_procedural_snip#EmissiveMaterialCodeExampleInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_procedural_snip/CSharp/EmissiveMaterialExample.cs#emissivematerialcodeexampleinline1)]
+ [!code-vb[3DGallery_procedural_snip#EmissiveMaterialCodeExampleInline1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DGallery_procedural_snip/visualbasic/emissivematerialexample.vb#emissivematerialcodeexampleinline1)]  
+  
+## Example  
+ The following code shows the entire sample in XAML.  
+  
+ [!code-xaml[3DGallery_snip#EmissiveMaterialExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_snip/CS/EmissiveMaterialExample.xaml#emissivematerialexamplewholepage)]  
+  
+## Example  
+ Below is the entire sample in procedural code.  
+  
+ [!code-csharp[3DGallery_procedural_snip#EmissiveMaterialCodeExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_procedural_snip/CSharp/EmissiveMaterialExample.cs#emissivematerialcodeexamplewholepage)]
+ [!code-vb[3DGallery_procedural_snip#EmissiveMaterialCodeExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DGallery_procedural_snip/visualbasic/emissivematerialexample.vb#emissivematerialcodeexamplewholepage)]  
+  
+## See also
+
+- [Create a 3D Scene](how-to-create-a-3-d-scene.md)
+- [3D Graphics Overview](3-d-graphics-overview.md)
+- [Animate Material Properties in a 3D Scene](how-to-animate-material-properties-in-a-3-d-scene.md)
+- [Apply Material to the Front and Back of a 3D Object](how-to-apply-material-to-the-front-and-back-of-a-3-d-object.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-apply-material-to-the-front-and-back-of-a-3-d-object.md

@@ -0,0 +1,25 @@
+---
+title: "How to: Apply Material to the Front and Back of a 3D Object"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "3D objects [WPF], applying Material class"
+  - "Material class [WPF], applying to both sides of 3D object"
+  - "classes [WPF], Material"
+ms.assetid: d93c8ad6-4939-4d29-9544-4d16d98093c1
+---
+# How to: Apply Material to the Front and Back of a 3D Object
+The following example shows how to apply a <xref:System.Windows.Media.Media3D.Material> to the front and back of a 3D object and animate the object to show both sides of the object. The <xref:System.Windows.Media.Media3D.GeometryModel3D.Material%2A> property of a <xref:System.Windows.Media.Media3D.GeometryModel3D> is used to apply a red <xref:System.Windows.Media.Brush> to the front side of the object and the <xref:System.Windows.Media.Media3D.GeometryModel3D.BackMaterial%2A> property of the <xref:System.Windows.Media.Media3D.GeometryModel3D> is used to apply a blue <xref:System.Windows.Media.Brush> to the back side of the object. The code below shows the application of the materials to the object:  
+  
+ [!code-xaml[Animation3DGallery_snip#BackMaterialAnimationExampleInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/BackMaterialAnimationExample.xaml#backmaterialanimationexampleinline1)]  
+  
+## Example  
+ The following code shows the entire sample.  
+  
+ [!code-xaml[Animation3DGallery_snip#BackMaterialAnimationExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Animation3DGallery_snip/CS/BackMaterialAnimationExample.xaml#backmaterialanimationexamplewholepage)]  
+  
+## See also
+
+- [Create a 3D Scene](how-to-create-a-3-d-scene.md)
+- [3D Graphics Overview](3-d-graphics-overview.md)
+- [Animate Material Properties in a 3D Scene](how-to-animate-material-properties-in-a-3-d-scene.md)
+- [Apply Emissive Material to a 3D Object](how-to-apply-emissive-material-to-a-3-d-object.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-apply-multiple-transformations-to-a-3-d-model.md

@@ -0,0 +1,34 @@
+---
+title: "How to: Apply Multiple Transformations to a 3D Model"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "3D models [WPF], applying multiple transformations to"
+ms.assetid: cb72245a-5560-4c96-9f58-593c66296992
+---
+# How to: Apply Multiple Transformations to a 3D Model
+This sample shows how to use a <xref:System.Windows.Media.Media3D.RotateTransform3D> and a <xref:System.Windows.Media.Media3D.ScaleTransform3D> to rotate and change the scale of a 3D model. The code below shows how to apply these transforms to the <xref:System.Windows.Media.Media3D.Model3D.Transform%2A> property of a <xref:System.Windows.Media.Media3D.GeometryModel3D> in XAML.  
+  
+ [!code-xaml[3DGallery_snip#Multiple3DTransformationsExampleInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_snip/CS/MultipleTransformationsExample.xaml#multiple3dtransformationsexampleinline1)]  
+  
+ In code:  
+  
+ [!code-csharp[3DGallery_procedural_snip#Multiple3DTransformationsCodeExampleInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_procedural_snip/CSharp/MultipleTransformationsExample.cs#multiple3dtransformationscodeexampleinline1)]
+ [!code-vb[3DGallery_procedural_snip#Multiple3DTransformationsCodeExampleInline1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DGallery_procedural_snip/visualbasic/multipletransformationsexample.vb#multiple3dtransformationscodeexampleinline1)]  
+  
+## Example  
+ The following code shows the entire sample in XAML.  
+  
+ [!code-xaml[3DGallery_snip#Multiple3DTransformationsExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_snip/CS/MultipleTransformationsExample.xaml#multiple3dtransformationsexamplewholepage)]  
+  
+## Example  
+ Below is the entire sample in code.  
+  
+ [!code-csharp[3DGallery_procedural_snip#Multiple3DTransformationsCodeExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_procedural_snip/CSharp/MultipleTransformationsExample.cs#multiple3dtransformationscodeexamplewholepage)]
+ [!code-vb[3DGallery_procedural_snip#Multiple3DTransformationsCodeExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DGallery_procedural_snip/visualbasic/multipletransformationsexample.vb#multiple3dtransformationscodeexamplewholepage)]  
+  
+## See also
+
+- [Transform the Scale of a 3D Model](how-to-transform-the-scale-of-a-3-d-model.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-apply-multiple-transforms-to-an-object.md

@@ -0,0 +1,30 @@
+---
+title: "How to: Apply Multiple Transforms to an Object"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "grouping Transform objects [WPF]"
+  - "Transform objects [WPF], grouping"
+  - "graphics [WPF], grouping Transform objects"
+  - "TransformGroup [WPF]"
+ms.assetid: 98cd1921-12bc-4bf5-8193-529228fb7402
+---
+# How to: Apply Multiple Transforms to an Object
+This example shows how to use a <xref:System.Windows.Media.TransformGroup> to group two or more <xref:System.Windows.Media.Transform> objects into a single composite <xref:System.Windows.Media.Transform>.  
+  
+## Example  
+ The following example uses a <xref:System.Windows.Media.TransformGroup> to apply a <xref:System.Windows.Media.ScaleTransform> and a <xref:System.Windows.Media.RotateTransform> to a <xref:System.Windows.Controls.Button>.  
+  
+ [!code-xaml[Transforms_snip#MultipleTransformExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Transforms_snip/CS/MultipleTransformExample.xaml#multipletransformexamplewholepage)]  
+  
+ [!code-csharp[Transforms_Procedural_snip#MultipleTransformsCodeExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/Transforms_Procedural_snip/CSharp/MultipleTransformsExample.cs#multipletransformscodeexamplewholepage)]
+ [!code-vb[Transforms_Procedural_snip#MultipleTransformsCodeExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/Transforms_Procedural_snip/VisualBasic/MultipleTransformsExample.vb#multipletransformscodeexamplewholepage)]  
+  
+## See also
+
+- <xref:System.Windows.UIElement.RenderTransform%2A>
+- <xref:System.Windows.Media.TransformGroup>
+- [Transforms Overview](transforms-overview.md)
+- [2D Transforms Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/2DTransforms)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-chain-bitmapsource-objects-together.md

@@ -0,0 +1,22 @@
+---
+title: "How to: Chain BitmapSource Objects Together"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "BitmapSource objects [WPF], chaining"
+  - "graphics [WPF], chaining BitmapSource objects"
+  - "chaining BitmapSource objects [WPF]"
+ms.assetid: 32d88853-395b-4855-9685-51a482a3b421
+---
+# How to: Chain BitmapSource Objects Together
+This example shows how you can apply a variety of effects to an image source by chaining multiple <xref:System.Windows.Media.Imaging.BitmapSource> derived objects together.  
+  
+ The following example uses chaining to flip and change the pixel format of the source of an image.  
+  
+## Example  
+ [!code-xaml[ImagingSnippetGallery_snip#ChainedBitmapSourcesXamlExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/ImagingSnippetGallery_snip/CS/ChainedBitmapSourcesExample.xaml#chainedbitmapsourcesxamlexamplewholepage)]  
+  
+ [!code-csharp[ImagingSnippetGallery_procedural_snip#ChainedBitmapSourcesCodeExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/CSharp/ChainedBitmapSourcesExample.cs#chainedbitmapsourcescodeexamplewholepage)]
+ [!code-vb[ImagingSnippetGallery_procedural_snip#ChainedBitmapSourcesCodeExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/VB/ChainedBitmapSourcesExample.vb#chainedbitmapsourcescodeexamplewholepage)]

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-control-a-mediaelement-by-using-a-storyboard.md

@@ -0,0 +1,43 @@
+---
+title: "How to: Control a MediaElement by Using a Storyboard"
+description: Control playback of media using a storyboard in Windows Presentation foundation (WPF). Consider this example for creating a simple media player.
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "multimedia [WPF], controlling playback of media with Storyboards"
+  - "controlling playback of media [WPF], with Storyboards"
+  - "Storyboards [WPF], controlling playback of media with"
+  - "media [WPF], controlling playback with Storyboards"
+  - "playback of media [WPF], controlling with Storyboards"
+ms.assetid: 6128ca77-b826-4e36-b968-6f237157c543
+---
+# How to: Control a MediaElement by Using a Storyboard
+This example shows how to control a <xref:System.Windows.Controls.MediaElement> by using a <xref:System.Windows.Media.MediaTimeline> in a <xref:System.Windows.Media.Animation.Storyboard>.  
+  
+## Example  
+ When you use a <xref:System.Windows.Media.MediaTimeline> in a <xref:System.Windows.Media.Animation.Storyboard> to control the timing of a <xref:System.Windows.Controls.MediaElement>, the functionality is identical to the functionality of other <xref:System.Windows.Media.Animation.Timeline> objects, such as animations. For example, a <xref:System.Windows.Media.MediaTimeline> uses <xref:System.Windows.Media.Animation.Timeline> properties like the <xref:System.Windows.Media.Animation.Timeline.BeginTime%2A> property to specify when to start a <xref:System.Windows.Controls.MediaElement> (start media playback). It also uses the <xref:System.Windows.Media.Animation.Timeline.Duration%2A> property to specify how long the <xref:System.Windows.Controls.MediaElement> is active (duration of media playback). For more information about using <xref:System.Windows.Media.Animation.Timeline> objects with a <xref:System.Windows.Media.Animation.Storyboard>, see [Storyboards Overview](storyboards-overview.md).  
+  
+ This example shows how to create a simple media player that uses a <xref:System.Windows.Media.MediaTimeline> to control playback. The media player includes play, pause, resume, and stop buttons. The player also has a <xref:System.Windows.Controls.Slider> control that acts as a progress bar.  
+  
+ The following example creates the [!INCLUDE[TLA#tla_ui](../../../includes/tlasharptla-ui-md.md)] for the media player.  
+  
+ [!code-xaml[MediaGallery_snip#MediaTimelineExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/MediaGallery_snip/VB/MediaTimelineExample.xaml#mediatimelineexamplewholepage)]  
+  
+ The following example creates the functionality for the progress bar.  
+  
+ [!code-csharp[MediaGallery_snip#CodeBehindMediaTimelineExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/MediaGallery_snip/CSharp/MediaTimelineExample.xaml.cs#codebehindmediatimelineexamplewholepage)]
+ [!code-vb[MediaGallery_snip#CodeBehindMediaTimelineExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/MediaGallery_snip/VB/MediaTimelineExample.xaml.vb#codebehindmediatimelineexamplewholepage)]  
+  
+## See also
+
+- <xref:System.Windows.Controls.MediaElement>
+- <xref:System.Windows.Media.MediaTimeline>
+- <xref:System.Windows.Media.Animation.Storyboard>
+- [Control a MediaElement (Play, Pause, Stop, Volume, and Speed)](how-to-control-a-mediaelement-play-pause-stop-volume-and-speed.md)
+- [Storyboards Overview](storyboards-overview.md)
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Animation Overview](animation-overview.md)
+- [How-to Topics](audio-and-video-how-to-topics.md)
+- [Graphics and Multimedia](index.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-control-a-mediaelement-play-pause-stop-volume-and-speed.md

@@ -0,0 +1,34 @@
+---
+title: "How to: Control a MediaElement (Play, Pause, Stop, Volume, and Speed)"
+description: Control playback of media in Windows Presentation foundation (WPF). Start, stop, pause, skip back and forth, and adjust volume and speed.
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "playback of media [WPF], controlling"
+  - "controlling playback of media [WPF]"
+  - "multimedia [WPF], controlling playback of media"
+  - "media [WPF], controlling playback of"
+ms.assetid: 6885a730-e054-4c16-8c1e-ffe17b1f7c32
+---
+# How to: Control a MediaElement (Play, Pause, Stop, Volume, and Speed)
+The following example shows how to control playback of media using a <xref:System.Windows.Controls.MediaElement>. The example creates a simple media player that allows you to play, pause, stop, and skip back and forth in the media as well as adjust the volume and speed ratio.  
+  
+## Example  
+ The code below creates the UI.  
+  
+> [!NOTE]
+> The <xref:System.Windows.Controls.MediaElement.LoadedBehavior%2A> property of <xref:System.Windows.Controls.MediaElement> must be set to `Manual` in order to be able to interactively stop, pause, and play the media.  
+  
+ [!code-xaml[MediaGallery_snip#MediaElementExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/MediaGallery_snip/VB/MediaElementExample.xaml#mediaelementexamplewholepage)]  
+  
+## Example  
+ The code below implements the functionality of the sample UI controls. The <xref:System.Windows.Controls.MediaElement.Play%2A>, <xref:System.Windows.Controls.MediaElement.Pause%2A>, and <xref:System.Windows.Controls.MediaElement.Stop%2A> methods are used to respectively play, pause and stop the media. Changing the <xref:System.Windows.Controls.MediaElement.Position%2A> property of the <xref:System.Windows.Controls.MediaElement> allows you to skip around in the media. Finally, the <xref:System.Windows.Controls.MediaElement.Volume%2A> and <xref:System.Windows.Controls.MediaElement.SpeedRatio%2A> properties are used to adjust the volume and playback speed of the media.  
+  
+ [!code-csharp[MediaGallery_snip#CodeBehindMediaElementExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/MediaGallery_snip/CSharp/MediaElementExample.xaml.cs#codebehindmediaelementexamplewholepage)]
+ [!code-vb[MediaGallery_snip#CodeBehindMediaElementExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/MediaGallery_snip/VB/MediaElementExample.xaml.vb#codebehindmediaelementexamplewholepage)]  
+  
+## See also
+
+- [Control a MediaElement by Using a Storyboard](how-to-control-a-mediaelement-by-using-a-storyboard.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-control-a-storyboard-after-it-starts.md

@@ -0,0 +1,45 @@
+---
+title: "How to: Control a Storyboard After It Starts"
+ms.date: "03/30/2017"
+dev_langs:
+  - "csharp"
+  - "vb"
+helpviewer_keywords:
+  - "Storyboards [WPF], controlling after start"
+ms.assetid: 040f13f0-69f9-4ab5-be2b-079f4f80c7c0
+---
+# How to: Control a Storyboard After It Starts
+
+This example shows how to use code to control a <xref:System.Windows.Media.Animation.Storyboard> after it has started. To control a storyboard in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)], use <xref:System.Windows.Trigger> and <xref:System.Windows.TriggerAction> objects; for an example, see [Use Event Triggers to Control a Storyboard After It Starts](how-to-use-event-triggers-to-control-a-storyboard-after-it-starts.md).
+
+To start a storyboard, you use its <xref:System.Windows.Media.Animation.Storyboard.Begin%2A> method, which distributes the storyboard's animations to the properties they animate and starts the storyboard.
+
+To make a storyboard controllable, you use the <xref:System.Windows.Media.Animation.Storyboard.Begin%2A> method and specify **true** as the second parameter. You can then use the storyboard's interactive methods to pause, resume, seek, stop, speed up, or slow down the storyboard, or advance it to its fill period. The following is a list of the storyboard's interactive methods:
+
+- <xref:System.Windows.Media.Animation.Storyboard.Pause%2A>: Pauses the storyboard.
+
+- <xref:System.Windows.Media.Animation.Storyboard.Resume%2A>: Resumes a paused storyboard.
+
+- <xref:System.Windows.Media.Animation.Storyboard.SetSpeedRatio%2A>: Sets the storyboard's interactive speed.
+
+- <xref:System.Windows.Media.Animation.Storyboard.Seek%2A>: Seeks the storyboard the specified location.
+
+- <xref:System.Windows.Media.Animation.Storyboard.SeekAlignedToLastTick%2A>: Seeks the storyboard to the specified location. Unlike the <xref:System.Windows.Media.Animation.Storyboard.Seek%2A> method, this operation is processed before the next tick.
+
+- <xref:System.Windows.Media.Animation.Storyboard.SkipToFill%2A>: Advances the storyboard to its fill period, if it has one.
+
+- <xref:System.Windows.Media.Animation.Storyboard.Stop%2A>: Stops the storyboard.
+
+In the following example, several storyboard methods are used to interactively control a storyboard.
+
+> [!NOTE]
+> To see an example of controlling a storyboard using triggers with [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)], see [Use Event Triggers to Control a Storyboard After It Starts](how-to-use-event-triggers-to-control-a-storyboard-after-it-starts.md).
+
+## Example
+
+[!code-csharp[timingbehaviors_procedural_snip#ControlStoryboardExampleUsingWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/timingbehaviors_procedural_snip/CSharp/ControlStoryboardExample.cs#controlstoryboardexampleusingwholepage)]
+[!code-vb[timingbehaviors_procedural_snip#ControlStoryboardExampleUsingWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/timingbehaviors_procedural_snip/visualbasic/controlstoryboardexample.vb#controlstoryboardexampleusingwholepage)]
+
+## See also
+
+- [Use Event Triggers to Control a Storyboard After It Starts](how-to-use-event-triggers-to-control-a-storyboard-after-it-starts.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-control-an-animation-using-from-to-and-by.md

@@ -0,0 +1,38 @@
+---
+title: "How to: Control an Animation using From, To, and By"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "animation [WPF], From/to/by"
+  - "basic animation [WPF]"
+  - "animation [WPF], basic animation"
+  - "From/to/by animation"
+ms.assetid: 59afba57-6fc1-44c8-987e-8a5f4142adad
+---
+# How to: Control an Animation using From, To, and By
+A "From/To/By" or "basic animation" creates a transition between two target values (see [Animation Overview](animation-overview.md) for an introduction to different types of animations). To set the target values of a basic animation, use its <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A>, <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A>, and <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> properties.  The following table summarizes how the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A>, <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A>, and <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> properties may be used together or separately to determine an animation's target values.  
+  
+|Properties specified|Resulting behavior|  
+|--------------------------|------------------------|  
+|<xref:System.Windows.Media.Animation.DoubleAnimation.From%2A>|The animation progresses from the value specified by the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property to the base value of the property being animated or to a previous animation's output value, depending on how the previous animation is configured.|  
+|<xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> and <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A>|The animation progresses from the value specified by the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property to the value specified by the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property.|  
+|<xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> and <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A>|The animation progresses from the value specified by the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> property to the value specified by the sum of the <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> and <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> properties.|  
+|<xref:System.Windows.Media.Animation.DoubleAnimation.To%2A>|The animation progresses from the animated property's base value or a previous animation's output value to the value specified by the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property.|  
+|<xref:System.Windows.Media.Animation.DoubleAnimation.By%2A>|The animation progresses from the base value of the property being animated or a previous animation's output value to the sum of that value and the value specified by the <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> property.|  
+  
+> [!NOTE]
+> Do not set both the <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A> property and the <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A> property on the same animation.  
+  
+ To use other interpolation methods or animate between more than two target values, use a key frame animation. See [Key-Frame Animations Overview](key-frame-animations-overview.md) for more information.  
+  
+ For information about applying multiple animations to a single property, see [Key-Frame Animations Overview](key-frame-animations-overview.md).  
+  
+ The example below shows the different effects of setting <xref:System.Windows.Media.Animation.DoubleAnimation.To%2A>, <xref:System.Windows.Media.Animation.DoubleAnimation.By%2A>, and <xref:System.Windows.Media.Animation.DoubleAnimation.From%2A> properties on animations.  
+  
+## Example  
+ [!code-xaml[BasicAnimations_snippet#AnimationTargetValuesWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/BasicAnimations_snippet/CS/AnimationTargetValuesExample.xaml#animationtargetvalueswholepage)]  
+  
+## See also
+
+- [Animation Overview](animation-overview.md)
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [From, To, and By Animation Target Values Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Animation/TargetValues)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-control-key-frame-animation-timing.md

@@ -0,0 +1,69 @@
+---
+title: "How to: Control Key-Frame Animation Timing"
+ms.date: "03/30/2017"
+dev_langs:
+  - "csharp"
+  - "vb"
+helpviewer_keywords:
+  - "key frames [WPF], timing"
+  - "timing key-frame animation"
+ms.assetid: b059216f-7d4b-4ca8-a019-bc287ee7bf16
+---
+
+# How to: Control Key-Frame Animation Timing
+
+This example shows how to control the timing of key frames within a key-frame animation. Like other animations, key-frame animations have a <xref:System.Windows.Media.Animation.Timeline.Duration%2A> property. In addition to specifying the duration of an animation, you need to specify what part of that duration is allotted to each of its key frames. To allot the time, you specify a <xref:System.Windows.Media.Animation.KeyTime> for each key frame in the animation.
+
+The <xref:System.Windows.Media.Animation.KeyTime> for each key frame specifies when a key frame ends (it does not specify the length of time a key frame plays). You can specify a <xref:System.Windows.Media.Animation.KeyTime> as a <xref:System.TimeSpan> value, as a percentage, or as the <xref:System.Windows.Media.Animation.KeyTime.Uniform%2A> or <xref:System.Windows.Media.Animation.KeyTime.Paced%2A> special value.
+
+## Example
+
+The following example uses a <xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames> to animate a rectangle across the screen. The key frames' key times are set with <xref:System.TimeSpan> values.
+
+[!code-csharp[keyframes_snip#KeyTimesTimeSpanExample](~/samples/snippets/csharp/VS_Snippets_Wpf/keyframes_snip/CSharp/KeyTimesExample.cs#keytimestimespanexample)]
+[!code-vb[keyframes_snip#KeyTimesTimeSpanExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/keyframes_snip/visualbasic/keytimesexample.vb#keytimestimespanexample)]
+[!code-xaml[keyframes_snip#KeyTimesTimeSpanExample](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/KeyTimesExample.xaml#keytimestimespanexample)]
+
+The following illustration shows when the value of each key frame is reached.
+
+![Key values are reached at 3, 4, and 10 seconds](./media/graphicsmm-keyframe-keytime1-timespan.png "graphicsmm_keyframe_keytime1_timespan")
+
+The next example shows an animation that is identical, except that the key frames' key times are set with percentage values.
+
+[!code-csharp[keyframes_snip#KeyTimesPercentageExample](~/samples/snippets/csharp/VS_Snippets_Wpf/keyframes_snip/CSharp/KeyTimesExample.cs#keytimespercentageexample)]
+[!code-vb[keyframes_snip#KeyTimesPercentageExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/keyframes_snip/visualbasic/keytimesexample.vb#keytimespercentageexample)]
+[!code-xaml[keyframes_snip#KeyTimesPercentageExample](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/KeyTimesExample.xaml#keytimespercentageexample)]
+
+The following illustration shows when the value of each key frame is reached.
+
+![Key values are reached at 3, 4, and 10 seconds](./media/graphicsmm-keyframe-keytime2-percentage.png "graphicsmm_keyframe_keytime2_percentage")
+
+The next example uses <xref:System.Windows.Media.Animation.KeyTime.Uniform%2A> key time values.
+
+[!code-csharp[keyframes_snip#KeyTimesUniformExample](~/samples/snippets/csharp/VS_Snippets_Wpf/keyframes_snip/CSharp/KeyTimesExample.cs#keytimesuniformexample)]
+[!code-vb[keyframes_snip#KeyTimesUniformExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/keyframes_snip/visualbasic/keytimesexample.vb#keytimesuniformexample)]
+[!code-xaml[keyframes_snip#KeyTimesUniformExample](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/KeyTimesExample.xaml#keytimesuniformexample)]
+
+The following illustration shows when the value of each key frame is reached.
+
+![Key values are reached at 3.3,6.6, and 9.9 seconds](./media/graphicsmm-keyframe-keytime3-uniform.png "graphicsmm_keyframe_keytime3_uniform")
+
+The final example uses <xref:System.Windows.Media.Animation.KeyTime.Paced%2A> key time values.
+
+[!code-csharp[keyframes_snip#KeyTimesPacedExample](~/samples/snippets/csharp/VS_Snippets_Wpf/keyframes_snip/CSharp/KeyTimesExample.cs#keytimespacedexample)]
+[!code-vb[keyframes_snip#KeyTimesPacedExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/keyframes_snip/visualbasic/keytimesexample.vb#keytimespacedexample)]
+[!code-xaml[keyframes_snip#KeyTimesPacedExample](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/KeyTimesExample.xaml#keytimespacedexample)]
+
+The following illustration shows when the value of each key frame is reached.
+
+![Key values are reached at 0, 5, and 10 seconds](./media/graphicsmm-keyframe-keytime4-paced.png "graphicsmm_keyframe_keytime4_paced")
+
+For simplicity, the code versions of this example use local animations, not storyboards, because only a single animation is being applied to a single property, but the examples may be modified to use storyboards instead. For an example showing how to declare a storyboard in code, see [Animate a Property by Using a Storyboard](how-to-animate-a-property-by-using-a-storyboard.md).
+
+For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation). For more information about key frame animations, see the [Key-Frame Animations Overview](key-frame-animations-overview.md).
+
+## See also
+
+- [Key-Frame Animations Overview](key-frame-animations-overview.md)
+- [Animation Overview](animation-overview.md)
+- [How-to Topics](animation-and-timing-how-to-topics.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-control-the-fill-of-a-composite-shape.md

@@ -0,0 +1,63 @@
+---
+title: "How to: Control the Fill of a Composite Shape"
+ms.date: "03/30/2017"
+helpviewer_keywords:
+  - "shapes [WPF], composite [WPF], controlling fill"
+  - "composite shapes [WPF], controlling fill"
+  - "graphics [WPF], composite shapes"
+  - "fill [WPF], controlling"
+ms.assetid: c1c94575-9eca-48a5-a49a-2ec65259f229
+---
+# How to: Control the Fill of a Composite Shape
+
+The <xref:System.Windows.Media.GeometryGroup.FillRule%2A> property of a <xref:System.Windows.Media.GeometryGroup> or a <xref:System.Windows.Media.PathGeometry>, specifies a "rule" which the composite shape uses to determine whether a given point is part of the geometry. There are two possible values for <xref:System.Windows.Media.FillRule>: <xref:System.Windows.Media.FillRule.EvenOdd> and <xref:System.Windows.Media.FillRule.Nonzero>. The following sections will describe how to use these two rules.
+
+**EvenOdd:** This rule determines whether a point is in the fill region by drawing a ray from that point to infinity in any direction and counting the number of path segments within the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.
+
+For example, the XAML below creates a composite shape made up of a series of concentric rings (target) with a <xref:System.Windows.Media.GeometryGroup.FillRule%2A> set to <xref:System.Windows.Media.FillRule.EvenOdd>.
+
+[!code-xaml[GeometriesMiscSnippets_snip#FillRuleEvenOddValue](~/samples/snippets/xaml/VS_Snippets_Wpf/GeometriesMiscSnippets_snip/XAML/FillRuleExample.xaml#fillruleevenoddvalue)]
+
+The following illustration shows the shape created in the previous example.
+
+![A circle made up of a series concentric rings with alternating colors.](./media/how-to-control-the-fill-of-a-composite-shape/fillrule-evenodd-property.png)
+
+In the previous illustration, notice that the center and third ring are not filled. This is because a ray drawn from any point within either of those two rings passes through an even number of segments. See the following illustration:
+
+![Diagram showing the EvenOdd rays drawn in the circle.](./media/how-to-control-the-fill-of-a-composite-shape/fillrule-evenodd-rays.png)
+
+**NonZero:** This rule determines whether a point is in the fill region of the path by drawing a ray from that point to infinity in any direction and then examining the places where a segment of the shape crosses the ray. Starting with a count of zero, add one each time a Segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. After counting the crossings, if the result is zero then the point is outside the path. Otherwise, it is inside.
+
+[!code-xaml[GeometriesMiscSnippets_snip#FillRuleNonZeroValueEllipseGeometry](~/samples/snippets/xaml/VS_Snippets_Wpf/GeometriesMiscSnippets_snip/XAML/FillRuleExample.xaml#fillrulenonzerovalueellipsegeometry)]
+
+Using the previous example, a value of <xref:System.Windows.Media.FillRule.Nonzero> for <xref:System.Windows.Media.GeometryGroup.FillRule%2A> gives the following illustration as a result:
+
+![A circle made up of a series concentric rings all filled with the same color.](./media/how-to-control-the-fill-of-a-composite-shape/fillrule-value-nonzero.png)
+
+As you can see, all the rings are filled. This is because all the segments are running in the same direction and so a ray drawn from any point will cross one or more segments and the sum of the crossings will not equal zero. For example, in the following illustration, the red arrows represent the direction the segments are drawn and the white arrow represents an arbitrary ray running from a point in the innermost ring. Starting with a value of zero, for each segment that the ray crosses, a value of one is added because the segment crosses the ray from left to right.
+
+![Diagram showing the FillRule property value equal to Nonzero.](./media/how-to-control-the-fill-of-a-composite-shape/fillrule-value-equal-nonzero.png)
+
+To better demonstrate the behavior of <xref:System.Windows.Media.FillRule.Nonzero> rule a more complex shape with segments running in different directions is required. The XAML code below creates a similar shape as the previous example except that it is created with a <xref:System.Windows.Media.PathGeometry> rather then a <xref:System.Windows.Media.EllipseGeometry> which creates four concentric arcs rather then fully closed concentric circles.
+
+[!code-xaml[GeometriesMiscSnippets_snip#FillRuleNonZeroValuePathGeometry](~/samples/snippets/xaml/VS_Snippets_Wpf/GeometriesMiscSnippets_snip/XAML/FillRuleExample.xaml#fillrulenonzerovaluepathgeometry)]
+
+The following illustration shows the shape created in the previous example.
+
+![A circle made up of a series concentric rings with alternating colors with the third arc not filled.](./media/how-to-control-the-fill-of-a-composite-shape/pathgeometry-concentric-arcs.png)
+
+Notice that the third arc from the center is not filled. The following illustration shows why this is. In the illustration, the red arrows represent the direction the segments are drawn. The two white arrows represent two arbitrary rays that move out from a point in the "non-filled" region. As can be seen from the illustration, the sum of the values from a given ray crossing the segments in its path is zero. As defined above, a sum of zero means that the point is not part of the geometry (not part of the fill) while a sum that is *not* zero, including a negative value, is part of the geometry.
+
+![Diagram showing arbitrary rays crossing segments.](./media/how-to-control-the-fill-of-a-composite-shape/arbitrary-ray-cross-segment.png)
+
+> [!NOTE]
+> For the purposes of <xref:System.Windows.Media.FillRule>, all shapes are considered closed. If there is a gap in a segment, draw an imaginary line to close it. In the example above, there are small gaps in the rings. Given this, one might expect a ray that runs through the gap to give a different result then a ray running in another direction. Below is an enlarged illustration of one of these gaps and the "imaginary segment" (segment that is drawn for purposes of applying the <xref:System.Windows.Media.FillRule>) that closes it.
+
+![Diagram showing FillRule segments that are always closed.](./media/how-to-control-the-fill-of-a-composite-shape/fillrule-closed-segments.png)
+
+## Example
+
+## See also
+
+- [Create a Composite Shape](how-to-create-a-composite-shape.md)
+- [Geometry Overview](geometry-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-convert-a-bitmapsource-to-a-different-pixelformat.md

@@ -0,0 +1,24 @@
+---
+title: "How to: Convert a BitmapSource to a Different PixelFormat"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "BitmapSource objects [WPF], converting to indexed pixel format"
+  - "converting images [WPF]"
+  - "converting [WPF], BitmapSource objects to indexed pixel formats"
+  - "converting [WPF], BitmapSource objects to palettized pixel format"
+  - "BitmapSource objects [WPF], converting to palettized pixel format"
+ms.assetid: cd9df1e4-d5dc-4f57-b67b-4ec67e086b33
+---
+# How to: Convert a BitmapSource to a Different PixelFormat
+This example demonstrates how to convert a <xref:System.Windows.Media.Imaging.BitmapSource> object (<xref:System.Windows.Media.Imaging.BitmapImage>) to a different <xref:System.Windows.Media.PixelFormat> using a <xref:System.Windows.Media.Imaging.FormatConvertedBitmap>.  
+  
+## Example  
+ [!code-csharp[ImagingSnippetGallery_procedural_snip#PixelFormatConversion](~/samples/snippets/csharp/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/CSharp/PixelFormatsExample.cs#pixelformatconversion)]
+ [!code-vb[ImagingSnippetGallery_procedural_snip#PixelFormatConversion](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/VB/PixelFormatsExample.vb#pixelformatconversion)]  
+  
+## See also
+
+- [Imaging Overview](imaging-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-convert-a-bitmapsource-to-an-indexed-pixel-format.md

@@ -0,0 +1,25 @@
+---
+title: "How to: Convert a BitmapSource to an Indexed Pixel Format"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "pixel format [WPF], palettized"
+  - "graphics [WPF], converting BitmapSource objects to indexed pixel format"
+  - "BitmapSource objects [WPF], converting to indexed pixel format"
+  - "palettized pixel format [WPF]"
+  - "indexed pixel format [WPF]"
+  - "pixel format [WPF], indexed"
+  - "graphics [WPF], converting BitmapSource objects to palettized pixel format"
+  - "converting [WPF], BitmapSource objects to indexed pixel formats"
+  - "converting [WPF], BitmapSource objects to palettized pixel format"
+  - "BitmapSource objects [WPF], converting to palettized pixel format"
+ms.assetid: ccb03a83-8c72-4353-89da-48312d16548b
+---
+# How to: Convert a BitmapSource to an Indexed Pixel Format
+This example shows how to convert a <xref:System.Windows.Media.Imaging.BitmapSource> to an indexed pixel format.  
+  
+## Example  
+ [!code-csharp[ImagingSnippetGallery_procedural_snip#FormatConvertedBitmapCodeExample2WholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/CSharp/FormatConvertedBitmapExample2.cs#formatconvertedbitmapcodeexample2wholepage)]
+ [!code-vb[ImagingSnippetGallery_procedural_snip#FormatConvertedBitmapCodeExample2WholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/VB/FormatConvertedBitmapExample2.vb#formatconvertedbitmapcodeexample2wholepage)]

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-3-d-scene.md

@@ -0,0 +1,36 @@
+---
+title: "How to: Create a 3D Scene"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "scenes [WPF], 3D"
+  - "3D scenes"
+ms.assetid: adb4a598-71a2-4dd5-b677-ea3fc11b78b2
+---
+# How to: Create a 3D Scene
+This example shows how to create a 3D object that looks like a flat sheet of paper which has been rotated. A <xref:System.Windows.Controls.Viewport3D> along with the following components are used to create this simple 3D scene:  
+  
+- A camera is created using a <xref:System.Windows.Media.Media3D.PerspectiveCamera>. The camera specifies what part of the 3D scene is viewable.  
+  
+- A mesh is created to specify the shape of 3D object (sheet of paper) using the <xref:System.Windows.Media.Media3D.GeometryModel3D.Geometry%2A> property of <xref:System.Windows.Media.Media3D.GeometryModel3D>.  
+  
+- A material is specified to be displayed on the surface of the object (linear gradient in this sample) using the <xref:System.Windows.Media.Media3D.GeometryModel3D.Material%2A> property of <xref:System.Windows.Media.Media3D.GeometryModel3D>.  
+  
+- A light is created to shine on the object using <xref:System.Windows.Media.Media3D.DirectionalLight>.  
+  
+## Example  
+ The code below shows how to create a 3D scene in XAML.  
+  
+ [!code-xaml[3DGallery_snip#Basic3DShapeExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_snip/CS/Basic3DShapeExample.xaml#basic3dshapeexamplewholepage)]  
+  
+## Example  
+ The code below shows how to create the same 3D scene in procedural code.  
+  
+ [!code-csharp[3DGallery_procedural_snip#Basic3DShapeCodeExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/3DGallery_procedural_snip/CSharp/Basic3DShapeExample.cs#basic3dshapecodeexamplewholepage)]
+ [!code-vb[3DGallery_procedural_snip#Basic3DShapeCodeExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/3DGallery_procedural_snip/visualbasic/basic3dshapeexample.vb#basic3dshapecodeexamplewholepage)]  
+  
+## See also
+
+- [3D Graphics Overview](3-d-graphics-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-bitmap-from-a-visual.md

@@ -0,0 +1,24 @@
+---
+title: "How to: Create a Bitmap from a Visual"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "bitmaps [WPF], rendering from visuals"
+  - "visuals [WPF], rendering to bitmaps"
+ms.assetid: 103fc7f5-7306-4026-9d61-2005e79959f3
+---
+# How to: Create a Bitmap from a Visual
+This example shows how you can create a bitmap from a <xref:System.Windows.Media.Visual>. A <xref:System.Windows.Media.DrawingVisual> is rendered with <xref:System.Windows.Media.FormattedText>. The <xref:System.Windows.Media.Visual> is then rendered to the <xref:System.Windows.Media.Imaging.RenderTargetBitmap> creating a bitmap of the given text.  
+  
+## Example  
+ [!code-csharp[ImagingSnippetGallery_procedural_snip#CreateRTBImage](~/samples/snippets/csharp/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/CSharp/RenderTargetBitmapExample.cs#creatertbimage)]
+ [!code-vb[ImagingSnippetGallery_procedural_snip#CreateRTBImage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/VB/RenderTargetBitmapExample.vb#creatertbimage)]  
+  
+## See also
+
+- <xref:System.Windows.Media.DrawingContext>
+- [Imaging Overview](imaging-overview.md)
+- [Drawing Objects Overview](drawing-objects-overview.md)
+- [Using DrawingVisual Objects](using-drawingvisual-objects.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-combined-geometry.md

@@ -0,0 +1,42 @@
+---
+title: "How to: Create a Combined Geometry"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "combining geometries [WPF]"
+  - "graphics [WPF], combining geometries"
+  - "geometries [WPF], combining"
+ms.assetid: 54c3277c-6b6e-4b25-91be-fda0bbc706b4
+---
+# How to: Create a Combined Geometry
+This example shows how to combine geometries. To combine two geometries, use a <xref:System.Windows.Media.CombinedGeometry> object. Set its <xref:System.Windows.Media.CombinedGeometry.Geometry1%2A> and <xref:System.Windows.Media.CombinedGeometry.Geometry2%2A> properties  with the two geometries to combine, and set the <xref:System.Windows.Media.CombinedGeometry.GeometryCombineMode%2A> property, which determines how the geometries will be combined together, to `Union`, `Intersect`, `Exclude`, or `Xor`.  
+  
+ To create a composite geometry from two or more geometries, use a <xref:System.Windows.Media.GeometryGroup>.  
+  
+## Example  
+ In the following example, a <xref:System.Windows.Media.CombinedGeometry> is defined with a geometry combine mode of `Exclude`.  Both <xref:System.Windows.Media.CombinedGeometry.Geometry1%2A> and the <xref:System.Windows.Media.CombinedGeometry.Geometry2%2A> are defined as circles of the same radius, but with centers offset by 50.  
+  
+ [!code-xaml[GeometrySample#21](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/combininggeometriesexample.xaml#21)]  
+  
+ ![Results of the Exclude combine mode](./media/mil-task-combined-geometry-exclude.PNG "mil_task_combined_geometry_exclude")  
+Combined Geometry Exclude  
+  
+ In the following markup, a <xref:System.Windows.Media.CombinedGeometry> is defined with a combine mode of `Intersect`.  Both <xref:System.Windows.Media.CombinedGeometry.Geometry1%2A> and the <xref:System.Windows.Media.CombinedGeometry.Geometry2%2A> are defined as circles of the same radius, but with centers offset by 50.  
+  
+ [!code-xaml[GeometrySample#22](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/combininggeometriesexample.xaml#22)]  
+  
+ ![Results of the Intersect combine mode](./media/mil-task-combined-geometry-intersect.PNG "mil_task_combined_geometry_intersect")  
+Combined Geometry Intersect  
+  
+ In the following markup, a <xref:System.Windows.Media.CombinedGeometry> is defined with a combine mode of `Union`.  Both <xref:System.Windows.Media.CombinedGeometry.Geometry1%2A> and the <xref:System.Windows.Media.CombinedGeometry.Geometry2%2A> are defined as circles of the same radius, but with centers offset by 50.  
+  
+ [!code-xaml[GeometrySample#23](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/combininggeometriesexample.xaml#23)]  
+  
+ ![Results of the Union combine mode](./media/mil-task-combined-geometry-union.PNG "mil_task_combined_geometry_union")  
+Combined Geometry Union  
+  
+ In the following markup, a <xref:System.Windows.Media.CombinedGeometry> is defined with a combine mode of `Xor`.  Both <xref:System.Windows.Media.CombinedGeometry.Geometry1%2A> and the <xref:System.Windows.Media.CombinedGeometry.Geometry2%2A> are defined as circles of the same radius, but with centers offset by 50.  
+  
+ [!code-xaml[GeometrySample#24](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/combininggeometriesexample.xaml#24)]  
+  
+ ![Results of the Xor combine mode](./media/mil-task-combined-geometry-xor.PNG "mil_task_combined_geometry_xor")  
+Combined Geometry Xor

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-composite-drawing.md

@@ -0,0 +1,46 @@
+---
+title: "How to: Create a Composite Drawing"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "drawings [WPF], composite"
+  - "composite drawings [WPF]"
+  - "graphics [WPF], composite drawings"
+ms.assetid: 066eb0ab-5f0e-439d-85c6-dca60af269fc
+---
+# How to: Create a Composite Drawing
+This example shows how to use a <xref:System.Windows.Media.DrawingGroup> to create complex drawings by combining multiple <xref:System.Windows.Media.Drawing> objects into a single composite drawing.  
+  
+## Example  
+ The following example uses a <xref:System.Windows.Media.DrawingGroup> to create a composite drawing from the <xref:System.Windows.Media.GeometryDrawing> and <xref:System.Windows.Media.ImageDrawing> objects. The following illustration shows the output that this example produces.  
+  
+ ![A DrawingGroup with multiple drawings](./media/graphicsmm-simple.jpg "graphicsmm_simple")  
+A composite drawing that is created by using DrawingGroup  
+  
+ Note the gray border, which shows the bounds of the drawing.  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#GraphicsMMSimpleDrawingGroupExample](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/DrawingGroupExample.cs#graphicsmmsimpledrawinggroupexample)]
+ [!code-xaml[DrawingMiscSnippets_snip#GraphicsMMSimpleDrawingGroupExample](~/samples/snippets/xaml/VS_Snippets_Wpf/DrawingMiscSnippets_snip/XAML/DrawingGroupExample.xaml#graphicsmmsimpledrawinggroupexample)]  
+  
+ You can use a <xref:System.Windows.Media.DrawingGroup> to apply a <xref:System.Windows.Media.DrawingGroup.Transform%2A>, <xref:System.Windows.Media.DrawingGroup.Opacity%2A> setting, <xref:System.Windows.Media.DrawingGroup.OpacityMask%2A>, <xref:System.Windows.Media.DrawingGroup.BitmapEffect%2A>, <xref:System.Windows.Media.DrawingGroup.ClipGeometry%2A>, or <xref:System.Windows.Media.DrawingGroup.GuidelineSet%2A> to the drawings it contains. Because a <xref:System.Windows.Media.DrawingGroup> is also a <xref:System.Windows.Media.Drawing>, it can contain other <xref:System.Windows.Media.DrawingGroup> objects.  
+  
+ The following example is similar to the preceding example, except that it uses additional <xref:System.Windows.Media.DrawingGroup> objects to apply bitmap effects and an opacity mask to some of its drawings. The following illustration shows the output that this example produces.  
+  
+ ![A DrawingGroup with multiple drawings](./media/graphicsmm-multiple.jpg "graphicsmm_multiple")  
+Composite drawing that has multiple DrawingGroup objects  
+  
+ Note the gray border, which shows the bounds of the drawing.  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#GraphicsMMMultipleDrawingGroupsExample](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/DrawingGroupExample.cs#graphicsmmmultipledrawinggroupsexample)]
+ [!code-xaml[DrawingMiscSnippets_snip#GraphicsMMMultipleDrawingGroupsExample](~/samples/snippets/xaml/VS_Snippets_Wpf/DrawingMiscSnippets_snip/XAML/DrawingGroupExample.xaml#graphicsmmmultipledrawinggroupsexample)]  
+  
+ For more information about <xref:System.Windows.Media.Drawing> objects, see [Drawing Objects Overview](drawing-objects-overview.md).  
+  
+## See also
+
+- <xref:System.Windows.Media.DrawingGroup.BitmapEffect%2A>
+- <xref:System.Windows.Media.DrawingGroup.Transform%2A>
+- <xref:System.Windows.Media.DrawingGroup.OpacityMask%2A>
+- <xref:System.Windows.Media.DrawingGroup.Opacity%2A>
+- <xref:System.Windows.Media.DrawingGroup.ClipGeometry%2A>
+- <xref:System.Windows.Media.DrawingGroup.GuidelineSet%2A>
+- [Drawing Objects Overview](drawing-objects-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-composite-shape.md

@@ -0,0 +1,29 @@
+---
+title: "How to: Create a Composite Shape"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "shapes [WPF], composite"
+  - "composite shapes [WPF]"
+  - "graphics [WPF], composite shapes"
+ms.assetid: 8e5c7ef4-d7ed-4c43-afc9-ca01325c300b
+---
+# How to: Create a Composite Shape
+This example shows how to create composite shapes using <xref:System.Windows.Media.Geometry> objects and display them using a <xref:System.Windows.Shapes.Path> element. In the following example, a <xref:System.Windows.Media.LineGeometry>, <xref:System.Windows.Media.EllipseGeometry>, and a <xref:System.Windows.Media.RectangleGeometry> are used with a <xref:System.Windows.Media.GeometryGroup> to create a composite shape. The geometries are then drawn using a <xref:System.Windows.Shapes.Path> element.  
+  
+## Example  
+ [!code-xaml[GeometrySample#19](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/combininggeometriesexample.xaml#19)]  
+  
+ [!code-csharp[GeometriesMiscSnippets_procedural_snip#CompositeShapeCodeExampleInline1](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometriesMiscSnippets_procedural_snip/CSharp/CompositeShapeExample.cs#compositeshapecodeexampleinline1)]
+ [!code-vb[GeometriesMiscSnippets_procedural_snip#CompositeShapeCodeExampleInline1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometriesMiscSnippets_procedural_snip/visualbasic/compositeshapeexample.vb#compositeshapecodeexampleinline1)]  
+  
+ The following illustration shows the shape created in the previous example.  
+  
+ ![A composite geometry created using a GeometryGroup](./media/wcpsdk-graphicsmm-compositegeometryexample1.jpg "wcpsdk_graphicsmm_compositegeometryexample1")  
+Composite Geometry  
+  
+ More complex shapes, such as polygons and shapes with curved segments, may be created using a <xref:System.Windows.Media.PathGeometry>. For an example showing how to create a shape using a <xref:System.Windows.Media.PathGeometry>, see [Create a Shape by Using a PathGeometry](how-to-create-a-shape-by-using-a-pathgeometry.md).  Although this example renders a shape to the screen using a <xref:System.Windows.Shapes.Path> element, <xref:System.Windows.Media.Geometry> objects may also be used to describe the contents of a <xref:System.Windows.Media.GeometryDrawing> or a <xref:System.Windows.Media.DrawingContext>. They may also be used for clipping and hit-testing.  
+  
+ This example is part of larger sample; for the complete sample, see the [Geometries Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Geometry).

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-cubic-bezier-curve.md

@@ -0,0 +1,34 @@
+---
+title: "How to: Create a Cubic Bezier Curve"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "curves [WPF], cubic Bezier"
+  - "Bezier curves [WPF], cubic"
+  - "graphics [WPF], cubic Bezier curves"
+  - "cubic Bezier curves [WPF]"
+ms.assetid: 450a3a77-7c57-48b0-a008-0f6051add980
+---
+# How to: Create a Cubic Bezier Curve
+This example shows how to create a cubic Bezier curve. To create a cubic Bezier curve, use the <xref:System.Windows.Media.PathGeometry>, <xref:System.Windows.Media.PathFigure>, and <xref:System.Windows.Media.BezierSegment> classes.  To display the resulting geometry, use a <xref:System.Windows.Shapes.Path> element, or use it with a <xref:System.Windows.Media.GeometryDrawing> or a <xref:System.Windows.Media.DrawingContext>. In the following examples, a cubic Bezier curve is drawn from (10, 100) to (300, 100). The curve has control points of (100, 0) and (200, 200).  
+  
+## Example  
+ [xaml]  
+  
+ In [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)], you may use abbreviated markup syntax to describe a path.  
+  
+ [!code-xaml[GeometrySample#53](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/geometryattributesyntaxexample.xaml#53)]  
+  
+ [xaml]  
+  
+ In [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)], you can also draw a cubic Bezier curve using object tags. The following is equivalent to the previous [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] example.  
+  
+ [!code-xaml[GeometrySample#33](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/pathgeometryexample.xaml#33)]  
+  
+ This example is part of larger sample; for the complete sample, see the [Geometries Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Geometry).  
+  
+## See also
+
+- [Create an Elliptical Arc](how-to-create-an-elliptical-arc.md)
+- [Create a LineSegment in a PathGeometry](how-to-create-a-linesegment-in-a-pathgeometry.md)
+- [Create a Cubic Bezier Curve](how-to-create-a-cubic-bezier-curve.md)
+- [Create a Quadratic Bezier Curve](how-to-create-a-quadratic-bezier-curve.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-geometrydrawing.md

@@ -0,0 +1,31 @@
+---
+title: "How to: Create a GeometryDrawing"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "shapes [WPF], renderable"
+  - "renderable shapes [WPF]"
+  - "graphics [WPF], GeometryDrawing class"
+  - "classes [WPF], GeometryDrawing"
+ms.assetid: 11d3c096-91ba-4d41-9bba-aeac0db70f97
+---
+# How to: Create a GeometryDrawing
+This example shows how to create and display a <xref:System.Windows.Media.GeometryDrawing>. A <xref:System.Windows.Media.GeometryDrawing> enables you to create shape with a fill and an outline by associating a <xref:System.Windows.Media.Pen> and a <xref:System.Windows.Media.Brush> with a <xref:System.Windows.Media.Geometry>. The <xref:System.Windows.Media.GeometryDrawing.Geometry%2A> describes the shape's structure, the <xref:System.Windows.Media.GeometryDrawing.Brush%2A> describes the shape's fill, and the <xref:System.Windows.Media.GeometryDrawing.Pen%2A> describes the shape's outline.  
+  
+## Example  
+ The following example uses a <xref:System.Windows.Media.GeometryDrawing> to render a shape. The shape is described by a <xref:System.Windows.Media.GeometryGroup> and two <xref:System.Windows.Media.EllipseGeometry> objects. The shape's interior is painted with a <xref:System.Windows.Media.LinearGradientBrush> and its outline is drawn with a <xref:System.Windows.Media.Brushes.Black%2A> <xref:System.Windows.Media.Pen>. The <xref:System.Windows.Media.GeometryDrawing> is displayed using an <xref:System.Windows.Media.ImageDrawing> and an <xref:System.Windows.Controls.Image> element.  
+  
+ [!code-csharp[DrawingMiscSnippets_snip#GeometryDrawingExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/DrawingMiscSnippets_snip/CSharp/GeometryDrawingExample.cs#geometrydrawingexamplewholepage)]
+ [!code-xaml[DrawingMiscSnippets_snip#GeometryDrawingExampleWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/DrawingMiscSnippets_snip/XAML/GeometryDrawingExample.xaml#geometrydrawingexamplewholepage)]  
+  
+ The following illustration shows the resulting <xref:System.Windows.Media.GeometryDrawing>.  
+  
+ ![A GeometryDrawing of two ellipses](./media/graphicsmm-geodraw.jpg "graphicsmm_geodraw")  
+  
+ To create more complex drawings, you can combine multiple drawing objects into a single composite drawing using a <xref:System.Windows.Media.DrawingGroup>.  
+  
+## See also
+
+- <xref:System.Windows.Media.DrawingGroup>
+- [Drawing Objects Overview](drawing-objects-overview.md)
+- [Geometry Overview](geometry-overview.md)
+- [Create a Composite Drawing](how-to-create-a-composite-drawing.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-line-using-a-linegeometry.md

@@ -0,0 +1,31 @@
+---
+title: "How to: Create a Line Using a LineGeometry"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "graphics [WPF], lines"
+ms.assetid: 41231b22-1f74-4c26-a8e7-a55b29f8f6bd
+---
+# How to: Create a Line Using a LineGeometry
+This example shows how to use the <xref:System.Windows.Media.LineGeometry> class to describe a line. A <xref:System.Windows.Media.LineGeometry> is defined by its start and end points.  
+  
+## Example  
+ The following example shows how to create and render a <xref:System.Windows.Media.LineGeometry>.  A <xref:System.Windows.Shapes.Path> element is used to render the line.  Since a line has no area, the <xref:System.Windows.Shapes.Path> object's <xref:System.Windows.Shapes.Shape.Fill%2A> is not specified; instead the <xref:System.Windows.Shapes.Shape.Stroke%2A> and <xref:System.Windows.Shapes.Shape.StrokeThickness%2A> properties are used.  
+  
+ [!code-xaml[GeometryOverviewSamples_snip#GraphicsMMLineGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_snip/CS/GeometryExamples.xaml#graphicsmmlinegeometryexample)]  
+  
+ [!code-csharp[GeometryOverviewSamples_procedural_snip#GraphicsMMLineGeometryExample](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/CSharp/GeometryExamples.cs#graphicsmmlinegeometryexample)]
+ [!code-vb[GeometryOverviewSamples_procedural_snip#GraphicsMMLineGeometryExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometryOverviewSamples_procedural_snip/visualbasic/geometryexamples.vb#graphicsmmlinegeometryexample)]  
+  
+ ![A LineGeometry](./media/graphicsmm-line.gif "graphicsmm_line")  
+A LineGeometry drawn from (10,20) to (100,130)  
+  
+ Other simple geometry classes include <xref:System.Windows.Media.LineGeometry> and <xref:System.Windows.Media.EllipseGeometry>. These geometries, as well as more complex ones, can also be created using a <xref:System.Windows.Media.PathGeometry> or <xref:System.Windows.Media.StreamGeometry>. For more information, see the [Geometry Overview](geometry-overview.md).  
+  
+## See also
+
+- [Geometry Overview](geometry-overview.md)
+- [Create a Composite Shape](how-to-create-a-composite-shape.md)
+- [Create a Shape by Using a PathGeometry](how-to-create-a-shape-by-using-a-pathgeometry.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-linesegment-in-a-pathgeometry.md

@@ -0,0 +1,107 @@
+---
+title: "How to: Create a LineSegment in a PathGeometry"
+ms.date: "03/30/2017"
+dev_langs:
+  - "csharp"
+  - "vb"
+helpviewer_keywords:
+  - "line segments [WPF], creating"
+  - "graphics [WPF], line segments"
+ms.assetid: 0155ed47-a20d-49a7-a306-186d8e07fbc4
+---
+
+# How to: Create a LineSegment in a PathGeometry
+
+This example shows how to create a line segment. To create a line segment, use the <xref:System.Windows.Media.PathGeometry>, <xref:System.Windows.Media.PathFigure>, and <xref:System.Windows.Media.LineSegment> classes.
+
+## Example
+
+The following examples draw a <xref:System.Windows.Media.LineSegment> from (10, 50) to (200, 70). The following illustration shows the resulting <xref:System.Windows.Media.LineSegment>; a grid background was added to show the coordinate system.
+
+![A LineSegment in a PathFigure](./media/graphicsmm-pathgeometrylinesegment.png "graphicsmm_pathgeometrylinesegment")
+A LineSegment drawn from (10,50) to (200,70)
+
+[xaml]
+
+In [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)], you may use attribute syntax to describe a path.
+
+```xaml
+<Path Stroke="Black" StrokeThickness="1"
+  Data="M 10,50 L 200,70" />
+```
+
+[xaml]
+
+(Note that this attribute syntax actually creates a <xref:System.Windows.Media.StreamGeometry>, a lighter-weight version of a <xref:System.Windows.Media.PathGeometry>. For more information, see the [Path Markup Syntax](path-markup-syntax.md) page.)
+
+In [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)], you may also draw a line segment by using object element syntax. The following is equivalent to the previous [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] example.
+
+```xaml
+<Path Stroke="Black" StrokeThickness="1">
+  <Path.Data>
+    <PathGeometry>
+      <PathFigure StartPoint="10,50">
+        <LineSegment Point="200,70" />
+      </PathFigure>
+    </PathGeometry>
+  </Path.Data>
+</Path>
+```
+
+```csharp
+PathFigure myPathFigure = new PathFigure();
+myPathFigure.StartPoint = new Point(10, 50);
+
+LineSegment myLineSegment = new LineSegment();
+myLineSegment.Point = new Point(200, 70);
+
+PathSegmentCollection myPathSegmentCollection = new PathSegmentCollection();
+myPathSegmentCollection.Add(myLineSegment);
+
+myPathFigure.Segments = myPathSegmentCollection;
+
+PathFigureCollection myPathFigureCollection = new PathFigureCollection();
+myPathFigureCollection.Add(myPathFigure);
+
+PathGeometry myPathGeometry = new PathGeometry();
+myPathGeometry.Figures = myPathFigureCollection;
+
+Path myPath = new Path();
+myPath.Stroke = Brushes.Black;
+myPath.StrokeThickness = 1;
+myPath.Data = myPathGeometry;
+```
+
+```vb
+Dim myPathFigure As New PathFigure()
+myPathFigure.StartPoint = New Point(10, 50)
+
+Dim myLineSegment As New LineSegment()
+myLineSegment.Point = New Point(200, 70)
+
+Dim myPathSegmentCollection As New PathSegmentCollection()
+myPathSegmentCollection.Add(myLineSegment)
+
+myPathFigure.Segments = myPathSegmentCollection
+
+Dim myPathFigureCollection As New PathFigureCollection()
+myPathFigureCollection.Add(myPathFigure)
+
+Dim myPathGeometry As New PathGeometry()
+myPathGeometry.Figures = myPathFigureCollection
+
+Dim myPath As New Path()
+myPath.Stroke = Brushes.Black
+myPath.StrokeThickness = 1
+myPath.Data = myPathGeometry
+```
+
+This example is part of larger sample; for the complete sample, see the [Geometries Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Geometry).
+
+## See also
+
+- <xref:System.Windows.Media.PathFigure>
+- <xref:System.Windows.Media.PathGeometry>
+- <xref:System.Windows.Media.GeometryDrawing>
+- <xref:System.Windows.Shapes.Path>
+- [Geometry Overview](geometry-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-new-bitmapsource.md

@@ -0,0 +1,21 @@
+---
+title: "How to: Create a new BitmapSource"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "creating new BitmapSource objects [WPF]"
+  - "BitmapSource objects [WPF], creating"
+ms.assetid: 0adf447e-014f-4ceb-97b2-f21affe6d55b
+---
+# How to: Create a new BitmapSource
+This example demonstrates how to use the <xref:System.Windows.Media.Imaging.BitmapSource.Create%2A> method of <xref:System.Windows.Media.Imaging.BitmapSource> to create a new <xref:System.Windows.Media.Imaging.BitmapSource> object.  
+  
+## Example  
+ [!code-csharp[ImagingSnippetGallery_procedural_snip#BitmapSourceCreate](~/samples/snippets/csharp/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/CSharp/BitmapSourceExample.cs#bitmapsourcecreate)]
+ [!code-vb[ImagingSnippetGallery_procedural_snip#BitmapSourceCreate](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ImagingSnippetGallery_procedural_snip/VB/BitmapSourceExample.vb#bitmapsourcecreate)]  
+  
+## See also
+
+- [Imaging Overview](imaging-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-quadratic-bezier-curve.md

@@ -0,0 +1,35 @@
+---
+title: "How to: Create a Quadratic Bezier Curve"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "Bezier curves [WPF], creating"
+  - "quadratic Bezier curves [WPF], creating"
+  - "graphics [WPF], quadratic Bezier curves"
+ms.assetid: cd8fca4a-504e-4fd8-92ea-2969065a6e02
+---
+# How to: Create a Quadratic Bezier Curve
+This example shows how to create a quadratic Bezier curve.  To create a quadratic Bezier curve, use the <xref:System.Windows.Media.PathGeometry>, <xref:System.Windows.Media.PathFigure>, and <xref:System.Windows.Media.QuadraticBezierSegment> classes.  
+  
+## Example  
+ In the following examples, a quadratic Bezier curve is drawn from (10,100) to (300,100). The curve has a control point of (200,200).  
+  
+ [xaml]  
+  
+ In [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)], you can use attribute syntax to describe a path.  
+  
+ [!code-xaml[GeometrySample#54](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/geometryattributesyntaxexample.xaml#54)]  
+  
+ [xaml]  
+  
+ (Note that this attribute syntax actually creates a <xref:System.Windows.Media.StreamGeometry>, a lighter-weight version of a <xref:System.Windows.Media.PathGeometry>. For more information, see the [Path Markup Syntax](path-markup-syntax.md) page.)  
+  
+ In [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)], you may also draw a quadratic Bezier curve using object element syntax. The following is equivalent to the previous [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] example.  
+  
+ [!code-xaml[GeometrySample#34](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/pathgeometryexample.xaml#34)]  
+  
+ This example is part of larger sample; for the complete sample, see the [Geometries Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Geometry).  
+  
+## See also
+
+- [Create an Elliptical Arc](how-to-create-an-elliptical-arc.md)
+- [Create a Cubic Bezier Curve](how-to-create-a-cubic-bezier-curve.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-reflection.md

@@ -0,0 +1,31 @@
+---
+title: "How to: Create a Reflection"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "creating reflections [WPF]"
+  - "brushes [WPF], creating reflections"
+  - "reflections [WPF], creating"
+ms.assetid: 4f017e16-ab80-43c7-98df-03b6bddbb203
+---
+# How to: Create a Reflection
+This example shows how to use a <xref:System.Windows.Media.VisualBrush> to create a reflection. Because a <xref:System.Windows.Media.VisualBrush> can display an existing visual, you can use this capability to produce interesting visual effects, such as reflections and magnification.  
+  
+## Example  
+ The following example uses a <xref:System.Windows.Media.VisualBrush> to create a reflection of a <xref:System.Windows.Controls.Border> that contains several elements. The following illustration shows the output that this example produces.  
+  
+ ![A reflected Visual object](./media/graphicsmm-visualbrush-reflection-small.jpg "graphicsmm_visualbrush_reflection_small")  
+A reflected Visual object  
+  
+ [!code-csharp[visualbrush_markup_snip#GraphicsMMVisualBrushReflectionExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/visualbrush_markup_snip/CSharp/ReflectionExample.cs#graphicsmmvisualbrushreflectionexamplewholepage)]
+ [!code-vb[visualbrush_markup_snip#GraphicsMMVisualBrushReflectionExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/visualbrush_markup_snip/visualbasic/reflectionexample.vb#graphicsmmvisualbrushreflectionexamplewholepage)]
+ [!code-xaml[visualbrush_markup_snip#GraphicsMMVisualBrushReflectionExampleWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/visualbrush_markup_snip/XAML/ReflectionExample.xaml#graphicsmmvisualbrushreflectionexamplewholepage)]  
+  
+ For the complete sample, which includes examples that show how to magnify parts of the screen and how to create reflections, see [VisualBrush Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/VisualBrush).  
+  
+## See also
+
+- <xref:System.Windows.Media.VisualBrush>
+- [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-shape-by-using-a-pathgeometry.md

@@ -0,0 +1,31 @@
+---
+title: "How to: Create a Shape by Using a PathGeometry"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "shapes [WPF], creating with PathGeometry class"
+  - "graphics [WPF], shapes"
+ms.assetid: 49a4a8b7-e738-45be-8dac-b54a6d8f5b21
+---
+# How to: Create a Shape by Using a PathGeometry
+This example shows how to create a shape using the <xref:System.Windows.Media.PathGeometry> class. <xref:System.Windows.Media.PathGeometry> objects are composed of one or more <xref:System.Windows.Media.PathFigure> objects; each <xref:System.Windows.Media.PathFigure> represents a different "figure" or shape. Each <xref:System.Windows.Media.PathFigure> is itself composed of one or more <xref:System.Windows.Media.PathSegment> objects, each representing a connected portion of the figure or shape. Segment types include <xref:System.Windows.Media.LineSegment>, <xref:System.Windows.Media.ArcSegment>, and <xref:System.Windows.Media.BezierSegment>.  
+  
+## Example  
+ The following example uses a <xref:System.Windows.Media.PathGeometry> to create a triangle. The  <xref:System.Windows.Media.PathGeometry> is displayed using a <xref:System.Windows.Shapes.Path> element.  
+  
+ [!code-xaml[GeometrySample#49](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/pathgeometryexample.xaml#49)]  
+  
+ The following illustration shows the shape created in the previous example.  
+  
+ ![A PathGeometry](./media/wcpsdk-graphicsmm-pathgeometry-triangle.gif "wcpsdk_graphicsmm_pathgeometry_triangle")  
+A triangle created with a PathGeometry  
+  
+ The previous example showed how to create a relatively simple shape, a triangle. A <xref:System.Windows.Media.PathGeometry> can also be used to create more complex shapes, including arcs and curves. For examples, see [Create an Elliptical Arc](how-to-create-an-elliptical-arc.md), [Create a Cubic Bezier Curve](how-to-create-a-cubic-bezier-curve.md), and [Create a Quadratic Bezier Curve](how-to-create-a-quadratic-bezier-curve.md).  
+  
+ This example is part of larger sample; for the complete sample, see the [Geometries Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Geometry).  
+  
+## See also
+
+- <xref:System.Windows.Shapes.Path>
+- <xref:System.Windows.Media.GeometryDrawing>
+- [Geometry Overview](geometry-overview.md)
+- [Geometries Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Geometry)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-a-shape-using-a-streamgeometry.md

@@ -0,0 +1,40 @@
+---
+title: "How to: Create a Shape Using a StreamGeometry"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "graphics [WPF], shapes"
+  - "shapes [WPF], creating with StreamGeometry class"
+ms.assetid: 08f7c8ce-074b-49cd-9aba-cc9592d4ee51
+---
+# How to: Create a Shape Using a StreamGeometry
+<xref:System.Windows.Media.StreamGeometry> is lightweight alternative to <xref:System.Windows.Media.PathGeometry> for creating geometric shapes. Use a <xref:System.Windows.Media.StreamGeometry> when you need to describe a complex geometry but do not want the overhead of supporting data binding, animation, or modification. For example, because of its efficiency, the <xref:System.Windows.Media.StreamGeometry> class is a good choice for describing adorners.  
+  
+## Example  
+ The following example uses attribute syntax to create a triangular <xref:System.Windows.Media.StreamGeometry> in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)].  
+  
+ [!code-xaml[GeometriesMiscSnippets_snip#StreamGeometryTriangleExampleWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/GeometriesMiscSnippets_snip/XAML/StreamGeometryExample.xaml#streamgeometrytriangleexamplewholepage)]  
+  
+ For more information about <xref:System.Windows.Media.StreamGeometry> attribute syntax, see the [Path Markup Syntax](path-markup-syntax.md) page.  
+  
+## Example  
+ The next example uses a <xref:System.Windows.Media.StreamGeometry> to define a triangle in code. First, the example creates a <xref:System.Windows.Media.StreamGeometry>, then obtains a <xref:System.Windows.Media.StreamGeometryContext> and uses it to describe the triangle.  
+  
+ [!code-csharp[GeometriesMiscSnippets_procedural_snip#StreamGeometryTriangleExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometriesMiscSnippets_procedural_snip/CSharp/StreamGeometryTriangleExample.cs#streamgeometrytriangleexamplewholepage)]
+ [!code-vb[GeometriesMiscSnippets_procedural_snip#StreamGeometryTriangleExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometriesMiscSnippets_procedural_snip/visualbasic/streamgeometrytriangleexample.vb#streamgeometrytriangleexamplewholepage)]  
+  
+## Example  
+ The next example creates a method that uses a <xref:System.Windows.Media.StreamGeometry> and <xref:System.Windows.Media.StreamGeometryContext> to define a geometric shape based on specified parameters.  
+  
+ [!code-csharp[GeometriesMiscSnippets_procedural_snip#StreamGeometryExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometriesMiscSnippets_procedural_snip/CSharp/StreamGeometryExample.cs#streamgeometryexamplewholepage)]
+ [!code-vb[GeometriesMiscSnippets_procedural_snip#StreamGeometryExampleWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/GeometriesMiscSnippets_procedural_snip/visualbasic/streamgeometryexample.vb#streamgeometryexamplewholepage)]  
+  
+## See also
+
+- <xref:System.Windows.Media.PathGeometry>
+- <xref:System.Windows.Media.StreamGeometry>
+- <xref:System.Windows.Media.StreamGeometryContext>
+- [Create a Shape by Using a PathGeometry](how-to-create-a-shape-by-using-a-pathgeometry.md)
+- [Geometry Overview](geometry-overview.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-an-elliptical-arc.md

@@ -0,0 +1,35 @@
+---
+title: "How to: Create an Elliptical Arc"
+ms.date: "03/30/2017"
+helpviewer_keywords: 
+  - "graphics [WPF], elliptical arcs"
+  - "elliptical arcs [WPF], creating"
+  - "arcs [WPF], elliptical"
+ms.assetid: 3dcfe502-3485-45de-99fb-d53a1367c484
+---
+# How to: Create an Elliptical Arc
+This example shows how to draw an elliptical arc. To create an elliptical arc, use the <xref:System.Windows.Media.PathGeometry>, <xref:System.Windows.Media.PathFigure>, and <xref:System.Windows.Media.ArcSegment> classes.  
+  
+## Example  
+ In the following examples, an elliptical arc is drawn from (10,100) to (200,100). The arc has a <xref:System.Windows.Media.ArcSegment.Size%2A> of 100 by 50 device-independent pixels, a <xref:System.Windows.Media.ArcSegment.RotationAngle%2A> of 45 degrees, an <xref:System.Windows.Media.ArcSegment.IsLargeArc%2A> setting of `true`, and a <xref:System.Windows.Media.ArcSegment.SweepDirection%2A> of <xref:System.Windows.Media.SweepDirection.Counterclockwise>.  
+  
+ [xaml]  
+  
+ In [!INCLUDE[TLA#tla_xaml](../../../includes/tlasharptla-xaml-md.md)], you can use attribute syntax to describe a path.  
+  
+ [!code-xaml[GeometrySample#56](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/geometryattributesyntaxexample.xaml#56)]  
+  
+ [xaml]  
+  
+ (Note that this attribute syntax actually creates a <xref:System.Windows.Media.StreamGeometry>, a lighter-weight version of a <xref:System.Windows.Media.PathGeometry>. For more information, see the [Path Markup Syntax](path-markup-syntax.md) page.)  
+  
+ In [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)], you can also draw an elliptical arc by explicitly using object tags. The following is equivalent to the preceding [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)] markup.  
+  
+ [!code-xaml[GeometrySample#36](~/samples/snippets/csharp/VS_Snippets_Wpf/GeometrySample/CS/pathgeometryexample.xaml#36)]  
+  
+ This example is part of a larger sample. For the complete sample, see the [Geometries Sample](https://github.com/Microsoft/WPF-Samples/tree/master/Graphics/Geometry).  
+  
+## See also
+
+- [Create a Quadratic Bezier Curve](how-to-create-a-quadratic-bezier-curve.md)
+- [Create a Cubic Bezier Curve](how-to-create-a-cubic-bezier-curve.md)

dotnet-desktop-guide/framework/wpf/graphics-multimedia/how-to-create-different-tile-patterns-with-a-tilebrush.md

@@ -0,0 +1,33 @@
+---
+title: "How to: Create Different Tile Patterns with a TileBrush"
+ms.date: "03/30/2017"
+dev_langs: 
+  - "csharp"
+  - "vb"
+helpviewer_keywords: 
+  - "TileBrush [WPF], creating tile patterns"
+  - "tile patterns [WPF], creating"
+  - "creating [WPF], tile patterns with TileBrush"
+ms.assetid: 5aa46632-3527-4668-9d8d-0375c8af28aa
+---
+# How to: Create Different Tile Patterns with a TileBrush
+This example shows how to use the <xref:System.Windows.Media.TileBrush.TileMode%2A> property of a <xref:System.Windows.Media.TileBrush> to create a pattern.  
+  
+ The <xref:System.Windows.Media.TileBrush.TileMode%2A> property enables you to specify how the content of a <xref:System.Windows.Media.TileBrush> is repeated, that is, tiled to fill an output area. To create a pattern, you set the <xref:System.Windows.Media.TileBrush.TileMode%2A> to <xref:System.Windows.Media.TileMode.Tile>, <xref:System.Windows.Media.TileMode.FlipX>, <xref:System.Windows.Media.TileMode.FlipY>, or <xref:System.Windows.Media.TileMode.FlipXY>. You must also set the <xref:System.Windows.Media.TileBrush.Viewport%2A> of the <xref:System.Windows.Media.TileBrush> so that it is smaller than the area that you are painting; otherwise, only a single tile is produced, regardless which <xref:System.Windows.Media.TileBrush.TileMode%2A> setting you use.  
+  
+## Example  
+ The following example creates five <xref:System.Windows.Media.DrawingBrush> objects, gives them each a different <xref:System.Windows.Media.TileBrush.TileMode%2A> setting, and uses them to paint five rectangles. Although this example uses the <xref:System.Windows.Media.DrawingBrush> class to demonstrate <xref:System.Windows.Media.TileBrush.TileMode%2A> behavior, the <xref:System.Windows.Media.TileBrush.TileMode%2A> property works identically for all the <xref:System.Windows.Media.TileBrush> objects, that is, for <xref:System.Windows.Media.ImageBrush>, <xref:System.Windows.Media.VisualBrush>, and <xref:System.Windows.Media.DrawingBrush>.  
+  
+ The following illustration shows the output that this example produces.  
+  
+ ![TileBrush tiling example output](./media/graphicsmm-drawingbrushtilemodeexample.png "graphicsmm_DrawingBrushTileModeExample")  
+Tile patterns created with the TileMode property  
+  
+ [!code-csharp[BrushesIntroduction_snip#GraphicsMMDrawingBrushTileModeExample](~/samples/snippets/csharp/VS_Snippets_Wpf/BrushesIntroduction_snip/CSharp/TileModeExample.cs#graphicsmmdrawingbrushtilemodeexample)]
+ [!code-vb[BrushesIntroduction_snip#GraphicsMMDrawingBrushTileModeExample](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BrushesIntroduction_snip/visualbasic/tilemodeexample.vb#graphicsmmdrawingbrushtilemodeexample)]
+ [!code-xaml[BrushesIntroduction_snip#GraphicsMMDrawingBrushTileModeExample](~/samples/snippets/xaml/VS_Snippets_Wpf/BrushesIntroduction_snip/XAML/TileModeExample.xaml#graphicsmmdrawingbrushtilemodeexample)]  
+  
+## See also
+
+- [Set the Tile Size for a TileBrush](how-to-set-the-tile-size-for-a-tilebrush.md)
+- [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md)