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

Question

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.

Answer 1

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.