UIElement.Transitions Property

Definition

Namespace:

Microsoft.UI.Xaml

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>

Property Value

TransitionCollection

The strongly typed collection of Transition style elements that apply to a UIElement.

Examples

Tip

For more info, design guidance, and code examples, see Motion.

Open the WinUI 3 Gallery app and see transitions in action.

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>

Remarks

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.

See also

• TransitionCollection
• Storyboarded animations