Net maui how to create marquee ?

Question

Net maui how to create custom marquee ? ( news ticker ) with collection view text with links and timer when mouse over stop and resume. ? Thanks

Answer 1

Hello,

===================UPDATE===================

You can implement the loop result with RemainingItemsThreshold and RemainingItemsThresholdReachedCommand like this document:Populate a CollectionView with Data - .NET MAUI | Microsoft Learn, If I set the 5 items in the Collectionview and set the value of RemainingItemsThreshold to 5. If Collectionview scroll to the last record, RemainingItemsThresholdReachedCommand will be executed and add 5 same items to the Collectionview as well. Here is Collectionview layout.

<CollectionView x:Name="NewsCollectionView"
          
         ItemsLayout="HorizontalList"
      ItemsSource="{Binding NewsItems}"
      HorizontalOptions="FillAndExpand"
                 RemainingItemsThreshold="5"
                 RemainingItemsThresholdReachedCommand="{Binding RemainingItemsThresholdReachedCommand}"
      >

Here is my background viewmodel.

internal class MainViewModel
{
    public ICommand RemainingItemsThresholdReachedCommand { get; set; }
    public ObservableCollection<myModel> NewsItems { get; set; }
    public MainViewModel()
    {
        NewsItems = new ObservableCollection<myModel>();    
        for (int i = 0;i<5;i++) {
        NewsItems.Add(new myModel() { Text="this is test text"+i});   
        }


       RemainingItemsThresholdReachedCommand = new Command(() =>
        {
            for (int i = 0; i < 5; i++)
            {
                NewsItems.Add(new myModel() { Text = "this is test text" + i });
            }
        });
    }
}

You can do it by pointer gesture to detect the mouse over or leave.

Next, you can create a timer Dispatcher.CreateTimer(); to control marquee's stop and resume.

For example, I have a Collectionview as marquee's like following code. And I add the PointerGestureRecognizer in the ouside's StackLayout

<CollectionView x:Name="NewsCollectionView"
                 HeightRequest="100"
             ItemsSource="{Binding NewsItems}"
             HorizontalOptions="FillAndExpand"
             VerticalOptions="FillAndExpand">
     <CollectionView.ItemTemplate>
         <DataTemplate>
             <StackLayout>
                 <StackLayout.GestureRecognizers>
                     <PointerGestureRecognizer PointerEntered="PointerGestureRecognizer_PointerEntered"                  
                                               PointerExited="PointerGestureRecognizer_PointerExited"/>
                 </StackLayout.GestureRecognizers>
                 <Label Text="{Binding Text}" FontSize="Title" TextColor="Black"/>
             </StackLayout>
         </DataTemplate>
     </CollectionView.ItemTemplate>
</CollectionView>            

I set the timer and set the interval time to 2 seconds, when point on the stacklayout, scroll will be stop, by default, the timer will start, collectionview will scroll automatically. Here is layout background code.

public partial class MainPage : ContentPage
{
    int count = 0;
    private int currentIndex = 0;
    MainViewModel mainViewModel;
    public MainPage()
    {
        InitializeComponent();
        mainViewModel=  new MainViewModel();
        BindingContext = mainViewModel;
    }
    IDispatcherTimer timer;
    protected override  void OnAppearing()
    {
        base.OnAppearing();
        timer = Dispatcher.CreateTimer();
        timer.Interval = TimeSpan.FromSeconds(2);
        timer.Tick += (s, e) => DoSomething();
        timer.Start();       
    }
    void DoSomething()
    {
        currentIndex = (currentIndex + 1) % (mainViewModel.NewsItems.Count);
        MainThread.BeginInvokeOnMainThread(() =>
        {
            //Update view here
            NewsCollectionView.ScrollTo(currentIndex, position: ScrollToPosition.Center, animate: true);
        });
    }
    private void PointerGestureRecognizer_PointerEntered(object sender, PointerEventArgs e)
    {
        timer.Stop();
    }


   private void PointerGestureRecognizer_PointerExited(object sender, PointerEventArgs e)
    {
        timer.Start();
    }
}

By the way, here my tested viewModel.

public class MainViewModel
{
    public ObservableCollection<NewsItem> NewsItems { get; } = new ObservableCollection<NewsItem>();


   // Populate NewsItems with your data
    public MainViewModel()
    {
        NewsItems.Add(new NewsItem { Text = "News 2", Link = "https://example.com/news2" });
       for (int i = 0;i<20;i++)
        {
            NewsItems.Add(new NewsItem { Text = "News "+i, Link = "https://example.com/news1" });
       }
    }
}

Best Regards,

Leon Lu

---

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.