Search code examples
c#.netxamlmaui

MAUI-Animating each element of a BindableLayout


So, I have a StackLayout that's binded to a list of items, esentitally functioning like a List/Collection view and it looks similar to this:

  <StackLayout BindableLayout.ItemsSource="{Binding Items}">
      <BindableLayout.ItemTemplate>
          <DataTemplate x:DataType="Item">
              <Frame>
              ..........
              </Frame>
          </DataTemplate>
      </BindableLayout>
  </StackLayout>

What i want to do is to add an animation when each of the frame renders. The code for my animation works fine but when I bind it to the frame of each item, the animation plays all at once for all the items while I want it to start delayed for each of them, for a staggering effect. Basically something similar to the animation presented in this dev blog .

From what I've seen there is no longer an AttachedHandler to any of the MAUI components, and rather you'd have to use Behaviors which seem a little confusing. I tried following the documentation on Behaviors and added a custom animation to the Loaded event of the items, but the end result is the same, all animations playing at once.

Also, I've had a lot of other issues by using ListViews/CollectionViews so I'd rather stick to the current implementation unless there is no other solution.

Is there any simple way to achieve this sort of effect where each item has a delayed animation?

I've tried iterating through the list and making each animation have a different delay but that didn't work. Trying to delay the animations by using Task.Delay just seems to delay the common animations of the items.


Solution

  • I believe in your case just replace the AttachedHandler event with VisualElement.Loaded or Element.HandlerChanged instead:

    <Frame Loaded="Frame_Loaded">
    
    
    <Frame HandlerChanged="Frame_HandlerChanged">