How to move scrollbar to the end horizontally by default when user click on button in the lisst view xamarin forms

Pallela, Naveen 21 Reputation points
2021-06-23T14:06:30.14+00:00

Hi Team,

I have 12 columns and to disply horizontally . The scroll bar horizontal is working working but based on my requirement When user click on the second column , THe scrollbar move it to the end. So it is not working for me. Can anyone please suggest me.

Thnks in Adv
Nvaeen.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,301 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Kyle Wang 5,531 Reputation points
    2021-06-24T03:29:28.067+00:00

    Hi PallelaNaveen-9346,

    Welcome to our Microsoft Q&A platform!

    Don't know what kind of control the "lisst view" you mentioned is. And since Listview has no property for setting ItemsLayout, here I provide a CollectionView Demo.

    Here is the xaml.

    <StackLayout VerticalOptions="Start">  
        <CollectionView x:Name="collectionView"  
                        ItemsSource="{Binding ItemSource}"  
                        ItemsLayout="HorizontalList"  
                        HorizontalScrollBarVisibility="Always"  
                        HeightRequest="100">  
            <CollectionView.ItemTemplate>  
                <DataTemplate>  
                    <StackLayout>  
                        <Label Text="Test"/>  
                        <Label Text="{Binding .}"/>  
                        <Button Text="click"   
                                Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.ScrollToEndCommand}"  
                                CommandParameter="{Binding .}"/>  
                    </StackLayout>  
                </DataTemplate>  
            </CollectionView.ItemTemplate>  
      
        </CollectionView>  
    </StackLayout>  
    

    Also, we decalre a public property "CollectionView Cview", so that in ViewModel we can access the collectionView.

    class MainPageViewModel  
    {  
        public CollectionView Cview { get; set; }  
        public List<string> ItemSource { get; set; }  
        public ICommand ScrollToEndCommand { get; }  
        public MainPageViewModel()  
        {  
            ItemSource = new List<string>() { "A", "B", "C", "D", "E", "F", "G", "H", "I" };  
            ScrollToEndCommand = new Command<string>(ScrollToEnd);  
        }  
      
        void ScrollToEnd(string str)  
        {  
            if (ItemSource.IndexOf(str) == 1)  
                Cview.ScrollTo(ItemSource.Last(), position: ScrollToPosition.End);  
        }  
    }  
    

    Now set the BindingContext and assign value to property "Cview".

    public MainPage()  
    {  
        InitializeComponent();  
      
        MainPageViewModel mainPageViewModel = new MainPageViewModel();  
        mainPageViewModel.Cview = collectionView;  
        BindingContext = mainPageViewModel;  
    }  
    

    Update
    To achieve "expand", we can set two different "column groups", and then decide whether to display this "colmun group" by setting its "IsVisible" property.

    <ScrollView Orientation="Horizontal" BackgroundColor="Green">  
        <StackLayout>  
            <Grid WidthRequest="{Binding ColumnWidth}">  
                <Grid ColumnDefinitions="150,150,150,150">  
                    <Label Text="Sno" IsVisible="{Binding ColumnGroup1IsVisible}"/>  
                    <Label Grid.Column="1" Text="Name" IsVisible="{Binding ColumnGroup1IsVisible}"/>  
                    <Label Grid.Column="2" Text="QTY" IsVisible="{Binding ColumnGroup1IsVisible}"/>  
                    <Label Grid.Column="3" Text="Expand" IsVisible="{Binding ColumnGroup1IsVisible}"/>  
                </Grid>  
                          
                <Grid ColumnDefinitions="150,150,150,150,150,150">  
                    <Label Text="Code" IsVisible="{Binding ColumnGroup2IsVisible}"/>  
                    <Label Grid.Column="1" Text="Address" IsVisible="{Binding ColumnGroup2IsVisible}"/>  
                    <Label Grid.Column="2" Text="Order" IsVisible="{Binding ColumnGroup2IsVisible}"/>  
                    <Label Grid.Column="3" Text="QTY" IsVisible="{Binding ColumnGroup2IsVisible}"/>  
                    <Label Grid.Column="4" Text="UM" IsVisible="{Binding ColumnGroup2IsVisible}"/>  
                    <Label Grid.Column="5" Text="Expand" IsVisible="{Binding ColumnGroup2IsVisible}"/>  
                </Grid>  
            </Grid>  
            <CollectionView x:Name="collectionView"  
                    ItemsSource="{Binding ItemSource}"  
                    HorizontalScrollBarVisibility="Always"  
                    HeightRequest="100"  
                    WidthRequest="{Binding ColumnWidth}"  
                    BackgroundColor="Red">  
                <CollectionView.ItemTemplate>  
                    <DataTemplate>  
      
                        <Grid>  
                            <Grid ColumnDefinitions="150,150,150,150"  
                                IsVisible="{Binding Source={x:Reference collectionView}, Path=BindingContext.ColumnGroup1IsVisible}">  
                                <Label Text="{Binding Sno}"/>  
                                <Label Grid.Column="1" Text="{Binding Name}"/>  
                                <Label Grid.Column="2" Text="{Binding QTY}"/>  
                                <Button Grid.Column="3" Text="Expand" Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.ExpandCommand}"/>  
                            </Grid>  
      
                            <Grid ColumnDefinitions="150,150,150,150,150,150"  
                                IsVisible="{Binding Source={x:Reference collectionView}, Path=BindingContext.ColumnGroup2IsVisible}">  
                                <Label Text="{Binding Code}"/>  
                                <Label Grid.Column="1" Text="{Binding Address}"/>  
                                <Label Grid.Column="2" Text="{Binding Order}"/>  
                                <Label Grid.Column="3" Text="{Binding QTY}"/>  
                                <Label Grid.Column="4" Text="{Binding UM}"/>  
                                <Button Grid.Column="5" Text="Expand" Command="{Binding Source={x:Reference collectionView}, Path=BindingContext.ExpandCommand}"/>  
                            </Grid>  
                        </Grid>  
      
                    </DataTemplate>  
                </CollectionView.ItemTemplate>  
            </CollectionView>  
        </StackLayout>  
    </ScrollView>  
    

    And define the corresponding properties and Command "ExpandCommand" in ViewModel.

    public ICommand ExpandCommand { get; }  
      
    bool columnGroup1IsVisible;  
    public bool ColumnGroup1IsVisible  
    {  
        get => columnGroup1IsVisible;  
        set  
        {  
            columnGroup1IsVisible = value;  
            OnPropertyChanged("ColumnGroup1IsVisible");  
        }  
    }  
      
    bool columnGroup2IsVisible;  
    public bool ColumnGroup2IsVisible  
    {  
        get => columnGroup2IsVisible;  
        set  
        {  
            columnGroup2IsVisible = value;  
            OnPropertyChanged("ColumnGroup2IsVisible");  
        }  
    }  
      
    int columnWidth;  
    public int ColumnWidth  
    {  
        get => columnWidth;  
        set  
        {  
            columnWidth = value;  
            OnPropertyChanged("ColumnWidth");  
        }  
    }  
      
    public event PropertyChangedEventHandler PropertyChanged;  
    protected void OnPropertyChanged(string propertyName)  
    {  
        var handler = PropertyChanged;  
        if (handler != null)  
            handler(this, new PropertyChangedEventArgs(propertyName));  
    }  
      
    public MainPageViewModel()  
    {  
        // ...  
        ExpandCommand = new Command(Expand);  
        ColumnGroup1IsVisible = true;  
        ColumnGroup2IsVisible = false;  
        ColumnWidth = 600;  
    }  
      
    void Expand()  
    {  
        ColumnGroup1IsVisible = !columnGroup1IsVisible;  
        ColumnGroup2IsVisible = !columnGroup2IsVisible;  
        ColumnWidth = columnGroup1IsVisible == true ? 600 : 900;  
    }  
    

    Regards,
    Kyle


    If the response is helpful, please click "Accept Answer" and upvote it.

    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.