How to keep the selected item visible.

[Mark]

Hi,

I use a rotator connected to a list view to show the thumbnails. The rotator highlights a thumbnail as you scroll but is is possible to have the highlighted thumbnail off the screen. How do I keep the highlighted thumbnail visible in the list view? 

This is what I currently have:

And this is what I want (I want the list view to automatically keep the highlighted item in view.): 

Thanks,

Mark.

[Dinesh Babu Yadav]

Hi Mark, 

 

Thank you for contacting Syncfusion support. 

 

You can achieve the reported requirement by using ScrollToRowIndex method in which pass the rotator’s selected item to scroll the particular item, to make it visible in the screen as like below code example. 

 

Code Example[C#]: 

private void UpdateListView(int index) 

{ 

  SelectedItem = bookInfo[index]; 

  ListView.LayoutManager.ScrollToRowIndex(index, ScrollToPosition.Center, false); 

} 

 

For your reference, we have prepared the sample to achieve your requirement. Please find the sample in the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/145512/ze/ListViewsample274729517  

 

Also, please refer the following UG documentation link for more reference about programmatic scrolling in SfListView. 

UG documentation: https://help.syncfusion.com/xamarin/sflistview/scrolling#programmatic-scrolling  

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav 

[Mark]

Hi,

This is great thank you. I am using MVVM so I don't want a reference to the listView in my View Model.

How can I convert:

ListView.LayoutManager.ScrollToRowIndex(index, Syncfusion.ListView.XForms.ScrollToPosition.Center, false);

to Xaml and bind to a Index property?

I have figured out this so far....

<listView:SfListView.LayoutManager>

Thanks

Mark.

[Dinesh Babu Yadav]

Hi Mark, 

 

Thanks for the update. 

 

You can’t bind the ScrollToRowIndex method and its parameter in XAML page. However, you can achieve the reported requirement by using Behaviors as like below code example,  

 

Code Example[XAML]: 

<sync:SfListView x:Name="listView"> 

  <sync:SfListView.Behaviors> 

     <local:ListViewBehavior/> 

  </sync:SfListView.Behaviors> 

</sync:SfListView> 

 

Code Example[C#]: 

public class ListViewBehavior : Behavior<SfListView> 

{ 

   BookInfoViewModel ViewModel; 

   SfListView ListView; 

 

   protected override void OnAttachedTo(SfListView listView) 

   { 

      ListView = listView; 

      listView.Loaded += ListView_Loaded; 

      base.OnAttachedTo(listView); 

   } 

 

   protected override void OnDetachingFrom(SfListView listView) 

   { 

      listView.Loaded -= ListView_Loaded; 

      ViewModel.PropertyChanged -= ViewModel_PropertyChanged; 

      ViewModel = null; 

      ListView = null; 

      base.OnDetachingFrom(listView); 

   } 

    

   private void ListView_Loaded(object sender, ListViewLoadedEventArgs e) 

   { 

      ViewModel = ListView.BindingContext as BookInfoViewModel; 

      ViewModel.PropertyChanged += ViewModel_PropertyChanged; 

      ViewModel.SelectedIndex = 2; 

   } 

 

   private void ViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e) 

   { 

      if (e.PropertyName == "SelectedIndex") 

      { 

          ViewModel.SelectedItem = ViewModel.BookInfo[ViewModel.SelectedIndex]; 

          ListView.LayoutManager.ScrollToRowIndex(ViewModel.SelectedIndex, ScrollToPosition.Center, false); 

      } 

   } 

} 

 

For your reference, we have modified the sample with above code snippet and please find the sample link below, 

Sample: https://www.syncfusion.com/downloads/support/forum/145512/ze/ListViewsample311188987  

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav 

[Mark]

Hi Dinesh,

Thank you, your solution is working well.

Here is my implementation:

Xaml:

<rotator:SfRotator EnableLooping="false"
                               NavigationStripMode="Dots"
                               DotPlacement="None"
                               VerticalOptions="FillAndExpand"
                               SelectedIndex="{Binding WizardIndex, Mode=TwoWay}"
                               ItemsSource="{Binding WizardTemplates}"
                               ItemTemplate="{StaticResource WizardItemTemplate}">

                <rotator:SfRotator.Behaviors>

                    <behavior:EventToCommandBehavior EventName="SelectedIndexChanged"
                                                     Converter="{StaticResource SelectedIndexChangedConverter}"
                                                     Command="{Binding WizardSelectedIndexChangedCommand}" />

                </rotator:SfRotator.Behaviors>

            </rotator:SfRotator>

            <listView:SfListView Orientation="Horizontal"
                                 HeightRequest="100"
                                 Padding="2"
                                 ItemSpacing="2"
                                 ItemSize="100"
                                 IsScrollBarVisible="False"
                                 IsStickyFooter="True"
                                 IsStickyHeader="True"
                                 ItemsSource="{Binding SelectorThumbnails}"
                                 TapCommand="{Binding SelectorItemTappedCommand}"
                                 SelectedItem="{Binding SelectorSelectedItem}">

                <listView:SfListView.Behaviors>
                    <local:SelectorListViewBehavior />
                </listView:SfListView.Behaviors>

                <listView:SfListView.ItemTemplate>
                    <DataTemplate>

                        <StackLayout VerticalOptions="FillAndExpand"
                                     BackgroundColor="{StaticResource ButtonColor}">

                            <Image Source="{Binding Image}" />
                            <Label FontSize="10"
                                   Text="{Binding Text}" />
                        </StackLayout>

                    </DataTemplate>
                </listView:SfListView.ItemTemplate>

                <listView:SfListView.SelectedItemTemplate>
                    <DataTemplate>

                        <StackLayout VerticalOptions="FillAndExpand"
                                     BackgroundColor="LightBlue">

                            <Image Source="{Binding Image}" />
                            <Label FontSize="10"
                                   Text="{Binding Text}" />
                        </StackLayout>

                    </DataTemplate>
                </listView:SfListView.SelectedItemTemplate>

                <listView:SfListView.HeaderTemplate>
                    <DataTemplate>

                        <StackLayout BackgroundColor="White"
                                     IsVisible="{Binding SelectorScrollLeftIsVisible}">
                            <button:SfButton HorizontalOptions="CenterAndExpand"
                                             VerticalOptions="CenterAndExpand"
                                             Command="{Binding SelectorScrollLeftTappedCommand}">
                                <button:SfButton.Content>
                                    <iconize:IconLabel Text="far-arrow-alt-circle-left"
                                                       FontSize="35" />
                                </button:SfButton.Content>
                            </button:SfButton>
                        </StackLayout>

                    </DataTemplate>
                </listView:SfListView.HeaderTemplate>

                <listView:SfListView.FooterTemplate>
                    <DataTemplate>

                        <StackLayout BackgroundColor="White"
                                     IsVisible="{Binding SelectorScrollRightIsVisible}">
                            <button:SfButton HorizontalOptions="CenterAndExpand"
                                             VerticalOptions="CenterAndExpand"
                                             Command="{Binding SelectorScrollRightTappedCommand}">
                                <button:SfButton.Content>
                                    <iconize:IconLabel Text="far-arrow-alt-circle-right"
                                                       FontSize="35" />
                                </button:SfButton.Content>
                            </button:SfButton>
                        </StackLayout>

                    </DataTemplate>
                </listView:SfListView.FooterTemplate>

            </listView:SfListView>

SelectorListViewBehavior.cs:

    public class SelectorListViewBehavior : Behavior<SfListView>
    {
        private WizardPopUpViewModel _viewModel;
        private SfListView _listView;

        protected override void OnAttachedTo(SfListView listView)
        {
            _listView = listView;
            listView.Loaded += OnListViewLoaded;
            base.OnAttachedTo(listView);
        }

        protected override void OnDetachingFrom(SfListView listView)
        {
            listView.Loaded -= OnListViewLoaded;
            _viewModel.PropertyChanged -= ViewModelPropertyChanged;
            _viewModel = null;
            _listView = null;
            base.OnDetachingFrom(listView);
        }

        private void OnListViewLoaded(object sender, ListViewLoadedEventArgs eventArgs)
        {
            _viewModel = _listView.BindingContext as WizardPopUpViewModel;
            _viewModel.PropertyChanged += ViewModelPropertyChanged;
        }

        private void ViewModelPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs eventArgs)
        {
            if (eventArgs.PropertyName == "WizardIndex")
            {
                _listView.LayoutManager.ScrollToRowIndex(_viewModel.WizardIndex,
                    Syncfusion.ListView.XForms.ScrollToPosition.MakeVisible, false);
            }
        }
    }

Thanks

Mark.

[Dinesh Babu Yadav]

Hi Mark, 

 

Thanks for the update. Please get back to us if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav