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,380 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Kyle Wang 5,531 Reputation points Microsoft External Staff
    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.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.