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>