Cardview: Vertical scrolling is not happening when carousel view inside scrollview
I have mutiple carousel views inside a scrollview .But the problem is when I vertically scroll scroll is not happening properly . In below mentioned code I have 5 carousel view control inside scrollview . Could you please guide me what could be the issue while scrolling vertically
**
Orientation="Vertical"
x:Name="parentScrollView"
AutomationId="parentScrollView"
VerticalOptions="FillAndExpand"
HorizontalOptions="FillAndExpand">
<StackLayout>
<dashboard:SpecialOfferView
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
<dashboard:LatestOffersView
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
<dashboard:SocialResponsibilityView
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
<dashboard:EventsView
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
<dashboard:FundingView
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand" />
</StackLayout>
</cardsControl:ParentScrollView>**
Noufalt
All 29 comments
Hi, first of all ParentScrollView is deprecated. User ScrollView
AndreiMisiukevich
on 18 Dec 2019
and I don't see any CarouselView here
AndreiMisiukevich
on 18 Dec 2019
Thanks for your quick reply .I had used scrollview before , then to check if ParentScrollview gives fix I have changed it .Actually carouse view is there in each content view inside scrollview .Below is the xaml for SpecialOfferView .Please have a look and guide me for this
<ContentView
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="PPA.Mobile.Views.Layouts.Pensioners.Dashboard.SpecialOfferView"
xmlns:controls="clr-namespace:SmartHealth.Mobile.Platform.Controls"
xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
xmlns:i18n="clr-namespace:PPA.Mobile.i18n;assembly=PPA.Mobile"
xmlns:appsettings="clr-namespace:PPA.Mobile.Helpers.Constants"
xmlns:appHelpers="clr-namespace:PPA.Mobile.Helpers"
xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView"
xmlns:proc="clr-namespace:PanCardView.Processors;assembly=PanCardView"
x:Name="myPage">
<ContentView.Content>
<StackLayout Padding="10,10,20,10">
<Label Text="Special Offer" />
<cards:CardsView
IsCyclical="false"
ItemsSource="{Binding BestOffersList}"
x:Name="corouselView">
<x:Arguments>
<proc:BaseCarouselFrontViewProcessor ScaleFactor="0.5"
OpacityFactor="0"
RotationFactor="0.1" />
<proc:BaseCarouselBackViewProcessor ScaleFactor="0.5"
OpacityFactor="0"
RotationFactor="0.1" />
</x:Arguments>
<cards:CardsView.ItemTemplate>
<DataTemplate>
<StackLayout x:Name="myView"
Spacing="5"
BindingContext="{Binding Source={x:Reference corouselView},Path=BindingContext}"
appHelpers:AppAttachProperties.TapCommand="{Binding SelectedOfferCommand}"
appHelpers:AppAttachProperties.TapCommandParameter="{Binding Source={x:Reference myView}, Path=BindingContext}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Frame
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Padding="0"
CornerRadius="10"
BackgroundColor="White"
Visual="Material"
Grid.Row="0">
<ffimageloading:CachedImage
Aspect="AspectFill"
HeightRequest="400"
WidthRequest="440"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
ErrorPlaceholder="tempToDelete.png"
Source="{Binding offerImageURL}"
Visual="Default" />
</Frame>
<Grid Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid Grid.Row="0"
Margin="10,10,0,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*" />
<ColumnDefinition Width="80*" />
</Grid.ColumnDefinitions>
<ffimageloading:CachedImage
Grid.Column="0"
Grid.Row="0"
Grid.RowSpan="2"
Aspect="AspectFit"
HeightRequest="50"
WidthRequest="50"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Source="{Binding partnerLogo}"
Visual="Default" />
<Label Text="{Binding partnerName}"
Grid.Column="1"
Grid.Row="0"
TextColor="White"
Margin="0,5,0,0"
VerticalOptions="Center"
Style="{StaticResource HeaderTextLargeBlue}" />
<Label Text="March 23"
Grid.Column="1"
Grid.Row="1"
TextColor="White"
Margin="0,5,0,0"
VerticalOptions="Center"
Style="{StaticResource HeaderTextLargeBlue}" />
</Grid>
<BoxView Grid.Row="1"
HeightRequest=".5"
Margin="20,30,20,0"
BackgroundColor="{StaticResource White}" />
<StackLayout Grid.Row="2"
Padding="16,20,0,0"
Spacing="20">
<Label
Text="{Binding highestDiscountRate,Converter={StaticResource TextReplacementConverter},ConverterParameter={i18n:Translate discountLabelContent}}"
TextColor="White"
Style="{StaticResource HeaderTextLargeBlue}" />
<Label Text="{Binding Text}"
TextColor="White"
Style="{StaticResource HeaderTextLargeBlue}" />
<Label Text="Street, Jeddah"
TextColor="White"
Style="{StaticResource HeaderTextLargeBlue}" />
</StackLayout>
</Grid>
</Grid>
</StackLayout>
</DataTemplate>
</cards:CardsView.ItemTemplate>
</cards:CardsView>
</StackLayout>
</ContentView.Content>
</ContentView>
can you fork my repository and create a sample with reproduction this issue?
AndreiMisiukevich
on 18 Dec 2019
reproduced. no need in sample
AndreiMisiukevich
on 18 Dec 2019
Yes I have forked and made a sample to reproduce the issue .I have placed three carousel view in scrollview and i am trying to scroll vertically but its not scrolling down
Here is the sample :-
https://github.com/Noufalt/CardView/tree/master/testCarousel
Noufalt
on 18 Dec 2019
reproduced. no need in sample
Ok Any workaround for this issue .
Noufalt
on 18 Dec 2019
It's Working fine in Android . only iOS has issue .
Noufalt
on 18 Dec 2019
check 2.3.9 (processing now)
AndreiMisiukevich
on 18 Dec 2019
check 2.3.9 (processing now)
Hello Thanks for your quick action on this . I have checked 2.3.9 version . But still the same scroll issue persists .
Noufalt
on 19 Dec 2019
@Noufalt oh... how it's possible....
well, can I reproduce it here https://github.com/Noufalt/CardView/tree/master/testCarousel ?
AndreiMisiukevich
on 19 Dec 2019
@Noufalt oh... how it's possible....
well, can I reproduce it here https://github.com/Noufalt/CardView/tree/master/testCarousel ?
Yes you can reproduce in that forked repo.Thanks
Noufalt
on 19 Dec 2019
AndreiMisiukevich
on 19 Dec 2019
2.4.0 - should work
btw, I suggest to add OppositePanDirectionDisablingThreshold = 1 ;)
AndreiMisiukevich
on 19 Dec 2019
OppositePanDirectionDisablingThreshold
Thanks for your time . Unfortunately in 2.4.0 with setting OppositePanDirectionDisablingThreshold=1 carousel also issue persists. Updated this in below forked repo. You can reproduce it in this
https://github.com/Noufalt/CardView/tree/master/testCarousel
Noufalt
on 22 Dec 2019
What a hell
AndreiMisiukevich
on 23 Dec 2019
@Noufalt please, read documentation attentively
AndreiMisiukevich
on 23 Dec 2019
@Noufalt please, read documentation attentively
Uff .....Apologize for this . After adding the Preserve method its working fine . Thanks you very much .
Noufalt
on 23 Dec 2019
@AndreiMisiukevich
Is there any provision to add multiple cards in a carousel view .I meant instead of showing one card in carousel i have to show two cards like the below screenshot .My datasource have multiple items and i would like to build small cards in it and swipe them
Noufalt
on 23 Dec 2019
Sorry I didn't understand what you'd like to achieve
AndreiMisiukevich
on 23 Dec 2019
@AndreiMisiukevich
I wants to display two items at a time in the carousel view .And I would like swipe them horizontally like a horizontal stack in a scrollview .Is it possible to achieve this in Cardview as card view has built in RTL flow direction .
In the below forked repo I have implemented this by using Xamarin forms Carousel .I would like to implement this by using CardView as it has RTL support . (If you see Special Offers section , the top carousel u can see this.)
https://github.com/Noufalt/CardView/tree/master/testCarousel
Noufalt
on 24 Dec 2019
@Noufalt
AndreiMisiukevich
on 24 Dec 2019
You owe me a star lol
<cards:CoverFlowView
PositionShiftValue="150"
x:Name="carouselView"
HeightRequest="330"
SelectedIndex="{Binding InitialPosition}">
<cards:CoverFlowView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
</x:Array>
</cards:CoverFlowView.ItemsSource>
<cards:CoverFlowView.ItemTemplate>
<DataTemplate>
<StackLayout x:Name="myView"
Margin="90,0"
Spacing="0">
<Frame
IsClippedToBounds="True"
Padding="0"
Margin="0"
CornerRadius="16"
Visual="Material">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
<Image
Grid.Row="0"
Aspect="AspectFill"
HeightRequest="300"
WidthRequest="200"
HorizontalOptions="FillAndExpand"
VerticalOptions="FillAndExpand"
Source="tempToDelete.png"
Visual="Default" />
<StackLayout BackgroundColor="White"
VerticalOptions="FillAndExpand"
Grid.Row="1">
<Label Text="Test Offer"
TextColor="Black"
Margin="0,5,0,0"
VerticalOptions="Center" />
<Label Text="10 % Discount"
TextColor="Black"
Margin="0,5,0,0"
VerticalOptions="Center" />
</StackLayout>
</Grid>
</Frame>
</StackLayout>
</DataTemplate>
</cards:CoverFlowView.ItemTemplate>
</cards:CoverFlowView>
@AndreiMisiukevich
Sure Andrei .... Thanks for your quick insight on this
Noufalt
on 24 Dec 2019
@AndreiMisiukevich
Hi Andrei, unfortunately this still seems to be an issue when using a Master Detail page setup. I just changed the MainPage in Noufalts fork to be inside a Master Detail page and vertical scrolling stops working. Do you think that anything that can be done here?
My app needs to use a master detail page. But it also needs to have horizontal panning on the CarouselView and also vertical scrolling for the main ScrollView.
Dmbandit
on 24 Mar 2020
@AndreiMisiukevich
Hi Andrei, unfortunately this still seems to be an issue when using a Master Detail page setup. I just changed the MainPage in Noufalts fork to be inside a Master Detail page and vertical scrolling stops working. Do you think that anything that can be done here?My app needs to use a master detail page. But it also needs to have horizontal panning on the CarouselView and also vertical scrolling for the main ScrollView.
his fork is outdated. Fork my repository and validate the issue
AndreiMisiukevich
on 24 Mar 2020
@AndreiMisiukevich
Hi Andrei, unfortunately this still seems to be an issue when using a Master Detail page setup. I just changed the MainPage in Noufalts fork to be inside a Master Detail page and vertical scrolling stops working. Do you think that anything that can be done here?
My app needs to use a master detail page. But it also needs to have horizontal panning on the CarouselView and also vertical scrolling for the main ScrollView.his fork is outdated. Fork my repository and validate the issue
Thanks @AndreiMisiukevich for the fast reply. I've forked your repo and replicated the issue here https://github.com/Dmbandit/CardView as requested.
The app now just opens a master detail page with the CarouselSampleXamlView as the detail page. I put it in a scroll view and added an extra stack just so that the page is actually scrollable. You will see that you cant start vertical scrolling from the CarouselView but you can from the rest of the page. It works if it's not in a Master Detail page however.
Dmbandit
on 25 Mar 2020
2.5.0
AndreiMisiukevich
on 25 Mar 2020
@AndreiMisiukevich
I have tested with latest nuget 2.5.0, working perfectly now, thank you so much for doing this so quickly!
Dmbandit
on 26 Mar 2020
Related issues
jungjanos
路
8Comments
JTOne123
路
5Comments
IgorPopov56
路
4Comments
2092015
路
5Comments
alicint
路
3Comments