Microsoft MVPDNN MVPXamarin Certified
I'm Andrew Hoefling, and I work for FileOnQ as a Lead Software Engineer building mobile technologies for Government, Financial and First Responders using Xamarin.
Xamain.Forms contain many Animations API that is accessible in the shared code. Most animation sequences can be leveraged in the shared code reducing the need to implement any platform specific code to handle animations. Scaling animations can add a lot of context to your sequences that provide context to your animations. This Scaling article is part of a greater Xamarin Animations series of blogs.
Control scaling can be used across many different types of controls. A common implementation would be resizing an image depending on a behavior.
Let's build a custom control that zooms in and out when the user taps on the logo.
Create a simple Hello World page that has an icon on it, feel free to use the default Xamagon Icon. In our example I went over to Material Icons and downloaded the close (X) icon.
<Image source="clear" />
Our final XAMLis slightly more verbose to include a label with instructions
XAML
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:XamarinAnimations.Scaling" x:Class="XamarinAnimations.Scaling.MainPage"> <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"> <Label Text="Tap the X to scale" /> <Image Source="clear" / </StackLayout> </ContentPage>
We now should have a very simple page that displays a message to tap the icon and an image appearing on the screen.
With the basic layout all working corectly we can configure tap event and start working in the code behind. Update the MainPage.xaml to include a GestureRecgonizer . You will also need to give the Image control a name using x:Name. This allows us to access it in the code behind.
MainPage.xaml
GestureRecgonizer
Image
x:Name
<Image x:Name="Icon" Source="clear"> <Image.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" /> </Image.GestureRecognizers> </Image>
<?xml version="1.0" encoding="utf-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:XamarinAnimations.Scaling" x:Class="XamarinAnimations.Scaling.MainPage"> <StackLayout VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand"> <Label Text="Tap the X to scale" /> <Image x:Name="Icon" Source="clear"> <Image.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" /> </Image.GestureRecognizers> </Image> </StackLayout> </ContentPage>
Open up the MainPage.xaml.cs and stub out the event we created in the previous step. Your code should look something like this:
MainPage.xaml.cs
namespace XamarinAnimations.Scaling { public partial class MainPage : ContentPage { public MainPage() { InitializeComponent(); } private void TapGestureRecognizer_Tapped(object sender, EventArgs e) { } } }
Create a simple scale variable to store the current scale, which will be used to perform calculations when the event is fired.
scale
public partial class MainPage : ContentPage { private double _scale = 0; public MainPage() { InitializeComponent(); _scale = Icon.Scale; } // .. omitted code }
Forcing the app to run the animations to completion by adding the async keyword to the method signature.
async
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e) { }
Now everything is in place, invoke the ScaleTo command specifying the wait time. Then invoke ScaleTo back to the original size that we saved earlier.
ScaleTo
private async void TapGestureRecognizer_Tapped(object sender, EventArgs e) { await Icon.ScaleTo(_scale * 1.5, 500); await Icon.ScaleTo(_scale, 500); }
The second parameter of 500 is the elapsed time for the animation to take in milliseconds.
500
namespace XamarinAnimations.Scaling { public partial class MainPage : ContentPage { private double _scale = 0; public MainPage() { InitializeComponent(); _scale = Icon.Scale; } private async void TapGestureRecognizer_Tapped(object sender, EventArgs e) { await Icon.ScaleTo(_scale * 1.5, 500); await Icon.ScaleTo(_scale, 500); } } }
The resulting animation is a quick scale up and scale down on click. Your resulting animation should look something like this
-Happy Coding