IXRVisualTransition (Compact 2013)

3/28/2014

This class represents the visual behavior that occurs when the control transitions from one state to another.

Syntax

class IXRVisualTransition : public IXRDependencyObject

Inheritance Hierarchy

IXRDependencyObject

    IXRVisualTransition

Methods

Thread Safety

Members of this class are thread-safe if you previously called IXRApplication::CreateHostFromXaml and supplied it with an XRWindowCreateParams structure that has AllowsMultipleThreadAccess set to true.

Remarks

You can design the appearance of visual states in control templates and user controls.

Visual states are predefined in the templates of controls that meet the following criteria:

• Controls that derive from the IXRControl class.
• Controls that do not derive from the IXRUserControl class.

Examples of templates that have states already defined are the IXRButton and IXRTextBox controls.

You cannot add or remove states to a control template; you can only define the appearance of those states and define the transition behavior between states.

A user control is a custom control that derives from the IXRUserControl class and has no predefined states. If you are working with a user control, you can add and remove states, as well as define their appearance and the transition behavior between the states.

To design visual transitions between states, create an IXRVisualTransition object for each transition combination that you want to customize. For example, you can define a transition from all states to all states, from one specific state to all other states, from all other states to one specific state, or from one specific state to another. You can only define transitions between states that exist in the same state group. For example, if you have a user control that represents a six-sided die, you might define a visual state for each of the six sides. You could put all of those states in the same state group because no two of them can exist at the same time. You could define one transition that would make the die tumble, no matter which state is being exited or entered, which is a transition from all states to all states. You could define a second transition that would make the die glow when the winning side is displayed, which is a transition from all other states to one specific state. In a different state group, you could define two states that show your user control enabled and disabled. These two states should be in a different state group because the die can show a number, which is a state in the first group, and be disabled, which is a state from the second state group, at the same time.

For each visual transition that you create, you can do one or more of the following:

• Specify the time that is required for a transition between states to occur by calling IXRVisualTransition::SetGeneratedDuration.
• Specify additional changes in the control's appearance that occur at the time of the transition by calling IXRVisualTransition::SetStoryboard.
• Specify the states to change between when the visual transition is applied by calling IXRVisualTransition::SetTo and IXRVisualTransition::SetFrom.
• Specify an easing function to apply to the generated transition animation by calling IXRVisualTransition::SetGeneratedEasingFunction.

You can have multiple transitions that refer to the same state. However, they will be used in the order specified in the following table:

You add your visual transitions to an IXRVisualTransitionCollection, and then you add that IXRVisualTransitionCollection to the control template or user control by adding it to the right visual state group.

A collection of visual-state groups, represented by IXRVisualStateGroupCollection, is accessible through an attached property on an IXRFrameworkElement child element of an IXRUserControl. The attached property is called VisualStateManager.VisualStateGroups.

If you are working with a user control that does not already contain a visual state group collection, do the following:

1. Create a new IXRVisualStateGroup object, and add the new visual transition collection to it by calling IXRVisualStateGroup::SetTransitions.
2. Create a new IXRVisualStateGroupCollection object, and add the IXRVisualStateGroup object to it by calling the IXRVisualStateGroupCollection::Add method.
3. Next, create a new IXRFrameworkElement root element to represent a new child element for the control.
4. On the IXRFrameworkElement object, call IXRDependencyObject::SetAttachedProperty(const WCHAR*, const WCHAR*, IXRDependencyObject*) and set the IXRVisualStateGroupCollection object as the VisualStateManager.VisualStateGroups attached-property value.
5. After the visual transitions are added to the IXRFrameworkElement root element, add the root element to the user control by calling IXRUserControl::SetContent.

When you create a class instance, use an IXRVisualTransitionPtr smart pointer instead of a raw interface pointer. For more information, see XRPtr<Interface>.

You can also define a visual transition in Microsoft Silverlight 3 XAML, in the source XAML that is parsed by your application. For information about the differences between XAML in XAML for Windows Embedded and Silverlight 3, see Differences Between Microsoft Silverlight 3 and XAML for Windows Embedded. For more information about how to define this element in the source XAML for your application, see the VisualTransition Class on MSDN.

.NET Framework Equivalent

System.Windows.VisualTransition

Requirements

See Also

Reference

Classes for Visual Appearance
IXRControl::GoToVisualState