How to freeze columns in xamarin forms.

Pallela, Naveen 21 Reputation points
2021-06-29T10:23:47.74+00:00

Hi Team,

I would like display a grid showing multiple columns. When I scroll horizontally the first column should be freeze(i.e. I know this can be done using third party controls like sync fusion etc).

With out third party controller how can we achieve this. Can anyone throw pointers on this ?

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

Accepted answer
  1. Kyle Wang 5,531 Reputation points
    2021-06-30T03:01:28.753+00:00

    Hi PallelaNaveen-9346,

    Welcome to our Microsoft Q&A platform!

    To "freeze the first column", here is a workaround you can refer to.

    You can create another CollectionView to display FirstColumn and put it in the same Grid with another CollectionView named "collectionView".

    <Grid ColumnDefinitions="100,Auto"  
             RowDefinitions="Auto,Auto">  
        <StackLayout Grid.Row="0" Grid.RowSpan="2" VerticalOptions="Start"  
                Orientation="Vertical" BackgroundColor="Green">  
            <Label Text="First"/>  
            <CollectionView x:Name="firstColumnView"  
                Scrolled="firstColumnView_Scrolled"  
                ItemsSource="{Binding ItemSource}"  
                HorizontalScrollBarVisibility="Always"  
                HeightRequest="100"  
                WidthRequest="100"  
                BackgroundColor="Red">  
                <CollectionView.ItemTemplate>  
                    <DataTemplate>  
                        <StackLayout HeightRequest="50">  
                            <Label Text="{Binding FirstColumnValue}"/>  
                        </StackLayout>  
                    </DataTemplate>  
                </CollectionView.ItemTemplate>  
            </CollectionView>  
        </StackLayout>  
      
        <ScrollView Grid.Column="1"  
                Orientation="Horizontal" BackgroundColor="Green">  
            <!--...-->  
        </ScrollView>  
    </Grid>  
    

    To achieve synchronous scrolling of two CollectionViews, you need to subscribe to the "Scrolled" event for them, as shown above. And call method ScrollTo.

    MainPage.xaml.cs

    private void collectionView_Scrolled(object sender, ItemsViewScrolledEventArgs e)  
    {  
        firstColumnView.ScrollTo(e.FirstVisibleItemIndex, position:ScrollToPosition.Start);  
    }  
      
    private void firstColumnView_Scrolled(object sender, ItemsViewScrolledEventArgs e)  
    {  
        collectionView.ScrollTo(e.FirstVisibleItemIndex, position: ScrollToPosition.Start);  
    }  
    

    Also, set the following ItemsLayout for the two CollecttionViews.

    <CollectionView.ItemsLayout>  
        <LinearItemsLayout Orientation="Vertical"  
            SnapPointsType="MandatorySingle"  
            SnapPointsAlignment="Start" />  
    </CollectionView.ItemsLayout>  
    

    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.


0 additional answers

Sort by: Most helpful