Represents a visual behavior that occurs for predefined actions or state changes. Specific theme transitions can be applied to individual elements using the UIElement.Transitions property, or applied for scenario-specific theme transition properties such as ContentControl.ContentTransitions.
Transition derived classes
Transition is the parent class for several immediately derived classes that define library theme transitions. Here are some of the notable derived classes:
- AddDeleteThemeTransition
- ContentThemeTransition
- EntranceThemeTransition
- ReorderThemeTransition
- RepositionThemeTransition
AddDeleteThemeTransition Class
Provides animated transition behavior for when controls add or delete children of a panel. For example, if you have a collection of photos displayed in a Grid, you can associate this animation to the Grid so that when photos are added or deleted, the photos will animate in and out of view.
Examples
The following example shows how to use the AddDeleteThemeTransition to animate rectangles as they are added and deleted from a panel. Notice how the other child elements of the panel re-flow when one of them is removed.
<Button Content="Add Rectangle" Click="AddButton_Click"/>
<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
<ItemsControl.ItemContainerTransitions>
<TransitionCollection>
<!-- You use AddDeleteThemeTransition
in panels like in a WrapGrid. -->
<AddDeleteThemeTransition/>
</TransitionCollection>
</ItemsControl.ItemContainerTransitions>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Height="400"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
if (rectangleItems.Items.Count > 0)
rectangleItems.Items.RemoveAt(0);
}
private void AddButton_Click(object sender, RoutedEventArgs e)
{
Color rectColor = new Color();
rectColor.R = 200;
rectColor.A = 250;
Rectangle myRectangle = new Rectangle();
myRectangle.Fill = new SolidColorBrush(rectColor);
myRectangle.Width = 100;
myRectangle.Height = 100;
myRectangle.Margin = new Thickness(10);
rectangleItems.Items.Add(myRectangle);
}ContentThemeTransition Class
Provides animated transition behavior for when the content of a control is changing. This might be applied in addition to AddDeleteThemeTransition.
Examples
The following example applies a ContentThemeAnimation to a rectangle.
<!-- The ContentThemeTransition will execute when the ContentControl’s content changes. -->
<ContentControl x:Name="ContentHost" PointerPressed="ContentHost_PointerPressed">
<ContentControl.ContentTransitions>
<TransitionCollection>
<ContentThemeTransition/>
</TransitionCollection>
</ContentControl.ContentTransitions>
<Rectangle Height="200" Width="200" Fill="Orange"/>
</ContentControl>private void ContentHost_PointerPressed(object sender, PointerRoutedEventArgs e)
{
// Replace the ContentControl's content with a new Rectangle of a random color.
Rectangle newItem = new Rectangle();
Random rand = new Random();
newItem.Height = 200;
newItem.Width = 200;
newItem.Fill = new SolidColorBrush(Color.FromArgb(255,
(byte)rand.Next(0, 255), (byte)rand.Next(0,255), (byte)rand.Next(0, 255)));
ContentHost.Content = newItem;
}Note that setting the Duration property has no effect on this object since the duration is preconfigured.
EntranceThemeTransition Class
Provides animated transition behavior on controls when they first appear. You can use this on individual objects or on containers of objects. In the latter case, child elements will animate into view in sequence rather than all at the same time.
Examples
This example shows a how to apply an EntranceThemeTransition to a Panel
If you set an EntranceThemeTransition animation on a panel, the children of the panel will automatically offset when they animate into view to create a visually appealing entrance.
Here, as rectangles are added to the StackPanel, they fly in from the upper right, rather than just appearing in place.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Button Content="Add rectangle" Click="Button_Click"/>
<StackPanel x:Name="panel1" HorizontalAlignment="Left" Margin="200">
<StackPanel.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition
FromHorizontalOffset="200"
FromVerticalOffset="-200"/>
</TransitionCollection>
</StackPanel.ChildrenTransitions>
</StackPanel>
</Grid>private void Button_Click(object sender, RoutedEventArgs e)
{
// Add a rectangle to the StackPanel.
Rectangle r = new Rectangle();
r.Width = 100;
r.Height = 100;
// Alternate colors as rectangles are added.
if (panel1.Children.Count % 2 == 0)
{
r.Fill = new SolidColorBrush(Colors.Green);
}
else
{
r.Fill = new SolidColorBrush(Colors.Yellow);
}
panel1.Children.Add(r);
}ReorderThemeTransition Class
Provides animated transition behavior for when list-view controls items change order. Typically, this is due to a drag-drop operation. Different controls and themes potentially have varying characteristics for the animations involved.
Examples
The following example applies a ReorderThemeAnimation to a set of rectangles. As the new rectangles are added to the set, the other rectangles animate around the new one.
<StackPanel>
<Button x:Name="AddItemButton" Content="AddItem" Click="AddItemButton_Click"/>
<ItemsControl x:Name="ItemsList">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid>
<WrapGrid.ChildrenTransitions>
<!-- Apply a ReorderThemeTransition that will run when child elements are reordered. -->
<TransitionCollection>
<ReorderThemeTransition/>
</TransitionCollection>
</WrapGrid.ChildrenTransitions>
</WrapGrid>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<!-- Initial items. -->
<Rectangle Width="100" Height="100" Fill="Red"/>
<Rectangle Width="100" Height="100" Fill="Green"/>
<Rectangle Width="100" Height="100" Fill="Blue"/>
</ItemsControl>
</StackPanel>private void AddItemButton_Click(object sender, RoutedEventArgs e)
{
Rectangle newItem = new Rectangle();
Random rand = new Random();
newItem.Height = 100;
newItem.Width = 100;
newItem.Fill = new SolidColorBrush(Color.FromArgb(255,
(byte)rand.Next(0, 255), (byte)rand.Next(0, 255), (byte)rand.Next(0, 255)));
// Insert a new Rectangle of a random color into the ItemsControl at index 2.
ItemsList.Items.Insert(2, newItem);
}Note that setting the Duration property has no effect on this object since the duration is preconfigured.
RepositionThemeTransition Class
Reacts to layout moves when no context is set and a trigger of move is passed.
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="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);
}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.
