question

PallelaNaveen-9346 avatar image
0 Votes"
PallelaNaveen-9346 asked KyleWang-MSFT commented

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

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.

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

KyleWang-MSFT avatar image
0 Votes"
KyleWang-MSFT answered KyleWang-MSFT commented

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.

· 6
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi sir,

Thank you for your inputs and the code for sharing. I need some thing like this below. As per the above code Header view is not displaying as expected.

As per the requirement the above can be implemented using collection view?


Let me drw the requirement here

Sno Location Name Location QTY
1 "XYDLJFL" 10 -->
2 "jhkfkdg" 23 -->
3 "lkjglkdf" 25 -->

Now when user clicks on the expnand for more details on --> it should come like below

Code Address Order QTY UM
8989 "XYDLJFL" 10 pm <--
98698 "jhkfkdg" 23 hn <--
98793 "lkjglkdf" 25 fg <--

When User click on <-- its should come to the original state

Thanks,
Naveen.

0 Votes 0 ·

@PallelaNaveen-9346 I have updated the answer, and you can check it now. Besides, please note that one thread only disscusses about one issue. If the original issue has been solved, you can closed this thread and post the new issue on another new thread.

0 Votes 0 ·

Thank you for the inputs.

0 Votes 0 ·

Hi sir,

Thank you for your inputs and the code for sharing. I need some thing like this below. As per the above code Header view is not displaying as expected.

As per the requirement the above can be implemented using collection view?


Let me drw the requirement here

Sno Location Name Location QTY
1 "XYDLJFL" 10 -->
2 "jhkfkdg" 23 -->
3 "lkjglkdf" 25 -->

Now when user clicks on the expnand for more details on --> it should come like below

Code Address Order QTY UM
8989 "XYDLJFL" 10 pm <--
98698 "jhkfkdg" 23 hn <--
98793 "lkjglkdf" 25 fg <--

When User click on <-- its should come to the original state

Thanks,
Naveen.

0 Votes 0 ·

Hi KyleWang,

Thnk you for the inputs. Can we freeze the first column.

0 Votes 0 ·

@PallelaNaveen-9346 Please note: one thread only discusses one issue. So post the new issue or requirement on another new thread.

0 Votes 0 ·