Links: .NET Desktop - framework\wpf (#109)

* Links: .NET Desktop - framework\wpf

* Apply suggestions from code review

Co-authored-by: Andy De George <[email protected]>
This commit is contained in:
David Coulter
2020-11-05 13:50:29 -08:00
committed by GitHub
co-authored by Andy De George
parent c1d6e1d23e
commit 674b773578
67 changed files with 657 additions and 136 deletions
@@ -16,21 +16,27 @@ helpviewer_keywords:
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:
@@ -44,6 +50,7 @@ When working with animations in WPF, there are a number of tips and tricks that
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>.
@@ -53,6 +60,7 @@ When working with animations in WPF, there are a number of tips and tricks that
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.
@@ -72,6 +80,7 @@ When working with animations in WPF, there are a number of tips and tricks that
**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)]
@@ -90,16 +99,18 @@ When working with animations in WPF, there are a number of tips and tricks that
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 remove a <xref:System.Windows.Media.Animation.Storyboard> you started with an event trigger, see [How to: Remove a Storyboard](/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.
@@ -110,6 +121,7 @@ When working with animations in WPF, there are a number of tips and tricks that
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.
@@ -6,13 +6,16 @@ helpviewer_keywords:
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.
@@ -29,12 +32,13 @@ Bitmap effects enable designers and developers to apply visual effects to render
> [!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)].
@@ -49,15 +53,17 @@ Bitmap effects enable designers and developers to apply visual effects to render
> 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.
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](/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)
- [Unmanaged WPF Bitmap Effect](/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)
@@ -12,10 +12,13 @@ helpviewer_keywords:
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?
## 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.
@@ -43,7 +46,9 @@ This topic introduces <xref:System.Windows.Media.Drawing> objects and describes
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>.
@@ -63,7 +68,9 @@ A GeometryDrawing
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>.
@@ -77,6 +84,7 @@ A 100 by 100 ImageDrawing
For more information about images, see the [Imaging Overview](imaging-overview.md).
<a name="playmedia"></a>
## Play Media (Code Only)
> [!NOTE]
@@ -142,7 +150,9 @@ A 100 by 100 ImageDrawing
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)]
@@ -151,7 +161,9 @@ A 100 by 100 ImageDrawing
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.
@@ -173,15 +185,17 @@ Order of DrawingGroup operations
|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.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](/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](/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](/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](/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")|
|<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](/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.
@@ -193,7 +207,9 @@ A DrawingImage
[!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.
@@ -207,11 +223,15 @@ A GeometryDrawing used with a DrawingBrush
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).
@@ -219,7 +239,9 @@ A GeometryDrawing used with a DrawingBrush
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.
@@ -10,14 +10,16 @@ helpviewer_keywords:
ms.assetid: 701246cd-66b7-4d69-ada9-17b3b433d95d
---
# How to: Render on a Per Frame Interval Using CompositionTarget
The [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] animation engine provides many features for creating frame-based animation. However, there are application scenarios in which you need finer-grained control over rendering on a per frame basis. The <xref:System.Windows.Media.CompositionTarget> object provides the ability to create custom animations based on a per-frame callback.
<xref:System.Windows.Media.CompositionTarget> is a static class which represents the display surface on which your application is being drawn. The <xref:System.Windows.Media.CompositionTarget.Rendering> event is raised each time the application's scene is drawn. The rendering frame rate is the number of times the scene is drawn per second.
> [!NOTE]
> For a complete code sample using <xref:System.Windows.Media.CompositionTarget>, see [Using the CompositionTarget Sample](https://go.microsoft.com/fwlink/?LinkID=160045).
> For a complete code sample using <xref:System.Windows.Media.CompositionTarget>, see [Using the CompositionTarget Sample](https://github.com/microsoft/WPF-Samples/tree/master/Visual%20Layer/CompositionTarget).
## Example
The <xref:System.Windows.Media.CompositionTarget.Rendering> event fires during the [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] rendering process. The following example shows how you register an <xref:System.EventHandler> delegate to the static <xref:System.Windows.Media.CompositionTarget.Rendering> method on <xref:System.Windows.Media.CompositionTarget>.
[!code-csharp[CompositionTargetSample#CompositionTarget1](~/samples/snippets/csharp/VS_Snippets_Wpf/CompositionTargetSample/CSharp/Window1.xaml.cs#compositiontarget1)]
@@ -23,9 +23,11 @@ helpviewer_keywords:
ms.assetid: 72aad87a-e6f3-4937-94cd-a18b7766e990
---
# Imaging Overview
This topic provides an introduction to the Microsoft Windows Presentation Foundation Imaging Component. WPF Imaging enables developers to display, transform, and format images.
## WPF Imaging Component
WPF Imaging provides significant enhancements in imaging capabilities within Microsoft Windows. Imaging capabilities, such as displaying a bitmap or using an image on a common control were previously reliant upon the Microsoft Windows Graphics Device Interface (GDI) or Microsoft Windows GDI+ libraries. These API provide baseline imaging functionality, but lack features such as support for codec extensibility and high fidelity image support. WPF Imaging is designed to overcome the shortcomings of GDI and GDI+ and provide a new set of API to display and use images within your applications.
There are two ways to access the WPF Imaging API, a managed component and an unmanaged component. The unmanaged component provides the following features.
@@ -49,6 +51,7 @@ This topic provides an introduction to the Microsoft Windows Presentation Founda
This topic provides additional information about the managed component. For more information on the unmanaged API see the [Unmanaged WPF Imaging Component](/windows/desktop/wic/-wic-lh) documentation.
<a name="_imageformats"></a>
## WPF Image Formats
A codec is used to decode or encode a specific media format. WPF Imaging includes a codec for BMP, JPEG, PNG, TIFF, Windows Media Photo, GIF, and ICON image formats. Each of these codecs enable applications to decode and, with the exception of ICON, encode their respective image formats.
@@ -63,6 +66,7 @@ This topic provides an introduction to the Microsoft Windows Presentation Founda
[!code-vb[BitmapFrameExample#10](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BitmapFrameExample/VB/BitmapFrame.vb#10)]
### Image Format Decoding
Image decoding is the translation of an image format to image data that can be used by the system. The image data can then be used to display, process, or encode to a different format. Decoder selection is based on the image format. Codec selection is automatic unless a specific decoder is specified. The examples in the [Displaying Images in WPF](#_displayingimages) section demonstrate automatic decoding. Custom format decoders developed using the unmanaged WPF Imaging interfaces and registered with the system automatically participate in decoder selection. This allows custom formats to be displayed automatically in WPF applications.
The following example demonstrates the use of a bitmap decoder to decode a BMP format image.
@@ -72,6 +76,7 @@ This topic provides an introduction to the Microsoft Windows Presentation Founda
[!code-vb[BmpBitmapDecoderEncoder#5](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BmpBitmapDecoderEncoder/VB/BitmapFrame.vb#5)]
### Image Format Encoding
Image encoding is the translation of image data to a specific image format. The encoded image data can then be used to create new image files. WPF Imaging provides encoders for each of the image formats described above.
The following example demonstrates the use of an encoder to save a newly created bitmap image.
@@ -81,10 +86,13 @@ This topic provides an introduction to the Microsoft Windows Presentation Founda
[!code-vb[BmpBitmapDecoderEncoder#3](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BmpBitmapDecoderEncoder/VB/BitmapFrame.vb#3)]
<a name="_displayingimages"></a>
## Displaying Images in WPF
There are several ways to display an image in a Windows Presentation Foundation (WPF) application. Images can be displayed using an <xref:System.Windows.Controls.Image> control, painted on a visual using an <xref:System.Windows.Media.ImageBrush>, or drawn using an <xref:System.Windows.Media.ImageDrawing>.
### Using the Image Control
<xref:System.Windows.Controls.Image> is a framework element and the primary way to display images in applications. In [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)], <xref:System.Windows.Controls.Image> can be used in two ways; attribute syntax or property syntax. The following example shows how to render an image 200 pixels wide using both attribute syntax and property tag syntax. For more information on attribute syntax and property syntax, see [Dependency Properties Overview](../advanced/dependency-properties-overview.md).
[!code-xaml[ImageElementExample_snip#ImageSimpleExampleInlineMarkup](~/samples/snippets/csharp/VS_Snippets_Wpf/ImageElementExample_snip/CSharp/ImageSimpleExample.xaml#imagesimpleexampleinlinemarkup)]
@@ -100,6 +108,7 @@ This topic provides an introduction to the Microsoft Windows Presentation Founda
[!code-vb[ImageElementExample_snip#ImageSimpleExampleInlineCode1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ImageElementExample_snip/VB/ImageSimpleExample.xaml.vb#imagesimpleexampleinlinecode1)]
#### Rotating, Converting, and Cropping Images
WPF enables users to transform images by using properties of <xref:System.Windows.Media.Imaging.BitmapImage> or by using additional <xref:System.Windows.Media.Imaging.BitmapSource> objects such as <xref:System.Windows.Media.Imaging.CroppedBitmap> or <xref:System.Windows.Media.Imaging.FormatConvertedBitmap>. These image transformations can scale or rotate an image, change the pixel format of an image, or crop an image.
Image rotations are performed using the <xref:System.Windows.Media.Imaging.BitmapImage.Rotation%2A> property of <xref:System.Windows.Media.Imaging.BitmapImage>. Rotations can only be done in 90 degree increments. In the following example, an image is rotated 90 degrees.
@@ -124,6 +133,7 @@ This topic provides an introduction to the Microsoft Windows Presentation Founda
[!code-vb[ImageElementExample_snip#CroppedCSharpUsingClip1](~/samples/snippets/visualbasic/VS_Snippets_Wpf/ImageElementExample_snip/VB/CroppedImageExample.xaml.vb#croppedcsharpusingclip1)]
#### Stretching Images
The <xref:System.Windows.Controls.Image.Stretch%2A> property controls how an image is stretched to fill its container. The <xref:System.Windows.Controls.Image.Stretch%2A> property accepts the following values, defined by the <xref:System.Windows.Media.Stretch> enumeration:
- <xref:System.Windows.Media.Stretch.None>: The image is not stretched to fill the output area. If the image is larger than the output area, the image is drawn to the output area, clipping what does not fit.
@@ -144,6 +154,7 @@ Different stretch settings
[!code-xaml[ImageElementExample_snip#ImageStretchExampleWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/ImageElementExample_snip/CSharp/ImageStretchExample.xaml#imagestretchexamplewholepage)]
### Painting with Images
Images can also be displayed in an application by painting with a <xref:System.Windows.Media.Brush>. Brushes enable you to paint [!INCLUDE[TLA2#tla_ui](../../../includes/tla2sharptla-ui-md.md)] objects with anything from simple, solid colors to complex sets of patterns and images. To paint with images, use an <xref:System.Windows.Media.ImageBrush>. An <xref:System.Windows.Media.ImageBrush> is a type of <xref:System.Windows.Media.TileBrush> that defines its content as a bitmap image. An <xref:System.Windows.Media.ImageBrush> displays a single image, which is specified by its <xref:System.Windows.Media.ImageBrush.ImageSource%2A> property. You can control how the image is stretched, aligned, and tiled, enabling you to prevent distortion and produce patterns and other effects. The following illustration shows some effects that can be achieved with an <xref:System.Windows.Media.ImageBrush>.
![ImageBrush output examples](./media/wcpsdk-mmgraphics-imagebrushexamples.gif "wcpsdk_mmgraphics_imagebrushexamples")
@@ -156,7 +167,9 @@ Image brushes can fill shapes, controls, text, and more
For additional information about <xref:System.Windows.Media.ImageBrush> and painting images see [Painting with Images, Drawings, and Visuals](painting-with-images-drawings-and-visuals.md).
<a name="_metadata"></a>
## Image Metadata
Some image files contain metadata that describes the content or the characteristics of the file. For example, most digital cameras create images that contain metadata about the make and model of the camera used to capture the image. Each image format handles metadata differently but WPF Imaging provides a uniform way of storing and retrieving metadata for each supported image format.
Access to metadata is provided through the <xref:System.Windows.Media.Imaging.BitmapSource.Metadata%2A> property of a <xref:System.Windows.Media.Imaging.BitmapSource> object. <xref:System.Windows.Media.Imaging.BitmapSource.Metadata%2A> returns a <xref:System.Windows.Media.Imaging.BitmapMetadata> object that includes all the metadata contained by the image. This data may be in one metadata schema or a combination of different schemes. WPF Imaging supports the following image metadata schemas: Exchangeable image file (Exif), tEXt (PNG Textual Data), image file directory (IFD), International Press Telecommunications Council (IPTC), and Extensible Metadata Platform (XMP).
@@ -174,10 +187,12 @@ Image brushes can fill shapes, controls, text, and more
[!code-vb[BitmapMetadata#SetQuery](~/samples/snippets/visualbasic/VS_Snippets_Wpf/BitMapMetadata/VB/BitmapMetadata.vb#setquery)]
<a name="_extensibility"></a>
## Codec Extensibility
A core feature of WPF Imaging is the extensibility model for new image codecs. These unmanaged interfaces enable codec developers to integrate codecs with WPF so new image formats can automatically be used by WPF applications.
For a sample of the extensibility API, see the [Win32 Sample Codec](https://go.microsoft.com/fwlink/?LinkID=160052). This sample demonstrates how to create a decoder and encoder for a custom image format.
For a sample of the extensibility API, see the [Win32 Sample Codec](https://github.com/microsoft/WPF-Samples/tree/master/Graphics/AITCodec). This sample demonstrates how to create a decoder and encoder for a custom image format.
> [!NOTE]
> The codec must be digitally signed for the system to recognize it.
@@ -189,4 +204,4 @@ Image brushes can fill shapes, controls, text, and more
- <xref:System.Windows.Controls.Image>
- <xref:System.Windows.Media.Imaging.BitmapMetadata>
- [2D Graphics and Imaging](../advanced/optimizing-performance-2d-graphics-and-imaging.md)
- [Win32 Sample Codec](https://go.microsoft.com/fwlink/?LinkID=160052)
- [Win32 Sample Codec](https://github.com/microsoft/WPF-Samples/tree/master/Graphics/AITCodec)
@@ -118,7 +118,7 @@ WPF provides a set of 3D rendering capabilities that integrate with 2D graphics
![Screenshot of a sample showing 3D shapes with different textures.](./media/index/visual-three-dimensional-shape.png)
For more information, see [3D Graphics Overview](3-d-graphics-overview.md). For an introductory sample, see [3D Solids Sample](https://go.microsoft.com/fwlink/?LinkID=159964).
For more information, see [3D Graphics Overview](3-d-graphics-overview.md). For an introductory sample, see [3D Solids Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/AnimationExamples).
<a name="animation"></a>
@@ -11,14 +11,19 @@ helpviewer_keywords:
ms.assetid: 74f61413-f8c0-4e75-bf04-951886426c8b
---
# Property Animation Techniques Overview
This topic describes the different approaches for animating properties: storyboards, local animations, clocks, and per-frame animations.
<a name="prerequisites"></a>
## Prerequisites
To understand this topic, you should be familiar with the basic animation features described in the [Animation Overview](animation-overview.md).
<a name="summary"></a>
## Different Ways to Animate
Because there are many different scenarios for animating properties, [!INCLUDE[TLA2#tla_winclient](../../../includes/tla2sharptla-winclient-md.md)] provides several approaches for animating properties.
For each approach, the following table indicates whether it can be used per-instance, in styles, in control templates, or in data templates; whether it can be used in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)]; and whether the approach enables you to interactively control the animation. "Per-Instance" refers to the technique of applying an animation or storyboard directly to instances of an object, rather than in a style, control template, or data template.
@@ -31,7 +36,9 @@ This topic describes the different approaches for animating properties: storyboa
|Per-frame animation|Per-instance|No|N/A|
<a name="storyboard_animations"></a>
## Storyboard Animations
Use a <xref:System.Windows.Media.Animation.Storyboard> when you want to define and apply your animations in [!INCLUDE[TLA2#tla_xaml](../../../includes/tla2sharptla-xaml-md.md)], interactively control your animations after they start, create a complex tree of animations, or animate in a <xref:System.Windows.Style>, <xref:System.Windows.Controls.ControlTemplate> or <xref:System.Windows.DataTemplate>. For an object to be animated by a <xref:System.Windows.Media.Animation.Storyboard>, it must be a <xref:System.Windows.FrameworkElement> or <xref:System.Windows.FrameworkContentElement>, or it must be used to set a <xref:System.Windows.FrameworkElement> or <xref:System.Windows.FrameworkContentElement>. For more details, see the [Storyboards Overview](storyboards-overview.md).
A <xref:System.Windows.Media.Animation.Storyboard> is a special type of container <xref:System.Windows.Media.Animation.Timeline> that provides targeting information for the animations it contains. To animate with a <xref:System.Windows.Media.Animation.Storyboard>, you complete the following three steps.
@@ -52,12 +59,13 @@ This topic describes the different approaches for animating properties: storyboa
|--------------------------------|-------------------|-----------|----------------------|-------------------|-------------|
|<xref:System.Windows.Media.Animation.BeginStoryboard> and an <xref:System.Windows.EventTrigger>|Yes|Yes|Yes|Yes|[Animate a Property by Using a Storyboard](how-to-animate-a-property-by-using-a-storyboard.md)|
|<xref:System.Windows.Media.Animation.BeginStoryboard> and a property <xref:System.Windows.Trigger>|No|Yes|Yes|Yes|[Trigger an Animation When a Property Value Changes](how-to-trigger-an-animation-when-a-property-value-changes.md)|
|<xref:System.Windows.Media.Animation.BeginStoryboard> and a <xref:System.Windows.DataTrigger>|No|Yes|Yes|Yes|[How to: Trigger an Animation When Data Changes](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/aa970679(v=vs.90))|
|<xref:System.Windows.Media.Animation.BeginStoryboard> and a <xref:System.Windows.DataTrigger>|No|Yes|Yes|Yes|[How to: Trigger an Animation When Data Changes](/previous-versions/dotnet/netframework-3.5/aa970679(v=vs.90))|
|<xref:System.Windows.Media.Animation.Storyboard.Begin%2A> method|Yes|No|No|No|[Animate a Property by Using a Storyboard](how-to-animate-a-property-by-using-a-storyboard.md)|
For more information about <xref:System.Windows.Media.Animation.Storyboard> objects, see the [Storyboards Overview](storyboards-overview.md).
## Local Animations
Local animations provide a convenient way to animate a dependency property of any <xref:System.Windows.Media.Animation.Animatable> object. Use local animations when you want to apply a single animation to a property and you don't need to interactively control the animation after it starts. Unlike a <xref:System.Windows.Media.Animation.Storyboard> animation, a local animation can animate an object that isn't associated with a <xref:System.Windows.FrameworkElement> or a <xref:System.Windows.FrameworkContentElement>. You also don't have to define a <xref:System.Windows.NameScope> for this type of animation.
Local animations may only be used in code, and cannot be defined in styles, control templates, or data templates. A local animation cannot be interactively controlled after it is started.
@@ -75,6 +83,7 @@ This topic describes the different approaches for animating properties: storyboa
[!code-vb[animateproperty#11](~/samples/snippets/visualbasic/VS_Snippets_Wpf/animateproperty/VisualBasic/LocalAnimationExample.vb#11)]
## Clock Animations
Use <xref:System.Windows.Media.MediaPlayer.Clock%2A> objects when you want to animate without using a <xref:System.Windows.Media.Animation.Storyboard> and you want to create complex timing trees or interactively control animations after they start. You can use Clock objects to animate a dependency property of any <xref:System.Windows.Media.Animation.Animatable> object.
You cannot use <xref:System.Windows.Media.Animation.Clock> objects directly to animate in styles, control templates, or data templates. (The animation and timing system actually does use <xref:System.Windows.Media.Animation.Clock> objects to animate in styles, control templates, and data templates, but it must create those <xref:System.Windows.Media.Animation.Clock> objects for you from a <xref:System.Windows.Media.Animation.Storyboard>. For more information about the relationship between <xref:System.Windows.Media.Animation.Storyboard> objects and <xref:System.Windows.Media.Animation.Clock> objects, see the [Animation and Timing System Overview](animation-and-timing-system-overview.md).)
@@ -103,6 +112,7 @@ This topic describes the different approaches for animating properties: storyboa
For more information about Clock objects, see the [Animation and Timing System Overview](animation-and-timing-system-overview.md).
## Per-Frame Animation: Bypass the Animation and Timing System
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 each step in the animation requires objects to be recomputed based on the last set of object interactions.
Per-frame animations cannot be defined inside styles, control templates, or data templates.
@@ -21,7 +21,7 @@ To understand this topic, you should be familiar with the different animation ty
<a name="whatisatimeline"></a>
## What Is a Storyboard?
## What Is a Storyboard
Animations are not the only useful type of timeline. Other timeline classes are provided to help you organize sets of timelines, and to apply timelines to properties. Container timelines derive from the <xref:System.Windows.Media.Animation.TimelineGroup> class, and include <xref:System.Windows.Media.Animation.ParallelTimeline> and <xref:System.Windows.Media.Animation.Storyboard>.
@@ -37,7 +37,7 @@ In this case, you have multiple sets of animations that apply to the same object
<a name="wherecanyouuseastoryboard"></a>
## Where Can You Use a Storyboard?
## Where Can You Use a Storyboard
A <xref:System.Windows.Media.Animation.Storyboard> can be used to animate dependency properties of animatable classes (for more information about what makes a class animatable, see the [Animation Overview](animation-overview.md)). However, because storyboarding is a framework-level feature, the object must belong to the <xref:System.Windows.NameScope> of a <xref:System.Windows.FrameworkElement> or a <xref:System.Windows.FrameworkContentElement>.
@@ -65,7 +65,7 @@ The following table shows the different places where each <xref:System.Windows.
|--------------------------------|-------------------|-----------|----------------------|-------------------|-------------|
|<xref:System.Windows.Media.Animation.BeginStoryboard> and an <xref:System.Windows.EventTrigger>|Yes|Yes|Yes|Yes|[Animate a Property by Using a Storyboard](how-to-animate-a-property-by-using-a-storyboard.md)|
|<xref:System.Windows.Media.Animation.BeginStoryboard> and a property <xref:System.Windows.Trigger>|No|Yes|Yes|Yes|[Trigger an Animation When a Property Value Changes](how-to-trigger-an-animation-when-a-property-value-changes.md)|
|<xref:System.Windows.Media.Animation.BeginStoryboard> and a <xref:System.Windows.DataTrigger>|No|Yes|Yes|Yes|[How to: Trigger an Animation When Data Changes](https://docs.microsoft.com/previous-versions/dotnet/netframework-3.5/aa970679(v=vs.90))|
|<xref:System.Windows.Media.Animation.BeginStoryboard> and a <xref:System.Windows.DataTrigger>|No|Yes|Yes|Yes|[How to: Trigger an Animation When Data Changes](/previous-versions/dotnet/netframework-3.5/aa970679(v=vs.90))|
|<xref:System.Windows.Media.Animation.Storyboard.Begin%2A> method|Yes|No|No|No|[Animate a Property by Using a Storyboard](how-to-animate-a-property-by-using-a-storyboard.md)|
The following example uses a <xref:System.Windows.Media.Animation.Storyboard> to animate the <xref:System.Windows.FrameworkElement.Width%2A> of a <xref:System.Windows.Shapes.Rectangle> element and the <xref:System.Windows.Media.SolidColorBrush.Color%2A> of a <xref:System.Windows.Media.SolidColorBrush> used to paint that <xref:System.Windows.Shapes.Rectangle>.