net maui desktop marquee with linear sliding animation with loop ?

Question

Answer 1

Hello,

This is achieved by looping the panning of the drawing, which you could refer to the following key code.

<Label x:Name="label1" Text="test1" Background="Red" HorizontalOptions="FillAndExpand"/>


protected override void OnHandlerChanged()
{
    base.OnHandlerChanged();
    testHori.SizeChanged += (s, e) =>
    {
        var animation = new Animation(v => label1.TranslationX = v, -100, testHori.Width);
        animation.Commit(this, "SimpleAnimation", 16, 6000,
            Easing.Linear, (v, c) => label1.TranslationX = -100, () => true);
    };
}

You could refer to animations for more details.

Update:

Animations can be applied to any component in MAUI, including CollectionView.

You could refer to the following code to implement a feature that scrolls the CollectionView to the left in a 6-second cycle.

protected override void OnHandlerChanged()
{
    base.OnHandlerChanged();
    testCollection.SizeChanged += (s, e) =>
    {
        testCollection.Margin = new Thickness(testHori.Width, 0, 0, 0);
        var animation = new Animation(v => testCollection.TranslationX = v, 100, -(testHori.Width + testCollection.Width));
        animation.Commit(this, "SimpleAnimation", 16, 6000,
            Easing.Linear, (v, c) => testCollection.TranslationX = 100, () => true);
    };
}

<HorizontalStackLayout x:Name="testHori">
    <CollectionView x:Name="testCollection"
        ItemsLayout="HorizontalList">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type x:String}">
                <x:String>Baboon</x:String>
                <x:String>Capuchin Monkey</x:String>
                <x:String>Blue Monkey</x:String>
                <x:String>Squirrel Monkey</x:String>
                <x:String>Golden Lion Tamarin</x:String>
                <x:String>Howler Monkey</x:String>
                <x:String>Japanese Macaque</x:String>
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Label Text="{Binding .}" HorizontalOptions="FillAndExpand"/>

            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</HorizontalStackLayout>

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.