RepositionThemeTransition RepositionThemeTransition RepositionThemeTransition Class

Reacts to layout moves when no context is set and a trigger of move is passed.

Syntax

Declaration

public sealed class RepositionThemeTransitionpublic sealed class RepositionThemeTransitionPublic NotInheritable Class RepositionThemeTransition
<RepositionThemeTransition ../>

Inheritance Hierarchy

Remarks

Examples

The following example applies a RepositionThemeTransition to a button. When you click the button, its margin changes, which changes its position. This position change is animated.

<Button Content="Click to reposition" Click="Button_PointerPressed"
        x:Name="animatedButton">
    <Button.Transitions>
        <TransitionCollection>
            <RepositionThemeTransition/>
        </TransitionCollection>
    </Button.Transitions>
</Button>
private void Button_Clicked(object sender, RoutedEventArgs e)
{
    animatedButton.Margin = new Thickness(100);
}
<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>

<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>
private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
        rectangleItems.Items.RemoveAt(0);
}

Constructors summary

Initializes a new instance of the RepositionThemeTransition class.

Properties summary

Gets or sets a value that determines whether the transition staggers rendering of multiple items, or renders all items at once.

Identifies the IsStaggeringEnabled dependency property.

Constructors

  • RepositionThemeTransition()
    RepositionThemeTransition()
    RepositionThemeTransition()
    RepositionThemeTransition()

    Initializes a new instance of the RepositionThemeTransition class.

    public RepositionThemeTransition()public RepositionThemeTransition()Public Function RepositionThemeTransition() As

Properties

  • IsStaggeringEnabled
    IsStaggeringEnabled
    IsStaggeringEnabled
    IsStaggeringEnabled

    Gets or sets a value that determines whether the transition staggers rendering of multiple items, or renders all items at once.

    public bool IsStaggeringEnabled { get; set; }public bool IsStaggeringEnabled { get; set; }Public ReadWrite Property IsStaggeringEnabled As bool
    <RepositionThemeTransition IsStaggeringEnabled="bool"/>
    

    Property Value

    • bool
      bool
      bool

      true if the animation staggers rendering of multiple items. false if the animation renders all items at once. The default is true.

    Remarks

    Available starting in Windows 10, version 1607.

    The ListView control utilizes the RepositionThemeTransition to animate items when an item’s position changes. Unlike some of the other theme transitions, when more than one item’s position changes, the RepositionThemeTransition staggers the animation across the collection. (The second item lags slightly behind the first item, the third behind the second, etc.) Set this property to false to make all items render at once.

    Examples

    This example shows how to use a RepositionThemeTransition with a ListView.

    <ListView>
        <ListView.ItemContainerTransitions>
            <TransitionCollection>
                <!-- Animate when items are removed, 
                     but don't stagger the animation across columns. -->
                <RepositionThemeTransition IsStaggeringEnabled="False"/>
            </TransitionCollection>
        </ListView.ItemContainerTransitions>
    </ListView>
    
    var lv = new ListView();
    var transition = new RepositionThemeTransition();
    transition.IsStaggeringEnabled = false;
    lv.ItemContainerTransitions.Add(transition);
    
    auto lv = ref new ListView();
    auto transition = ref new RepositionThemeTransition();
    transition->IsStaggeringEnabled = false;
    lv->ItemContainerTransitions->Append(transition);
    
  • IsStaggeringEnabledProperty
    IsStaggeringEnabledProperty
    IsStaggeringEnabledProperty
    IsStaggeringEnabledProperty

    Identifies the IsStaggeringEnabled dependency property.

    public static DependencyProperty IsStaggeringEnabledProperty { get; }public static DependencyProperty IsStaggeringEnabledProperty { get; }Public Static ReadOnly Property IsStaggeringEnabledProperty As DependencyProperty

    Property Value

Device family

Windows 10 (introduced v10.0.10240.0)

API contract

Windows.Foundation.UniversalApiContract (introduced v1)

Attributes

Windows.Foundation.Metadata.WebHostHiddenAttribute
Windows.Foundation.Metadata.ContractVersionAttribute
Windows.Foundation.Metadata.ActivatableAttribute
Windows.Foundation.Metadata.MarshalingBehaviorAttribute
Windows.Foundation.Metadata.ThreadingAttribute
Windows.Foundation.Metadata.StaticAttribute

Details

Assembly

Windows.UI.Xaml.Media.Animation.dll