Reproduce carousel view behaviour/animation/transition to a horizontal scroll view.

MedFehmiMedFehmi Member ✭✭

Hey developers,
I have so far tried to use a carousel view due to its ease of use and of course its performance. But I tried to show the tail of each UI elements (let's say we've a bunch of cards) whatever the position is as shown in the picture. I've googled a lot and posted another question in this forum but since then I changed the project UI a little bit so I ignored the given solution and now I am on my own again, I resolved it (show the next card's tail or/and the previous), I'll write down the structure I used in XAML but first let me highlight my requirements.
I want to reproduce the behaviour, animation/transition on swiping of the carousel view to my view, because I am actually using a horizontal scroll view with a Flex layout inside.
Here is the structure :

Now I've tried two options :
1- Use of Scrolled event in the scroll view but that hasn't been a great option because it fire the events (animation or transition) after the scroll is done, in my case it should fire the event since scrolling started.
2- Use of SwipeGestureRecognizer on Scrollview, FlexLayout and BoxView : couldn't get a stable behaviour on the 2 first attempts but when I used a BoxView I couldn't get each StackLayout (the StackLayout is my card) inside the BoxView (It wasn't built for that).

Here is my UI after I used a horizontal scroll view :

here is the behaviour I wanted to reproduce to my view :
https://media.giphy.com/media/l0NwH3XDSYhQ6l4TC/giphy.gif

Best Answers

Answers

  • MedFehmiMedFehmi Member ✭✭

    @JamesMontemagno I appreciate if you can answer this one for me, because I followed the carousel view tutorial on your blog (I saw the image on the top of the page as mine in this question exactly : a carousel with next/previous pages are visible) but isn't implemented.

  • MedFehmiMedFehmi Member ✭✭

    @AndreiMisiukevich_ This is exactly what I am looking for, but still can't get my cards to be displayed (a stack layout in my case is the card I want to display 3 cards in total => in your sample an image in a Frame is a card).

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭

    What exactly is wrong?

  • MedFehmiMedFehmi Member ✭✭

    @AndreiMisiukevich_ I want to add items directly through xaml when using CoverFlow, in GitHub you showed how to do that to a carousel view, so I changed it to this :
    cards:CoverFlow.ItemsSource
    x:Array Type="{x:Type View}"
    I got an error when calling this view because it doesn't recognize the "Array : Type View"

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭

    @MedFehmi yes, this is Xamarin Forms bug, i guess

    Try to do it in code behind

  • MedFehmiMedFehmi Member ✭✭
    edited January 30

    I think the problem I am facing is my concept is quite different than the one used in your package. I used to do it this way :
    I had a CarouselView
    cv:CarouselViewControl x:Name="cv" AnimateTransition="false" ShowIndicators="true" Margin="0,11,0,0" Grid.Row="0" ItemsSource="{Binding Source={x:StaticResource CarouselPages}}"/> and its Item source is bound to :
    ResourceDictionary
    local:CarouselPageTemplateList x:Key="CarouselPages"
    DataTemplate
    StackLayout x:Name="leftCard"/
    StackLayout x:Name="middleCard"/
    StackLayout x:Name="rightCard"/
    /DataTemplate
    /local:CarouselPageTemplateList
    /ResourceDictionary
    so basically, the ItemSource in my carousel was serving as a data template AND item source locator and it was working just fine.
    But when I tried to use CoverFlow, I couldn't get it to display correctly because I need only to bind my "CarouselPages" to the item source of CoverFlow which didn't work (nothing is displayed) so neither the code behind could get it to work because something needs to be separated (item source from data template and this is what I cannot see in my case).
    So any suggestion. I can paste my cards code if needed?

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭

    Yes show whole xaml and codebehind

  • MedFehmiMedFehmi Member ✭✭
    edited January 31
    Here is my Xaml code 
    `<?xml version="1.0" encoding="UTF-8"?>
    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:MyApp;assembly= StatsApp" xmlns:pages="clr-namespace: StatsApp.Pages;assembly:StatsApp" xmlns:oxy="clr-namespace:OxyPlot.Xamarin.Forms;assembly=OxyPlot.Xamarin.Forms" x:Class="StatsApp.ResultPage" xmlns:cards="clr-namespace:PanCardView;assembly=PanCardView" xmlns:cv="clr-namespace:CarouselView.FormsPlugin.Abstractions;assembly=CarouselView.FormsPlugin.Abstractions">
        <ContentPage.Resources>
            <ResourceDictionary>
                <local:CarouselPageTemplateList x:Key="CarouselPages">
                    <DataTemplate>
                        <StackLayout Margin="16,0,0,0">
                            <Grid RowSpacing="0" x:Name="resultBox1">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="421" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Button Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="White" BorderWidth="0"         BorderRadius="6" HorizontalOptions="Center" Margin="0,8,0,0">
                                    <Button.Effects>
                                        <local:ShadowEffect Radius="0">
                                            <local:ShadowEffect.Color>
                                                <OnPlatform x:TypeArguments="Color" iOS="{x:Static pages:UIConfig.DarkGrey}" Android="{x:Static pages:UIConfig.Black}" />
                                            </local:ShadowEffect.Color>
                                        </local:ShadowEffect>
                                    </Button.Effects>
                                </Button>
                                <StackLayout Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="White" HorizontalOptions="Center" Margin="3,11,3,3">
                                    <Grid Margin="13,13,16,13" HeightRequest="421">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="22" />
                                            <RowDefinition Height="40" />
                                            <RowDefinition Height="28" />
                                            <RowDefinition Height="18" />
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="32" />
                                            <RowDefinition Height="18" />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Image Source="GreenStar1" IsVisible="{Binding OneStarIconSourceIsVisible}" Grid.Row="0" Grid.ColumnSpan="2" HorizontalOptions="Center" Aspect="AspectFill" />
                                        <Label Text="{Binding OneStarTitle}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="25" Grid.Row="1" Grid.ColumnSpan="2" HorizontalOptions="Center" Margin="-16,6,-19,0" FontFamily="HelveticaNeue-Light" />
                                        <Label Text="{Binding OneStarMonContribution}" TextColor="{x:Static pages:UIConfig.Orange}" FontSize="28" Grid.Row="2" Grid.Column="0" HorizontalOptions="Start" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                        <Label Text="zahlen Sie monatlich" TextColor="{x:Static pages:UIConfig.Orange}" FontSize="15" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" Margin="0,-5,0,-16" FontFamily="HelveticaNeue-Light" />
                                        <Label Text="{Binding OneStarQuote}" TextColor="{x:Static pages:UIConfig.Green}" Grid.Row="2" Grid.Column="1" FontSize="28" HorizontalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                        <Label Text="Förderquote" TextColor="{x:Static pages:UIConfig.Green}" Grid.Row="3" Grid.Column="1" FontSize="15" HorizontalOptions="End" Margin="0,-5,0,0" FontFamily="HelveticaNeue-Light" />
                                        <!--<oxy:PlotView Model="{Binding RiesterChartModel}" BackgroundColor="White" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,-3,0,-5">
                                        </oxy:PlotView>-->
                                        <local:PlotParentView Model="{Binding OneStarChartModel}" BackgroundColor="White" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,-3,0,-5" />
                                        <Label Text="{Binding OneStarMonPayin}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="28" Grid.Row="5" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                        <Label Text="Sparbeitrag pro Monat" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="15" Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" FontFamily="HelveticaNeue-Light" />
                                        <Label Text="{Binding OneStarPensionPayout}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="28" Grid.Row="5" Grid.Column="1" HorizontalOptions="End" VerticalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                        <Label Text="Rente pro Monat" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="15" Grid.Row="6" Grid.Column="1" HorizontalOptions="End" FontFamily="HelveticaNeue-Light" />
                                    </Grid>
                                </StackLayout>
                                <Button Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="Transparent"   Clicked="OneStarClick">
                                </Button>
                            </Grid>
                        </StackLayout>
                    </DataTemplate>
                    <DataTemplate>
                        <StackLayout>
                            <Grid RowSpacing="0" x:Name="resultBox2">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="421" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Button Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="White" BorderWidth="0" BorderRadius="6" HorizontalOptions="Center" Margin="0,8,0,0">
                                    <Button.Effects>
                                        <local:ShadowEffect Radius="0">
                                            <local:ShadowEffect.Color>
                                                <OnPlatform x:TypeArguments="Color" iOS="{x:Static pages:UIConfig.DarkGrey}" Android="{x:Static pages:UIConfig.Black}" />
                                            </local:ShadowEffect.Color>
                                        </local:ShadowEffect>
                                    </Button.Effects>
                                </Button>
                                <StackLayout Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="White" HorizontalOptions="Center" Margin="3,11,3,3">
                                    <Grid Margin="13,13,16,13" HeightRequest="421">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="22" />
                                            <RowDefinition Height="40" />
                                            <RowDefinition Height="28" />
                                            <RowDefinition Height="18" />
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="32" />
                                            <RowDefinition Height="18" />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Image Source="GreenStars3" IsVisible="{Binding ThreeStarIconSourceIsVisible}" Grid.Row="0" Grid.ColumnSpan="2" HorizontalOptions="Center" Aspect="AspectFill" />
                                        <Label Text="{Binding ThreeStarTitle}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="25" Grid.Row="1" Grid.ColumnSpan="2" HorizontalOptions="Center" Margin="-16,6,-19,0" FontFamily="HelveticaNeue-Light" />
                                        <Label Text="{Binding ThreeStarMonContribution}" TextColor="{x:Static pages:UIConfig.Orange}" FontSize="28" Grid.Row="2" Grid.Column="0" HorizontalOptions="Start" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                        <Label Text="zahlen Sie monatlich" TextColor="{x:Static pages:UIConfig.Orange}" FontSize="15" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" Margin="0,-5,0,-16" FontFamily="HelveticaNeue-Light" />
                                        <Label Text="{Binding ThreeStarQuote}" TextColor="{x:Static pages:UIConfig.Green}" Grid.Row="2" Grid.Column="1" FontSize="28" HorizontalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                        <Label Text="Förderquote" TextColor="{x:Static pages:UIConfig.Green}" Grid.Row="3" Grid.Column="1" FontSize="15" HorizontalOptions="End" Margin="0,-5,0,0" FontFamily="HelveticaNeue-Light" />
                                        <!-- <oxy:PlotView Model="{Binding BavChartModel}" BackgroundColor="White" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,-3,0,-5">
                                        </oxy:PlotView>-->
                                        <local:PlotParentView Model="{Binding ThreeStarChartModel}" BackgroundColor="White" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,-3,0,-5" />
                                        <Label Text="{Binding ThreeStarMonPayin}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="28" Grid.Row="5" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                        <Label Text="Sparbeitrag pro Monat" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="15" Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" FontFamily="HelveticaNeue-Light" />
                                        <Label Text="{Binding ThreeStarPensionPayout}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="28" Grid.Row="5" Grid.Column="1" HorizontalOptions="End" VerticalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                        <Label Text="Rente pro Monat" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="15" Grid.Row="6" Grid.Column="1" HorizontalOptions="End" FontFamily="HelveticaNeue-Light" />
                                    </Grid>
                                </StackLayout>
                                <Button Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="Transparent" Clicked="ThreeStarClick">
                                </Button>
                            </Grid>
                        </StackLayout>
                    </DataTemplate>
                    <DataTemplate>
                        <StackLayout Margin="0,0,16,0">
                            <Grid RowSpacing="0" x:Name="resultBox3">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="421" />
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                </Grid.ColumnDefinitions>
                                <Button Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="White" BorderWidth="0" BorderRadius="6" HorizontalOptions="Center" Margin="0,8,0,0">
                                    <Button.Effects>
                                        <local:ShadowEffect Radius="0">
                                            <local:ShadowEffect.Color>
                                                <OnPlatform x:TypeArguments="Color" iOS="{x:Static pages:UIConfig.DarkGrey}" Android="{x:Static pages:UIConfig.Black}" />
                                            </local:ShadowEffect.Color>
                                        </local:ShadowEffect>
                                    </Button.Effects>
                                </Button>
                                <StackLayout Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="White" HorizontalOptions="Center" Margin="3,11,3,3">
                                    <Grid Margin="13,13,16,13" HeightRequest="421">
                                        <Grid.RowDefinitions>
                                            <RowDefinition Height="22" />
                                            <RowDefinition Height="40" />
                                            <RowDefinition Height="28" />
                                            <RowDefinition Height="18" />
                                            <RowDefinition Height="*" />
                                            <RowDefinition Height="32" />
                                            <RowDefinition Height="18" />
                                        </Grid.RowDefinitions>
                                        <Grid.ColumnDefinitions>
                                            <ColumnDefinition Width="*" />
                                            <ColumnDefinition Width="*" />
                                        </Grid.ColumnDefinitions>
                                        <Image Source="GreenStars2" IsVisible="{Binding TwoStarIconSourceIsVisible}" Grid.Row="0" Grid.ColumnSpan="2" HorizontalOptions="Center" Aspect="AspectFill" />
                                        <Label Text="{Binding TwoStarTitle}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="25" Grid.Row="1" Grid.ColumnSpan="2" HorizontalOptions="Center" Margin="-16,6,-19,0" FontFamily="HelveticaNeue-Light" />
                                        <Label Text="{Binding TwoStarMonContribution}" TextColor="{x:Static pages:UIConfig.Orange}" FontSize="28" Grid.Row="2" Grid.Column="0" HorizontalOptions="Start" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                        <Label Text="zahlen Sie monatlich" TextColor="{x:Static pages:UIConfig.Orange}" FontSize="15" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" Margin="0,-5,0,-16" FontFamily="HelveticaNeue-Light" />
                                        <Label Text="{Binding TwoStarQuote}" TextColor="{x:Static pages:UIConfig.Green}" Grid.Row="2" Grid.Column="1" FontSize="28" HorizontalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                        <Label Text="Förderquote" TextColor="{x:Static pages:UIConfig.Green}" Grid.Row="3" Grid.Column="1" FontSize="15" HorizontalOptions="End" Margin="0,-5,0,0" FontFamily="HelveticaNeue-Light" />
                                        <!-- <oxy:PlotView Model="{Binding BaseChartModel}" BackgroundColor="White" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,-3,0,-5">
                                        </oxy:PlotView>-->
                                        <local:PlotParentView Model="{Binding TwoStarChartModel}" BackgroundColor="White" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,-3,0,-5" />
                                        <Label Text="{Binding TwoStarMonPayin}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="28" Grid.Row="5" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                        <Label Text="Sparbeitrag pro Monat" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="15" Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" FontFamily="HelveticaNeue-Light" />
                                        <Label Text="{Binding TwoStarPensionPayout}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="28" Grid.Row="5" Grid.Column="1" HorizontalOptions="End" VerticalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                        <Label Text="Rente pro Monat" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="15" Grid.Row="6" Grid.Column="1" HorizontalOptions="End" FontFamily="HelveticaNeue-Light" />
                                    </Grid>
                                </StackLayout>
                                <Button Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="Transparent" Clicked="TwoStarClick">
                                </Button>
                            </Grid>
                        </StackLayout>
                    </DataTemplate>
                </local:CarouselPageTemplateList>
            </ResourceDictionary>
        </ContentPage.Resources>
        <ContentPage.Content>
            <StackLayout>
                <local:JavascriptCalculator x:Name="javascriptCalculator" />
                <Grid VerticalOptions="FillAndExpand" RowSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="700" />
                        <RowDefinition Height="66" />
                    </Grid.RowDefinitions>
    
    <cards:CoverFlowView x:Name="cv" Margin="0,11,0,0" Grid.Row="0" PositionShiftValue="60" SelectedIndex="1" ItemsSource="{Binding Source={x:StaticResource CarouselPages}}">
                        <cards:CoverFlowView.ItemTemplate>
                            <DataTemplate>
                                <ContentView>
                                    <Frame VerticalOptions="Center" HorizontalOptions="Center" HeightRequest="700" WidthRequest="480" Padding="0" HasShadow="false" IsClippedToBounds="true" CornerRadius="10">
    
                                    </Frame>
                                </ContentView>
                            </DataTemplate>
                        </cards:CoverFlowView.ItemTemplate>
                    </cards:CoverFlowView>`
    
    But I only used XAML to make the view properly visible so I don't see .cs code useful to paste it.
    
  • MedFehmiMedFehmi Member ✭✭

    Sorry for the copy quality, but as in the code you can see I used a ResourceDictionary to be bound to my coverflow/(carousel view previously), I left the Frame tag empty just for simplification purpose. I have 3 data templates above and still confused between making's as a ItemSource for the CoverFlow(as it was with my carousel view) or to embed'em inside the Frame(which only takes one data template) or dome both.

  • MedFehmiMedFehmi Member ✭✭
            <cards:CoverFlowView x:Name="cv" Margin="0,11,0,0" Grid.Row="0" PositionShiftValue="60" SelectedIndex="0">
                                <cards:CoverFlowView.ItemsSource>
                                    <x:Array Type="{x:Type ContentView}">
    
                        <ContentView>
                                            <StackLayout Margin="0,0,0,0"></StackLayout>
                                       </ContentView>
    
                                        <ContentView>
                                            <StackLayout></StackLayout>
                                       </ContentView>
    
                                        <ContentView>
                                            <StackLayout Margin="0,0,16,0"></StackLayout>
                                       </ContentView>
    
                                   </x:Array>
                                </cards:CoverFlowView.ItemsSource>
                            </cards:CoverFlowView>
    This is the last thing I tried to do and I am getting this error now : System.MissingMethodException has been thrown=>Default constructor not found for type System.Array
    
  • MedFehmiMedFehmi Member ✭✭

    @AndreiMisiukevich_ said:
    @MedFehmi yes, this is Xamarin Forms bug, i guess

    Try to do it in code behind

    This happened because of the linker was set to be working, just setting it to "Don't link" would do the job and solve the issue. Thanks anyway.

  • MedFehmiMedFehmi Member ✭✭

    @AndreiMisiukevich_ Only one question is it possible to limit the CoverFlowView from getting the same list (ex: 3 cards) infinitely (limit from right and left so if u see the last card in your collection from the right you won't see the next one which is the first card in the collection and the same from the left) so basically I want to stop right scrolling when the list hits the limit and same on left scrolling.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭
    edited February 4

    @MedFehmi yes, sure, set IsCycling = false
    that's all

  • MedFehmiMedFehmi Member ✭✭
    edited February 5

    @AndreiMisiukevich_ said:
    @MedFehmi yes, sure, set IsCycling = false
    that's all

    Hey, I tried to set it from both sides (XAML and C#) when I scroll left/right an NullReferenceException is being thrown.
    I tried it even on your project sample and the same happened. Only when set to false (IsCycling = true doesn't serve the purpose but it doesn't throw an exception).

    I tried this even :
    CoverFlowView cvfl = this.FindByName("cv");
    cvfl.IsCyclical = false;

    StackTrace:

    System.NullReferenceException: Object reference not set to an instance of an object
    at PanCardView.Processors.BaseCoverFlowBackViewProcessor.ProceedPositionChanged (System.Double value, Xamarin.Forms.View checkView, System.Collections.Generic.IEnumerable1[T] views) [0x0001f] in <e0dc0d98bde94bb585ceeed2c6308e39>:0 at PanCardView.Processors.BaseCoverFlowBackViewProcessor.HandlePanChanged (System.Collections.Generic.IEnumerable1[T] views, PanCardView.CardsView cardsView, System.Double xPos, PanCardView.Enums.AnimationDirection animationDirection, System.Collections.Generic.IEnumerable`1[T] inactiveViews) [0x00072] in :0
    at PanCardView.CardsView.OnTouchChanged (System.Double diff) [0x000a3] in :0
    at PanCardView.CardsView.OnPanUpdated (Xamarin.Forms.PanUpdatedEventArgs e) [0x0003d] in :0
    at PanCardView.CardsView.OnPanUpdated (System.Object sender, Xamarin.Forms.PanUpdatedEventArgs e) [0x00000] in :0
    at Xamarin.Forms.PanGestureRecognizer.SendPan (Xamarin.Forms.Element sender, System.Double totalX, System.Double totalY, System.Int32 gestureId) [0x00000] in D : \a\1\s\Xamarin.Forms.Core\PanGestureRecognizer.cs:20
    at Xamarin.Forms.Platform.iOS.EventTracker+<>c__DisplayClass15_0.b__2 (UIKit.UIPanGestureRecognizer r) [0x0012b] in <7218c7c87f004ed1b7043c0af66038c6>:0
    at UIKit.UIPanGestureRecognizer+Callback.Activated (UIKit.UIPanGestureRecognizer sender) [0x00000] in /Library/Frameworks/Xamarin.iOS.framework/Versions/12.2.1.12/src/Xamarin.iOS/UIKit/UIGestureRecognizer.cs:229
    at at (wrapper managed-to-native) UIKit.UIApplication.UIApplicationMain(int,string[],intptr,intptr)
    at UIKit.UIApplication.Main (System.String[] args, System.IntPtr principal, System.IntPtr delegate) [0x00005] in /Library/Frameworks/Xamarin.iOS.framework/Versions/12.2.1.12/src/Xamarin.iOS/UIKit/UIApplication.cs:79
    at UIKit.UIApplication.Main (System.String[] args, System.String principalClassName, System.String delegateClassName) [0x0002c] in /Library/Frameworks/Xamarin.iOS.framework/Versions/12.2.1.12/src/Xamarin.iOS/UIKit/UIApplication.cs:63
    at MyApp.iOS.Application.Main (System.String[] args) [0x00001] in /Users/mohamedfehmi/Development/MyApp/MyApp/iOS/Main.cs:17

  • MedFehmiMedFehmi Member ✭✭

    Hey @AndreiMisiukevich_ Thanks a lot you've been so helpful, one more thing, in order to improve the user experience when I integrated the cards in a MasterDetailPage which is the root page of my app, then when I swipe left to right on the card itself the menu drawer page is opened instead of swiping, so I would say the swipe to left or to right in the card itself is not enabled in this case.

  • MedFehmiMedFehmi Member ✭✭

    @TaylorD I tried this :
    var mainPage = (Application.Current.MainPage as NavigationPage).CurrentPage;
    (mainPage as MasterDetailPage).IsGestureEnabled = false;
    the on Disappearing set it back to true.
    it worked on Android only, iOS is keeping the same unwanted behaviour.

  • TaylorDTaylorD USMember ✭✭✭

    Hmm not sure. I have been using that property in my application on both iOS and Android since XF version: 2.3.4.270 and it has worked properly. I am currently running version the latest 3.4 version.
    Make sure the iOS project built correctly and that the latest version is deployed to the device.

  • MedFehmiMedFehmi Member ✭✭

    @AndreiMisiukevich_ I have Xamarin.Forms version 3.4.0.1029999 and CardsView version 2.0.2, the iOS version works really fine and as expected but the android cards have no Elevation/Shadow, I tried to change the stack layout of each card to a frame layout then I couldn't control the PositionChiftValue anymore (it is like set to 0 and the cards became more close to each other until the middle card width is reduced from left and right by the other cards) .

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭

    @MedFehmi said:
    @AndreiMisiukevich_ I have Xamarin.Forms version 3.4.0.1029999 and CardsView version 2.0.2, the iOS version works really fine and as expected but the android cards have no Elevation/Shadow, I tried to change the stack layout of each card to a frame layout then I couldn't control the PositionChiftValue anymore (it is like set to 0 and the cards became more close to each other until the middle card width is reduced from left and right by the other cards) .

    sorry
    need sample

  • MedFehmiMedFehmi Member ✭✭

    Hey sorry, this is a screen shot (Tablet mode but the same on a android phone)

            <cards:CoverFlowView x:Name="cv" Margin="0,11,0,0" Grid.Row="0" SelectedItem="0" PositionShiftValue="45" IsCyclical="false">
                                <cards:CoverFlowView.ItemsSource>
                                    <x:Array Type="{x:Type ContentView}">
                                        <ContentView>
                                            <StackLayout x:Name="leftCardStack">
    
                                                </StackLayout>
                                            </ContentView>
    
                                            <ContentView>
                                                <StackLayout x:Name="middleCardStack">
    
                                                </StackLayout>
                                            </ContentView>
    
                                            <ContentView>
                                                <StackLayout x:Name="rightCardStack">
    
                                                </StackLayout>
                                            </ContentView>
                                        </x:Array>
                                    </cards:CoverFlowView.ItemsSource>
                                    <controls:IndicatorsControl ToFadeDuration="1500" SelectedIndicatorStyle="{StaticResource ActiveIndicator}" UnselectedIndicatorStyle="{StaticResource InactiveIndicator}" />
                                </cards:CoverFlowView>
    
  • MedFehmiMedFehmi Member ✭✭

    These are the different three cards :

    <StackLayout x:Name="leftCardStack">
                                                <Grid RowSpacing="0" x:Name="resultBox1">
                                                    <Grid.RowDefinitions>
                                                        <RowDefinition Height="435" />
                                                    </Grid.RowDefinitions>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="*" />
                                                    </Grid.ColumnDefinitions>
                                                    <Button Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="White" BorderWidth="0" BorderRadius="6" HorizontalOptions="Center" Margin="0,8,0,0">
                                                        <Button.Effects>
                                                            <local:ShadowEffect Radius="0">
                                                                <local:ShadowEffect.Color>
                                                                    <OnPlatform x:TypeArguments="Color" iOS="{x:Static pages:UIConfig.DarkGrey}" Android="{x:Static pages:UIConfig.Black}" />
                                                                </local:ShadowEffect.Color>
                                                            </local:ShadowEffect>
                                                        </Button.Effects>
                                                    </Button>
                                                    <StackLayout Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="White" HorizontalOptions="Center" Margin="3,11,3,3">
                                                        <Grid Margin="13,13,16,13" HeightRequest="440">
                                                            <Grid.RowDefinitions>
                                                                <RowDefinition Height="22" />
                                                                <RowDefinition Height="40" />
                                                                <RowDefinition Height="28" />
                                                                <RowDefinition Height="14" />
                                                                <RowDefinition Height="*" />
                                                                <RowDefinition Height="32" />
                                                                <RowDefinition Height="20" />
                                                            </Grid.RowDefinitions>
                                                            <Grid.ColumnDefinitions>
                                                                <ColumnDefinition Width="*" />
                                                                <ColumnDefinition Width="*" />
                                                            </Grid.ColumnDefinitions>
                                                            <Image Source="GreenStar1" IsVisible="{Binding OneStarIconSourceIsVisible}" Grid.Row="0" Grid.ColumnSpan="2" HorizontalOptions="Center" Aspect="AspectFill" />
                                                            <Label Text="{Binding OneStarTitle}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="25" Grid.Row="1" Grid.ColumnSpan="2" HorizontalOptions="Center" Margin="-16,6,-19,0" FontFamily="HelveticaNeue-Light" />
                                                            <Label x:Name="OneStarMC" Text="{Binding OneStarMonContribution}" TextColor="{x:Static pages:UIConfig.Orange}" VerticalTextAlignment="Center" FontSize="{Binding FontResizer}" Grid.Row="2" Grid.Column="0" HorizontalOptions="Start" FontFamily="HelveticaNeue-Regular">
                                                              <Label.Margin>
                                                                    <OnPlatform x:TypeArguments="Thickness">
                                                                        <OnPlatform.Platforms>
                                                                            <On Platform="Android" Value="0,0,0,0"/>
                                                                        </OnPlatform.Platforms>
                                                                    </OnPlatform>
                                                              </Label.Margin>
                                                            </Label>
                                                            <Label Text="zahlen Sie monatlich" TextColor="{x:Static pages:UIConfig.Orange}" FontSize="15" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" Margin="0,-4,0,-16" FontFamily="HelveticaNeue-Light" />
    
    
                                  <Label x:Name="OneStarQuote" Text="{Binding OneStarQuote}" TextColor="{x:Static pages:UIConfig.Green}" Grid.Row="2" Grid.Column="1" FontSize="{Binding FontResizer}" HorizontalOptions="End" FontFamily="HelveticaNeue-Regular">
                                                                <Label.Margin>
                                                                        <OnPlatform x:TypeArguments="Thickness">
                                                                            <OnPlatform.Platforms>
                                                                                <On Platform="Android" Value="0,0,0,0"/>
                                                                            </OnPlatform.Platforms>
                                                                        </OnPlatform>
                                                                  </Label.Margin>
                                                                </Label>
                                                                <Label Text="Förderquote" TextColor="{x:Static pages:UIConfig.Green}" Grid.Row="3" Grid.Column="1" FontSize="15" HorizontalOptions="End" Margin="0,-5,0,0" FontFamily="HelveticaNeue-Light" />
                                                                <local:PlotParentView Model="{Binding OneStarChartModel}" BackgroundColor="White" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,-3,0,-5" />
                                                                <Label x:Name="OneStarMP" Text="{Binding OneStarMonPayin}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="{Binding FontResizer}" Grid.Row="5" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                                                <Label Text="Sparbeitrag pro Monat" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="15" Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" FontFamily="HelveticaNeue-Light" />
                                                                <Label x:Name="OneStarPP" Text="{Binding OneStarPensionPayout}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="{Binding FontResizer}" Grid.Row="5" Grid.Column="1" HorizontalOptions="End" VerticalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                                                <Label Text="Rente pro Monat" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="15" Grid.Row="6" Grid.Column="1" HorizontalOptions="End" FontFamily="HelveticaNeue-Light" />
                                                            </Grid>
                                                        </StackLayout>
                                                        <Button Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="Transparent" Clicked="OneStarClick">
                                                        </Button>
                                                    </Grid>
                                                </StackLayout>
    
    
    <StackLayout x:Name="middleCardStack">
                                                    <StackLayout.Margin>
                                                        <OnPlatform x:TypeArguments="Thickness">
                                                            <OnPlatform.Platforms>
                                                                <On Platform="Android" Value="30,0,30,0"/>
                                                            </OnPlatform.Platforms>
                                                        </OnPlatform>
                                                    </StackLayout.Margin>
                                                    <Grid RowSpacing="1" x:Name="resultBox2">
                                                        <Grid.RowDefinitions>
                                                            <RowDefinition Height="435" />
                                                        </Grid.RowDefinitions>
                                                        <Grid.ColumnDefinitions>
                                                            <ColumnDefinition Width="*" />
                                                        </Grid.ColumnDefinitions>
                                                        <Button Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="White" BorderWidth="0" BorderRadius="6" HorizontalOptions="Center" Margin="0,8,0,0">
                                                            <Button.Effects>
                                                                <local:ShadowEffect Radius="0">
                                                                    <local:ShadowEffect.Color>
                                                                        <OnPlatform x:TypeArguments="Color" iOS="{x:Static pages:UIConfig.DarkGrey}" Android="{x:Static pages:UIConfig.Black}" />
                                                                    </local:ShadowEffect.Color>
                                                                </local:ShadowEffect>
                                                            </Button.Effects>
                                                        </Button>
                                                        <StackLayout Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="White" HorizontalOptions="Center" Margin="3,11,3,3">
                                                            <Grid Margin="13,13,16,13" HeightRequest="421">
                                                                <Grid.RowDefinitions>
                                                                    <RowDefinition Height="22" />
                                                                    <RowDefinition Height="40" />
                                                                    <RowDefinition Height="28" />
                                                                    <RowDefinition Height="18" />
                                                                    <RowDefinition Height="*" />
                                                                    <RowDefinition Height="32" />
                                                                    <RowDefinition Height="20" />
                                                                </Grid.RowDefinitions>
                                                                <Grid.ColumnDefinitions>
                                                                    <ColumnDefinition Width="*" />
                                                                    <ColumnDefinition Width="*" />
                                                                </Grid.ColumnDefinitions>
                                                                <Image Source="GreenStars3" IsVisible="{Binding ThreeStarIconSourceIsVisible}" Grid.Row="0" Grid.ColumnSpan="2" HorizontalOptions="Center" Aspect="AspectFill" />
                                                                <Label Text="{Binding ThreeStarTitle}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="25" Grid.Row="1" Grid.ColumnSpan="2" HorizontalOptions="Center" Margin="-16,6,-19,0" FontFamily="HelveticaNeue-Light" />
                                                                <Label Text="{Binding ThreeStarMonContribution}" TextColor="{x:Static pages:UIConfig.Orange}" FontSize="{Binding FontResizer}" Grid.Row="2" Grid.Column="0" HorizontalOptions="Start" FontFamily="HelveticaNeue-Regular" />
                                                                <Label Text="zahlen Sie monatlich" TextColor="{x:Static pages:UIConfig.Orange}" FontSize="15" Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" Margin="0,-5,0,-16" FontFamily="HelveticaNeue-Light" />
                                                                <Label Text="{Binding ThreeStarQuote}" TextColor="{x:Static pages:UIConfig.Green}" Grid.Row="2" Grid.Column="1" FontSize="{Binding FontResizer}" HorizontalOptions="End" FontFamily="HelveticaNeue-Regular" />
                                                                <Label Text="Förderquote" TextColor="{x:Static pages:UIConfig.Green}" Grid.Row="3" Grid.Column="1" FontSize="15" HorizontalOptions="End" Margin="0,-5,0,0" FontFamily="HelveticaNeue-Light" />
                                                                <!-- <oxy:PlotView Model="{Binding BavChartModel}" BackgroundColor="White" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,-3,0,-5">
                                                    </oxy:PlotView>-->
                                                                <local:PlotParentView Model="{Binding ThreeStarChartModel}" BackgroundColor="White" Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="2" Margin="0,-3,0,-5" />
                                                                <Label Text="{Binding ThreeStarMonPayin}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="{Binding FontResizer}" Grid.Row="5" Grid.Column="0" HorizontalOptions="Start" VerticalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                                                <Label Text="Sparbeitrag pro Monat" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="15" Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2" HorizontalOptions="StartAndExpand" FontFamily="HelveticaNeue-Light" />
                                                                <Label Text="{Binding ThreeStarPensionPayout}" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="{Binding FontResizer}" Grid.Row="5" Grid.Column="1" HorizontalOptions="End" VerticalOptions="End" Margin="0,6,0,0" FontFamily="HelveticaNeue-Regular" />
                                                                <Label Text="Rente pro Monat" TextColor="{x:Static pages:UIConfig.DarkGrey}" FontSize="15" Grid.Row="6" Grid.Column="1" HorizontalOptions="End" FontFamily="HelveticaNeue-Light" />
                                                            </Grid>
                                                        </StackLayout>
                                                        <Button Grid.Row="0" Grid.Column="0" WidthRequest="300" BackgroundColor="Transparent" Clicked="ThreeStarClick">
                                                        </Button>
                                                    </Grid>
                                                </StackLayout>
    
  • MedFehmiMedFehmi Member ✭✭

    @AndreiMisiukevich_ can you please help me in this one and do you know how to adapt your solution to a tablet device. For me it works by default on a smart phone (considering both platforms android/iOS) but not for the tablet it looks like the screen shot.
    So basically my issue is the android version doesn't seem ok and the tablet mode doesn't neither. Thanks

Sign In or Register to comment.