How do I animate a BoxView in .NET MAUI?

Platform: .NET MAUI| Category: Controls

Animating a BoxView in .NET MAUI can be done using the framework’s built-in animation features. You can use the VisualElement’s TranslateTo, RotateTo, ScaleTo, and other animation methods to achieve various animation effects. Here is an example:

public partial class MainPage : ContentPage
 {
     public BoxView myBoxView;
     public MainPage()
     {
         InitializeComponent();

         myBoxView = new Microsoft.Maui.Controls.BoxView()
         {
             WidthRequest = 200,
             HeightRequest = 200,
             Color = Colors.Blue
         };
         var tapGesture = new TapGestureRecognizer();
         tapGesture.Tapped += OnBoxViewTapped;

         myBoxView.GestureRecognizers.Add(tapGesture);

         StackLayout views = new StackLayout()
         {
             Children = { myBoxView },
             VerticalOptions = LayoutOptions.Center,
             HorizontalOptions = LayoutOptions.Center
         };
         Content = views;
     }

     private async void OnBoxViewTapped(object sender, EventArgs e)
     {
         double finalWidth = 200;
         double finalHeight = 200;

         await myBoxView.ScaleTo(1.2, 250); 
         await Task.Delay(100); 
         await myBoxView.ScaleTo(0.8, 250); 
         await myBoxView.ScaleTo(1.0, 250); 
     }
 }

Share with

Related FAQs

Couldn't find the FAQs you're looking for?

Please submit your question and answer.