UIElement.Transitions Property
Important
Some information relates to prerelease product that may be substantially modified before it’s released. Microsoft makes no warranties, express or implied, with respect to the information provided here.
Gets or sets the collection of Transition style elements that apply to a UIElement.
public:
property TransitionCollection ^ Transitions { TransitionCollection ^ get(); void set(TransitionCollection ^ value); };
TransitionCollection Transitions();
void Transitions(TransitionCollection value);
public TransitionCollection Transitions { get; set; }
var transitionCollection = uIElement.transitions;
uIElement.transitions = transitionCollection;
Public Property Transitions As TransitionCollection
<uielement>
<uielement.Transitions>
<TransitionCollection>
oneOrMoreTransitions
</TransitionCollection>
</uielement.Transitions>
</uielement>
The strongly typed collection of Transition style elements that apply to a UIElement.
Tip
For more info, design guidance, and code examples, see Motion.
The WinUI 3 Gallery app includes interactive examples of most WinUI 3 controls, features, and functionality. Get the app from the Microsoft Store or get the source code on GitHub.
The following XAML example shows a single EntranceThemeTransition as defined in a Style for a Button. Transition animation properties are typically set in styles and templates rather than as properties directly in a UI definition. Styles are typically stored as a XAML resource.
<Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
<Grid.Resources>
<Style x:Key="DefaultButtonStyle" TargetType="Button">
<Setter Property="Transitions">
<Setter.Value>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Button Style="{StaticResource DefaultButtonStyle}"
Content="EntranceThemeTransition style applied" />
</Grid>
Note
Prior to Windows 10, version 1809 (SDK 17763), the XAML syntax for properties that have a TransitionCollection value requires that you declare an explicit TransitionCollection object element as the value, and then provide object elements as child elements of TransitionCollection for each of the transition animations you want to use. In Windows 10, version 1809 (SDK 17763) or later, TransitionCollection supports the implicit collection usage, so you can omit the collection object element. For more info on implicit collections and XAML, see XAML syntax guide.
This is a short list of some of the possible types for transitions:
- AddDeleteThemeTransition
- ContentThemeTransition
- EdgeUIThemeTransition
- EntranceThemeTransition
- PopupThemeTransition
- ReorderThemeTransition
- RepositionThemeTransition
Specific classes that derive from UIElement sometimes have their own properties that hold other types of transitions for class-specific scenarios. For example, Popup.ChildTransitions and ItemsControl.ItemContainerTransitions.
Transition animations play a particular role in the UI design of your app. The basic idea is that when there is a change or transition, the animation draws the attention of the user to the change.
It's not common to set the value of the Transitions
property directly on a UIElement that is a direct element of app UI. It's more common to have a transitions collection be a part of a visual state, template or style. In this case you use mechanisms such as Setter of a Style to specify the Transitions
property, and set the value using XAML-defined content that is typically stored as a XAML resource.
VisualTransition is not one of the types you put in the UIElement.Transitions
collection. VisualTransition
is specifically for animations in visual state groups, and is used by the VisualStateGroup.Transitions property.