CollectionView inside ScrollView

youngcalabriayoungcalabria ✭✭Member ✭✭
edited September 12 in Xamarin.Forms

I'm trying to add 2 CollectionView in the same form using ScrollView.

The ScrollView is scrolling as expected but each CollectionView is also scrolling (a "slight" scrolling for about 20px) separately.

I can't figure out why.

What I need is to disable scrolling on both collectionview, but keep it for the whole form.

Thanks!

Here is my code:


<?xml version="1.0" encoding="utf-8" ?>

    <ScrollView>
    <StackLayout>
        <CollectionView VerticalOptions="Center" HorizontalOptions="Center"
                ItemsSource="{x:Static data:ServicesData.ServiceItems}"
                SelectionMode="Single"
                SelectionChanged="OnCollectionViewSelectionChanged">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="3"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Frame x:Name="FrameExtContainer" Padding="0.5" HasShadow="False" HorizontalOptions="FillAndExpand" CornerRadius="0" OutlineColor="LightGray" BackgroundColor="LightGray" >
                            <Frame x:Name="FrameIntContainer" HasShadow="False" HorizontalOptions="FillAndExpand" CornerRadius="0" Padding="0">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="5,15,5,10">
                                        <Image Source="{Binding ImageUrl}" Aspect="AspectFit" HeightRequest="50" WidthRequest="50" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                    </StackLayout>
                                    <StackLayout Grid.Row="1" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="5,10,5,5">
                                        <Label Text="{Binding Name}" FontSize="12" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                    </StackLayout>
                                </Grid>
                            </Frame>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>

        <CollectionView VerticalOptions="Center" HorizontalOptions="Center"
                ItemsSource="{x:Static data:ServicesData.ServiceItems}"
                SelectionMode="Single"
                SelectionChanged="OnCollectionViewSelectionChanged">
            <CollectionView.ItemsLayout>
                <GridItemsLayout Orientation="Vertical" Span="3"/>
            </CollectionView.ItemsLayout>
            <CollectionView.ItemTemplate>
                <DataTemplate>
                    <StackLayout>
                        <Frame x:Name="FrameExtContainer1" Padding="0.5" HasShadow="False" HorizontalOptions="FillAndExpand" CornerRadius="0" OutlineColor="LightGray" BackgroundColor="LightGray" >
                            <Frame x:Name="FrameIntContainer1" HasShadow="False" HorizontalOptions="FillAndExpand" CornerRadius="0" Padding="0">
                                <Grid>
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="*" />
                                        <RowDefinition Height="*" />
                                    </Grid.RowDefinitions>
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    <StackLayout Grid.Row="0" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="5,15,5,10">
                                        <Image Source="{Binding ImageUrl}" Aspect="AspectFit" HeightRequest="50" WidthRequest="50" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                    </StackLayout>
                                    <StackLayout Grid.Row="1" Grid.Column="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Margin="5,10,5,5">
                                        <Label Text="{Binding Name}" FontSize="12" TextColor="Black" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand"/>
                                    </StackLayout>
                                </Grid>
                            </Frame>
                        </Frame>
                    </StackLayout>
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>


    </StackLayout>
    </ScrollView>


Best Answers

Answers

  • youngcalabriayoungcalabria ✭✭ Member ✭✭

    @LandLu thanks a million!

  • youngcalabriayoungcalabria ✭✭ Member ✭✭
    edited September 12

    @LandLu , what if I want to put 2 collectionview with different ItemTemplate?
    I tried it, without scrollview it causes the second collectionview to not be displayed.

    How to add them both on the same form?
    Please note, in this case we have different ItemTemplate.

    Thanks again!

  • youngcalabriayoungcalabria ✭✭ Member ✭✭

    thank you @LandLu , I will give it a try

Sign In or Register to comment.