RepositionThemeTransition
RepositionThemeTransition
RepositionThemeTransition
RepositionThemeTransition
Class
Definition
Reacts to layout moves when no context is set and a trigger of move is passed.
public : sealed class RepositionThemeTransition : Transition, IRepositionThemeTransition, IRepositionThemeTransition2public sealed class RepositionThemeTransition : Transition, IRepositionThemeTransition, IRepositionThemeTransition2Public NotInheritable Class RepositionThemeTransition Inherits Transition Implements IRepositionThemeTransition, IRepositionThemeTransition2// This API is not available in Javascript.
<RepositionThemeTransition ../>
- Inheritance
-
RepositionThemeTransitionRepositionThemeTransitionRepositionThemeTransitionRepositionThemeTransition
- Attributes
| Device family |
Windows 10 (introduced v10.0.10240.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v1)
|
Inherited Members
Inherited methods
Inherited properties
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);
}
Remarks
The RepositionThemeTransition is not designed to be used with Panels that perform UI virtualization such as the default Panel on a ListView or GridView control.
Constructors
RepositionThemeTransition() RepositionThemeTransition() RepositionThemeTransition() RepositionThemeTransition()
Initializes a new instance of the RepositionThemeTransition class.
public : RepositionThemeTransition()public RepositionThemeTransition()Public Sub New()// This API is not available in Javascript.
- See Also
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 : PlatForm::Boolean IsStaggeringEnabled { get; set; }public bool IsStaggeringEnabled { get; set; }Public ReadWrite Property IsStaggeringEnabled As bool// This API is not available in Javascript.
<RepositionThemeTransition IsStaggeringEnabled="bool"/>
- Value
- PlatForm::Boolean 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.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|
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);
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.
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// This API is not available in Javascript.
The identifier for the IsStaggeringEnabled dependency property.
| Device family |
Windows 10 Anniversary Edition (introduced v10.0.14393.0)
|
| API contract |
Windows.Foundation.UniversalApiContract (introduced v3)
|