Skip to content

This repository contains sample about how to scroll and focus on ListView item in Xamarin.Forms (SfListView)

Notifications You must be signed in to change notification settings

SyncfusionExamples/focus-on-scrolledd-listview-item-xamarin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

How to scroll and focus on ListView item in Xamarin.Forms (SfListView)

You can scroll to the particular ListViewItem and set focus for the Entry control loaded inside the SfListView.ItemTemplate in Xamarin.Forms SfListView.

You can also refer the following article.

https://www.syncfusion.com/kb/11882/how-to-scroll-and-focus-on-listview-item-in-xamarin-forms-sflistview

XAML

Setting Behavior for the ContentPage and add Button to scroll to the particular item.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:ListViewXamarin"
             xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"
             x:Class="ListViewXamarin.MainPage">
    <ContentPage.BindingContext>
        <local:ContactsViewModel/>
    </ContentPage.BindingContext>
    <ContentPage.Behaviors>
        <local:Behavior/>
    </ContentPage.Behaviors>
  <ContentPage.Content>
        <Grid RowSpacing="0">
            <Grid.RowDefinitions>
                <RowDefinition Height="50"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Button x:Name="scrollButton" Text="Scroll to the last item"/>
            <Grid x:Name="mainGrid" Grid.Row="1" Padding="10,25,10,10">
                <syncfusion:SfListView ItemsSource="{Binding ContactsInfo}" x:Name="listView">
                    <syncfusion:SfListView.ItemTemplate>
                        <DataTemplate>
                            <Entry x:Name="entry" BackgroundColor="DarkBlue" PlaceholderColor="LightBlue" Placeholder="{Binding ContactName}"/>
                        </DataTemplate>
                    </syncfusion:SfListView.ItemTemplate>
                </syncfusion:SfListView>
            </Grid>
        </Grid>
    </ContentPage.Content>
</ContentPage>

C#

In Button.Clicked event, handled scrolling of particular index using ScrollToRowIndex method. You can get the VisualContainer using GetVisualContainer method and get the element loaded inside ListViewItem to set Focus for the Entry control.

using Syncfusion.ListView.XForms.Control.Helpers;
namespace ListViewXamarin
{
    public class Behavior : Behavior<ContentPage>
    {
        SfListView ListView;
        Button Button;
        VisualContainer Container;
 
        protected override void OnAttachedTo(ContentPage bindable)
        {
            ListView = bindable.FindByName<SfListView>("listView");
            Button = bindable.FindByName<Button>("scrollButton");
            Container = ListView.GetVisualContainer();
            Button.Clicked += Button_Clicked;
 
            base.OnAttachedTo(bindable);
        }
 
        private async void Button_Clicked(object sender, EventArgs e)
        {
            var index = ListView.DataSource.DisplayItems.Count() - 1;
            var item = ListView.DataSource.DisplayItems[index];
            ListView.LayoutManager.ScrollToRowIndex(index, Syncfusion.ListView.XForms.ScrollToPosition.End, false);
 
            await Task.Delay(1000);
            for (int i = 0; i < Container.Children.Count; i++)
            {
                if (Container.Children[i].BindingContext == item)
                {
                    var entry = (Container.Children[i] as ListViewItem).Content as Entry;
                    entry.Focus();
                }
            }
        }
    }
}

Output

ScrollAndFocus

About

This repository contains sample about how to scroll and focus on ListView item in Xamarin.Forms (SfListView)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages