Maui - scroll view

Question

Hi,
I used scroll view, I used MVVM , I want to bind the scrolled event to view model, how is can be done?
When i press on button in this view i want to set the scroll view to start, how is can be done?
Thanks,

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="ScrollViewDemos.Views.XAML.BlackCatPage"
Title="ScrollView as a child layout demo">
<Grid Margin="20"
RowDefinitions="Auto,*,Auto">
<Label Text="THE BLACK CAT by Edgar Allan Poe"
FontSize="14"
FontAttributes="Bold"
HorizontalOptions="Center" />
<ScrollView x:Name="scrollView"
Grid.Row="1"
VerticalOptions="FillAndExpand"
Scrolled="OnScrollViewScrolled">
<StackLayout>
<Label Text="FOR the most wild, yet most homely narrative which I am about to pen, I neither expect nor solicit belief. Mad indeed would I be to expect it, in a case where my very senses reject their own evidence. Yet, mad am I not -- and very surely do I not dream. But to-morrow I die, and to-day I would unburthen my soul. My immediate purpose is to place before the world, plainly, succinctly, and without comment, a series of mere household events. In their consequences, these events have terrified -- have tortured -- have destroyed me. Yet I will not attempt to expound them. To me, they have presented little but Horror -- to many they will seem less terrible than barroques. Hereafter, perhaps, some intellect may be found which will reduce my phantasm to the common-place -- some intellect more calm, more logical, and far less excitable than my own, which will perceive, in the circumstances I detail with awe, nothing more than an ordinary succession of very natural causes and effects." />
<!-- More Label objects go here -->
</StackLayout>
</ScrollView>
<Button Grid.Row="2"
Text="Scroll to end"
Clicked="OnButtonClicked" />
</Grid>
</ContentPage>

Answer 1

Hello @Dani_S ,

I want to bind the scrolled event to view model, how is can be done?

You could try CommunityToolkit.Maui NuGet package and use EventToCommandBehavior, then convert the Scrolled event . If you want to access EventArgs, you can check Accessing the EventArgs from the event.
Note: CommunityToolkit.Maui 3.0.0 is available for .net7. And the package should be set up first, see Getting Started with the .NET Multi-platform App UI (.NET MAUI) Community Toolkit - .NET Community Toolkit | Microsoft Learn

<ScrollView.Behaviors>  
        <toolkit:EventToCommandBehavior x:TypeArguments ="ScrolledEventArgs" EventName="Scrolled" Command="{Binding ScrollCommand}" ></toolkit:EventToCommandBehavior>  
    </ScrollView.Behaviors>  

When i press on button in this view i want to set the scroll view to start, how is can be done?

You could add an action on the ViewModel, and invoke the action when click the button. Please refer to the following code：
 
 

public MainPage()  
      {  
            InitializeComponent();  
    MainPageViewModel VM = new MainPageViewModel();  
    this.BindingContext = VM;  
    VM.ScrollAction = () =>  
    {  
        scrollView.ScrollToAsync(TextLabel, ScrollToPosition.End,true;//TextLabel is the label in ScrollView  
    };  
}  

ViewModel

public class MainPageViewModel  
      {  
            public Action ScrollAction { get; set; }  
            public ICommand ButtonCommand { get; set; }// binding to your Button  
 public ICommand ScrollCommand { get; set; }// binding to your ScrollView  
        public MainPageViewModel()  
            {   
                  ButtonCommand = new Command(() =>{  
                        this.ScrollAction();// call the action  
                  });  
              ScrollCommand = new Command(( e) => {  
ScrolledEventArgs eventArgs = (ScrolledEventArgs)e;  
  
                Console.WriteLine("{0}----", eventArgs.ScrollY);  
            });  
        }  
      }  

Best Regards,
Wenyan Zhang

---

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.