How to freeze columns in xamarin forms.

Question

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 ?

Answer 1

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.