.net MAUI - Animate slow scroll of a list of items-CodePudding

I am currently working on a Display-Application for a small company, which will use an AndroidTV (but maybe a Windows PC) to show important information at the store window. As .NET Maui is the new approach for multi-platform apps, I am using the framework to build this app.

Currently I have a CollectionView showing current items for sale by getting them from a REST call. What I want to do now, is to animate a slow scroll of the CollectionView from start to end and back again, to get the attention of passing people. As .NET Maui is quite new I couldn't find anything on google, so that's why I am asking here, if it is possible to do so or if I need to change my approach with a non-scrollable View and transform the X value.

Thanks in advance, hopefully someone has an idea how to get this working.

CodePudding user response：

As @ToolmakerSteve mentioned in the comments, the right approach is to use Translate for slow animation. I'm gonna show how I used it in my case to help others in the future.

Instead of using a CollectionView you can use a HorizontalStackLayout (or VerticalStackLayout) to show all items you want to scroll through:

<HorizontalStackLayout x:Name="ItemList" BindableLayout.ItemsSource="{Binding Items}">
  <BindableLayout.ItemTemplate>
    <DataTemplate>
      <!-- Your DataTemplate -->
    </DataTemplate>
  </BindableLayout.ItemTemplate>
</HorizontalStackLayout>

After that you can translate the X value and width (or Y value and height for VerticalStackLayout) so you generate a "scroll", with the code shown below. In my case I gave each element 3 seconds for an optimal speed, but that value can be set however you want it. Additionally I moved the list back to start for a loop, but if you don't need that you can leave it.

  private async Task MoveItemListToEnd()
  {
    double completeWidth = ItemListStackLayout.Children.Last().Frame.X   ItemListStackLayout.Children.Last().Frame.Width;
    double visibleWidth = ItemListStackLayout.Width;
    double moveWidth = completeWidth - visibleWidth;
    uint speed = (3000 * Convert.ToUInt32(ItemListStackLayout.Children.Count));
    await VehicleListStackLayout.TranslateTo(-moveWidth, 0, speed, Easing.Linear);
    await MoveItemListToStart();
  }

  private async Task MoveItemListToStart()
  {
    uint speed = (3000 * Convert.ToUInt32(ItemListStackLayout.Children.Count));
    await ItemListStackLayout.TranslateTo(0, 0, speed, Easing.Linear);
    await MoveVehicleListToEnd();
  }

I hope that my answer is gonna help people coming to this question in the future.