We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to keep the selected item visible.

Thread ID:

Created:

Updated:

Platform:

Replies:

145512 Jun 26,2019 07:42 AM UTC Jun 28,2019 11:18 AM UTC Xamarin.Forms 5
loading
Tags: SfListView
Mark
Asked On June 26, 2019 07:42 AM UTC

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 [Syncfusion]
Replied On June 27, 2019 06:17 AM UTC

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. 
 
Also, please refer the following UG documentation link for more reference about programmatic scrolling in SfListView. 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 


Mark
Replied On June 27, 2019 09:21 AM UTC

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 [Syncfusion]
Replied On June 27, 2019 12:12 PM UTC

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, 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 


Mark
Replied On June 28, 2019 11:02 AM UTC

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 [Syncfusion]
Replied On June 28, 2019 11:18 AM UTC

Hi Mark, 
 
Thanks for the update. Please get back to us if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon