Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

Scrolling Issue

jojo1234jojo1234 Member ✭✭

I have 2 rows. When scrolling I want both of them to move down at the same time, but what happens is that the top row stays static whiles the bottom one (which is a CollectionView, if that helps) scrolls down. The top row only scrolls down after getting to about the middle section of the list. I would like to resolve this i.e. I would like everything to scroll down at the same time.

what I'm experiencing

XAML Code

<ScrollView Grid.Row="1">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="2"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>

                    <!--My Doctors-->
                    <Grid Grid.Row="0"
                          ColumnSpacing="0"
                          RowSpacing="0">
                        <CollectionView ItemsSource="{Binding MyDoctors}"
                                        HeightRequest="90">

                            <CollectionView.ItemsLayout>
                                <ListItemsLayout Orientation="Horizontal"
                                                 ItemSpacing="20"/>
                            </CollectionView.ItemsLayout>

                        <CollectionView.ItemTemplate>
                                <DataTemplate>

                                    <!--My Doctors Image Container-->
                                    <Grid>
                                        <pancake:PancakeView BackgroundColor="Gray"
                                                             CornerRadius="100"
                                                             WidthRequest="65"
                                                             HeightRequest="65"
                                                             HorizontalOptions="Start"
                                                             VerticalOptions="Center"
                                                             Margin="10,0,0,0">

                                            <!--My Doctors Image-->
                                            <Image HorizontalOptions="Center"
                                                   VerticalOptions="Center"/>
                                        </pancake:PancakeView>

                                        <!--Online Status Indicator-->
                                    <pancake:PancakeView BackgroundColor="Red"
                                                         BorderColor="White"
                                                         BorderThickness="3"
                                                         CornerRadius="100"
                                                         HeightRequest="15"
                                                         WidthRequest="15"
                                                         HorizontalOptions="Center"
                                                         VerticalOptions="End"
                                                         Margin="60,0,0,15"/>
                                </Grid>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
                    </Grid>

                    <!--A simple seperator-->
                    <pancake:PancakeView Grid.Row="1"
                                         BackgroundColor="#cccccc"
                                         Margin="15,0,15,0"
                                         HasShadow="False"/>

                    <!--Recent Doctors List-->
                    <CollectionView Grid.Row="2"
                                    ItemsSource="{Binding RecentDoctors}">

                            <CollectionView.ItemTemplate>
                                <DataTemplate>
                                    <Grid ColumnSpacing="0"
                                      RowSpacing="0"
                                      Padding="0,10,0,10">

                                        <!--Recent Doctors Item Template-->
                                        <pancake:PancakeView BackgroundColor="#F2F2F2"
                                                         HasShadow="True"
                                                         Elevation="5"
                                                         CornerRadius="10"
                                                         Margin="7,0"
                                                         Padding="20,5,0,5">
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="80"/>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>

                                                <!--Doctors Image-->
                                                <Frame Grid.Column="0" 
                                                   BackgroundColor="#CCCCCC"
                                                   IsClippedToBounds="True"
                                                   Padding="0"
                                                   HasShadow="False"
                                                   CornerRadius="100"
                                                   HeightRequest="80">

                                                    <Image HorizontalOptions="Center"
                                                       VerticalOptions="Center"/>
                                                </Frame>

                                                <!--Doctors Info-->
                                                <StackLayout Grid.Column="1"
                                                         VerticalOptions="Center"
                                                         Spacing="0">

                                                    <!--Doctors Name Label-->
                                                    <Label Text="{Binding DoctorsName}"
                                                       TextColor="Black"
                                                       FontAttributes="Bold"
                                                       FontSize="17"/>

                                                    <!--Specialization Label-->
                                                    <Label Text="{Binding Specialization}"
                                                       TextColor="Black"
                                                       FontAttributes="Bold"
                                                       FontSize="17"/>

                                                    <!--Location Label-->
                                                    <Label Text="{Binding Location}"
                                                       TextColor="#999999"
                                                       FontSize="12"/>
                                                </StackLayout>
                                            </Grid>
                                        </pancake:PancakeView>
                                    </Grid>
                                </DataTemplate>
                            </CollectionView.ItemTemplate>
                        </CollectionView>
            </Grid>
        </ScrollView>

Best Answer

Answers

  • jezhjezh Member, Xamarin Team Xamurai

    In order to understand this question, I created a new app according to your code.
    Yes, it is just the case as you said.

    We should know that ScrollView doesn't have the ability to scroll in both directions at the same time.

    But you can control the scrolling of the two CollectionViews according to your logic.

    For more about Xamarin.Forms CollectionView Scrolling, you can check: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/collectionview/scrolling

  • jojo1234jojo1234 Member ✭✭
    edited April 20
    Yes, the two CollectionViews are actually in opposite directions so that's how they should be. But in the case of the `ScrollView` I realized that if I touch the small whitespace between the two `CollectionViews` and scroll with that, everything scrolls uniformly ie is there a way for me to make the scroll effect of the `ScrollView` overtake/more dominant than the that of the `CollectionView`?
  • jezhjezh Member, Xamarin Team Xamurai

    But in the case of the ScrollView I realized that if I touch the small whitespace between the two CollectionViews and scroll with that, everything scrolls uniformly

    Hey friend ,I can't reproduce the phenomenon you mentioned.

    is there a way for me to make the scroll effect of the ScrollView overtake/more dominant than the that of the CollectionView?

    Besides, what do you mean by above words?

  • jojo1234jojo1234 Member ✭✭
    edited April 21

    https://i.imgur.com/7GqvsFv.gif

    Like so. In the first swipe I touched above(above the grey line) the CollectionView and everything scrolled down at the same time, and in the second swipe I touched the CollectionView and the top area stayed static whiles I was scrolling. This tells me that the ScrollView is in fact working, so is there a way to possibly disable the CollectionViews scrolling effect whiles keeping the scrolling effect of the ScrollView?

  • jezhjezh Member, Xamarin Team Xamurai

    in the second swipe I touched the CollectionView and the top area stayed static whiles I was scrolling. This tells me that the ScrollView is in fact working.

    Yes, the scrollView is just scrolling in the vertical direction. There's no problem with that.

    In fact,the scrolling of your collection view will conflict with the scrollview's so we should not place the collection view in a scrollview. It will definitely cause some scrolling issues.

  • jojo1234jojo1234 Member ✭✭

    @jezh said:

    in the second swipe I touched the CollectionView and the top area stayed static whiles I was scrolling. This tells me that the ScrollView is in fact working.

    Yes, the scrollView is just scrolling in the vertical direction. There's no problem with that.

    In fact,the scrolling of your collection view will conflict with the scrollview's so we should not place the collection view in a scrollview. It will definitely cause some scrolling issues.

    Oh I see. Ok so I tried taking the CollectionView out of the ScrollView and it surprisingly had the same effect. Is this supposed to happen? If so, is there anyway for me to get the two CollectionView's to scroll together with the ScrollView?

  • jezhjezh Member, Xamarin Team Xamurai

    is there anyway for me to get the two CollectionView's to scroll together with the ScrollView?

    Hey friend @jojo1234 why do you want the two CollectionView to scroll together with the ScrollView ?

    What function do you wan to achieve?

    When you scroll one CollectionView, do you want to scroll another CollectionView automatically accroding to the selected Item?

  • jojo1234jojo1234 Member ✭✭
    > When you scroll one CollectionView, do you want to scroll another CollectionView automatically accroding to the selected Item?
    Yes please, if this is possible
Sign In or Register to comment.