CollectionView disabling scrolling in Xamarin forms

Reputation: 223

You can use InputTransparent. In your case what I would do would be to wrap the CollectionView in a <ContentView> as:

<ContentView InputTransparent="True"
              x:Name="content">
                    <CollectionView ItemsSource="{Binding Items}"...>
                    ...
                    </CollectionView>
</ContentView>

Create a scroll event to your scroll view:

<ScrollView Scrolled="ScrollView_Scrolled">
...
</ScrollView>

Then, with this event, make sure that the InputTransparent switches depending on the scroll position:

private void ScrollView_Scrolled(object sender, ScrolledEventArgs e)
        {
            var scrollView = sender as ScrollView;
            // Get the height of your scroll view
            var contentSize = scrollView.ContentSize.Height; 
            
            // Get the max position of the scrollview    
            var maxPos = contentSize - scrollView.Height;
                
                // Compare it to the current position
                if (Convert.ToInt16(e.ScrollY) >= Convert.ToInt16(maxPos))
                {
                    // Switch input transparent value
                    content.InputTransparent = false;
                }
                else if (Convert.ToInt16(e.ScrollY) == 0)
                {
                    content.InputTransparent = true;
                }
        }

This is perfectly fine to use two scrollable controls on the same page for what you want to do. And I don't think <CollectionView.Header> would give you the result you want.

I hope it was helpful! 🙂

Upvotes: 1

FreakyAli

Reputation: 16572

Having two scrolls on the same page is not the correct way.

Also if you just want to place items above/below your collectionView use the Header/Footer properties then!!

For instance, for the current design, your CollectionView could look something like below and work as you want it to.

 <CollectionView   Padding="20"  x:Name="topics" Scrolled="topics_Scrolled" VerticalScrollBarVisibility="Never" >
            <CollectionView.Header>
              <StackLayout  Spacing="20" >
        <Frame CornerRadius="15" 
               BackgroundColor="#A6EDB3" 
               VerticalOptions="StartAndExpand"
               HeightRequest="200" 
               IsClippedToBounds="True"
               Padding="0"   >
            <StackLayout Padding="10,5,10,5"   
                         Orientation="Horizontal"   >
                <Image Source="settingsIcon"  
                           HeightRequest="25" 
                           WidthRequest="25" 
                           Aspect="Fill" />
                <Label Text="Filter" 
                           FontSize="Medium" 
                           VerticalTextAlignment="Center" 
                           VerticalOptions="Center"/>
            </StackLayout>
        </Frame>
        <Label Text="Vocabulary topics" TextColor="black" FontSize="20" FontAttributes="Bold" ></Label>
        </StackLayout>
            </CollectionView.Header>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout Padding="0,10,0,10">
                        <Frame HasShadow="False"
                                   HeightRequest="60"
                                   CornerRadius="15" 
                                   BackgroundColor="{Binding BackgroundColor}" 
                                   HorizontalOptions="Fill" >
                            <StackLayout Orientation="Horizontal">
                                <Frame BackgroundColor="{Binding BoxColor}" WidthRequest="40" ></Frame>
                                <StackLayout>
                                    <Label Text="{Binding Name}"></Label>
                                </StackLayout>
                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

Note: you might have to adjust the margin and padding properties for it to look the exact same. My code is just an example.

For more information on CollectionView check: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/

Upvotes: 1

CollectionView disabling scrolling in Xamarin forms

Answers (2)

Related Questions