The new Composition Animation effects available in Windows 10 make it easy to create simple animation effects for XAML controls. For example, here's a simple example that applies a scaling effect to a Button when the user's mouse pointer moves over it.
Here's the XAML:
<Page
x:Class="UWP_Animation.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UWP_Animation"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid>
<StackPanel Orientation="Vertical" Margin="0,138,0,138" HorizontalAlignment="Center" Width="363" VerticalAlignment="Stretch">
<Button Content="Option 1" HorizontalAlignment="Left" Height="112" Margin="100,50,0,0" VerticalAlignment="Top" Width="171" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited"/>
<Button Content="Option 2" HorizontalAlignment="Left" Height="112" Margin="100,50,0,0" VerticalAlignment="Top" Width="171" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited"/>
<Button Content="Option 3" HorizontalAlignment="Left" Height="112" Margin="100,50,0,0" VerticalAlignment="Top" Width="171" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited"/>
<Button Content="Option 4" HorizontalAlignment="Left" Height="112" Margin="100,50,0,0" VerticalAlignment="Top" Width="171" PointerEntered="Button_PointerEntered" PointerExited="Button_PointerExited"/>
</StackPanel>
</Grid>
</Page>
And here's the C#:
using System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Input;
namespace UWP_Animation
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void Button_PointerEntered(object sender, PointerRoutedEventArgs e)
{
Button myButton = sender as Button;
var compositor = Window.Current.Compositor;
var animation = compositor.CreateVector3KeyFrameAnimation();
animation.InsertKeyFrame(1.0f, new System.Numerics.Vector3(1.1f, 1.1f, 1.0f));
animation.Duration = TimeSpan.FromSeconds(0.25);
animation.Target = "Scale";
myButton.CenterPoint = new System.Numerics.Vector3((float)(myButton.Width/2.0), (float)(myButton.Height / 2.0), 1.0f);
myButton.StartAnimation(animation);
}
private void Button_PointerExited(object sender, PointerRoutedEventArgs e)
{
Button myButton = sender as Button;
var compositor = Window.Current.Compositor;
var animation = compositor.CreateVector3KeyFrameAnimation();
animation.InsertKeyFrame(1.0f, new System.Numerics.Vector3(1.0f, 1.0f, 1.0f));
animation.Duration = TimeSpan.FromSeconds(0.25);
animation.Target = "Scale";
myButton.StartAnimation(animation);
}
}
}