TransitioningContentControl class¶

Attributes: [TemplatePart] [TemplatePart] [TemplatePart] [TemplateVisualState] [DebuggerDisplay("{Transition}, {Direction}")]

Summary¶

View source

A ContentControl that animates the visual transition whenever its Content changes.

classDiagram
class TransitioningContentControl
class ContentControl
ContentControl <|-- TransitioningContentControl

Inherits from: ContentControl

Remarks¶

TransitioningContentControl works by taking a bitmap “snapshot” of the previously displayed content (rendered to a RenderTargetBitmap) and then running a WPF VisualStateManager transition between that image and the new content.

The default template is expected to define the following named parts:

-

PART_Container: a FrameworkElement (typically a Grid) that hosts visual states.

-

PART_PreviousImageSite: an Image used to display a snapshot of the outgoing content.

-

PART_CurrentContentPresentationSite: a ContentPresenter used to display the incoming content.

The template must also provide a VisualStateGroup named PresentationStates containing a Normal state, plus the transition states referenced below (see Transition and Direction).

How it transitions

• 1.

When Content changes, the control captures a bitmap snapshot of the current visual from PART_CurrentContentPresentationSite into PART_PreviousImageSite.

• 2.

The new content is assigned to PART_CurrentContentPresentationSite.

• 3.

A Storyboard associated with the configured visual state is started using GoToState.

• 4.

When the transition completes, the control returns to the Normal state and clears the outgoing snapshot image.

Visual state naming

Most transitions use the visual state name Transition_{Transition}{Direction}. For example: Transition_SlideLeft.

Fade uses Transition_Fade (no direction suffix).

Bounce uses a two-phase animation: an “out” phase followed by an “in” phase: Transition_Bounce{Direction}Out then Transition_Bounce{Direction}In.

Events

The TransitionStarted event fires after a transition has been queued and just before the first visual state is entered. The TransitionCompleted event fires after the storyboard completes and the control has returned to Normal (and released the outgoing snapshot image).

Notes

-

If the template has not been applied yet (for example, prior to OnApplyTemplate), the control falls back to simply updating the content with no animation.

-

If a transition is already in progress, additional content changes update the current content immediately (no queued animations).

-

Snapshot creation depends on the element’s current layout size. If the content presenter has a zero width or height, the snapshot is not meaningful and the control will effectively behave like a normal ContentControl.

Examples¶

Basic usage in XAML. The control animates when Content changes.

<rxui:TransitioningContentControl
 Transition="Slide"
 Direction="Left"
 Duration="0:0:0.25"
 Content="{Binding CurrentView}" />

Example with event handlers.

<rxui:TransitioningContentControl
 Transition="Fade"
 TransitionStarted="OnTransitionStarted"
 TransitionCompleted="OnTransitionCompleted"
 Content="{Binding CurrentView}" />

Constructors¶

Properties¶

Fields¶

Methods¶

Events¶