Xamarin Forms ListView's ScrollToHeader and ScrollToFooter missing

Selvamz16Selvamz16 Member ✭✭

I want to scroll the listView programmatically to its header and footer element's start & end position. But ListView.ScrollTo method allows to scroll within the itemsource elements. Please anyone help me to achieve it.

Thanks in advance.

Answers

  • robbitrobbit CNMember Xamurai

    I have a trick to solve it.

    I assume that the variable data is your ListView's ItemsSource.

    If you want scroll to top to show your header, you can do like this:

    listView.ScrollTo(data[0], ScrollToPosition.End, false);

    If you want scroll to bottom to show your footer, you can do like this:

    listView.ScrollTo(data[data.Count-1], ScrollToPosition.Start, false);

    Note :

    The listView is your ListView's Name.

  • Selvamz16Selvamz16 Member ✭✭

    @robbit , Header and footer element is not present in the ListView's ItemsSource. That is, i want to scroll to view in ListView.Header and LIstView.Footer

  • JohnHardmanJohnHardman GBUniversity mod

    @Selvamz16 - Is your ListView larger than the vertical space available, so the bottom of the ListView is off the bottom of the screen? If so, change the VerticalOptions on the ListView to ensure the ListView does not go off the bottom of the screen. Putting a ListView inside a vertical ScrollView is not a good idea, so limiting the height of the ListView is the normal way to go.

  • robbitrobbit CNMember Xamurai
    edited June 2018

    @Selvamz , I am not sure what do you mean by Header and footer element is not present in the ListView's ItemsSource,

    This is the gif:

    Below is my .xaml :

        <StackLayout>
            <ListView x:Name="lv" 
                      ItemSelected="onClick">
            <ListView.Header>
                <StackLayout Padding="10,5,0,5" BackgroundColor="#cccccc">
                    <Label Text="Header" />
                    <Label Text="Subhead" FontSize="Small"/>
                </StackLayout>
            </ListView.Header>
            <ListView.Footer>
                <Label Text="Footer" />
            </ListView.Footer>
                <ListView.ItemTemplate>
                    <DataTemplate>
                        <ViewCell>
                        <ViewCell.View>
                                <StackLayout x:Name="Back" Padding="10"  Orientation="Horizontal">
                                    <Label Text="{Binding Name}" />
                               </StackLayout>
                        </ViewCell.View>
                        </ViewCell>
                    </DataTemplate>
                </ListView.ItemTemplate>
            </ListView>
        </StackLayout>
    

    And this is my code:

                public partial class MainPage : ContentPage
                {
                    ObservableCollection<MyData> oc;
    
                    public MainPage()
                    {
                        InitializeComponent();
                                initData();
                    }
    
                    private void initData()
                    {
                         oc = new ObservableCollection<MyData>
                         {
                            new MyData("ITEM1",Color.White,false),
                            new MyData("ITEM2",Color.Gray,false),
                            new MyData("ITEM3",Color.White,false),
                            new MyData("ITEM4",Color.Gray,false),
                            new MyData("ITEM5",Color.White,false),
                            new MyData("ITEM6",Color.Gray,false),
                            new MyData("ITEM1",Color.White,false),
                            new MyData("ITEM2",Color.Gray,false),
                            new MyData("ITEM3",Color.White,false),
                            new MyData("ITEM4",Color.Gray,false),
                            new MyData("ITEM5",Color.White,false),
                            new MyData("ITEM6",Color.Gray,false),
                            new MyData("ITEM1",Color.White,false),
                            new MyData("ITEM2",Color.Gray,false),
                            new MyData("ITEM3",Color.White,false),
                            new MyData("ITEM4",Color.Gray,false),
                            new MyData("ITEM5",Color.White,false),
                            new MyData("ITEM6",Color.Gray,false),
                            new MyData("ITEM1",Color.White,false),
                            new MyData("ITEM2",Color.Gray,false),
                            new MyData("ITEM3",Color.White,false),
                            new MyData("ITEM4",Color.Gray,false),
                            new MyData("ITEM5",Color.White,false),
                            new MyData("ITEM6",Color.Gray,false),
                            new MyData("ITEM1",Color.White,false),
                            new MyData("ITEM2",Color.Gray,false),
                            new MyData("ITEM3",Color.White,false),
                            new MyData("ITEM4",Color.Gray,false),
                            new MyData("ITEM5",Color.White,false),
                            new MyData("ITEM6",Color.Gray,false),
                            new MyData("ITEM1",Color.White,false),
                            new MyData("ITEM2",Color.Gray,false),
                            new MyData("ITEM3",Color.White,false),
                            new MyData("ITEM4",Color.Gray,false),
                            new MyData("ITEM5",Color.White,false),
                            new MyData("ITEM6",Color.Gray,false),
                            new MyData("ITEM1",Color.White,false),
                            new MyData("ITEM2",Color.Gray,false),
                            new MyData("ITEM3",Color.White,false),
                            new MyData("ITEM4",Color.Gray,false),
                            new MyData("ITEM5",Color.White,false),
                            new MyData("ITEM6",Color.Gray,false),
                        };
                        lv.ItemsSource = oc;
    
                    }
    
                    private void onClick(object sender, SelectedItemChangedEventArgs e)
                    {
    
                        // lv.ScrollTo(oc[oc.Count-1],ScrollToPosition.Start,false);
                           lv.ScrollTo(oc[0], ScrollToPosition.End, false);
    
                    }
                }
               public class MyData
                {
                    public string Name { get; set; }
                    public Color BackgroundColor { get; set; }
                    public bool IsChecked { get; set; }
                    public MyData(string name,Color color,bool isChecked) {
                        this.Name = name;
                        this.BackgroundColor = color;
                        this.IsChecked = isChecked;
    
                }
    
           }
    
Sign In or Register to comment.