Forum Xamarin Xamarin.Forms

Xamarin.Forms CardsView nuget package

2

Posts

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    Arrow images are updated

  • BikashGhosh.3220BikashGhosh.3220 USUniversity ✭✭

    Hi Andrei, ContentPage ControlTemplate not working as expected when I have Carousel in it. Any idea..

  • DanielBasDanielBas Member

    carousel view not shown it shows clear white page. i used to check with your sample code like this:-

    <cards:CarouselView.ItemsSource>








    ????????????????

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @BikashGhosh.3220 said:
    Hi Andrei, ContentPage ControlTemplate not working as expected when I have Carousel in it. Any idea..

    create small sample please and then i help you)

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @DanielBas can you provide sample ?
    Because it works fine for me. Perhaps it's related to XF version

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    v.2.2.2 is on nuget
    bugfixes https://github.com/AndreiMisiukevich/CardView

  • jayrwafujayrwafu Member ✭✭
    edited October 2019

    Hi AndreiMisiukevich_
    Thank you for your PanCardView control, I'm using it right now. I'm new to xamarin, I don't how to implement swipe next image. Cardview is it not working on my project. Do you have sample? My objective to view images, just like shopping app, it show full screen image and swipe left to show next image.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @jayrwafu said:
    Hi AndreiMisiukevich_
    Thank you for your PanCardView control, I'm using it right now. I'm new to xamarin, I don't how to implement swipe next image. Cardview is it not working on my project. Do you have sample? My objective to view images, just like shopping app, it show full screen image and swipe left to show next image.

    Hi) Yeah, visit my github. There are several samples, how to implement that

    https://github.com/AndreiMisiukevich/CardView

  • jayrwafujayrwafu Member ✭✭
    edited October 2019

    This is xaml syntax, this won't swipe. What I'm lacking? Can any help me? Do I need swipe gesture? Here sample

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @jayrwafu pls use formatting. I see nothing :(

  • jayrwafujayrwafu Member ✭✭

    At AndreiMisiukevich_
    `

    <cards:CardsView         ItemsSource="{Binding Items}"        VerticalOptions="FillAndExpand"        IsCyclical="True"        IsClippedToBounds="True"        SelectedIndex="{Binding CurrentIndex}">        <cards:CardsView.ItemTemplate >            <DataTemplate>                <ContentView>                    <Frame                         VerticalOptions="Center"                        HorizontalOptions="Center"                         HeightRequest="400"                        WidthRequest="300"                        Padding="0"                         HasShadow="false"                        IsClippedToBounds="true"                        CornerRadius="10"                        BackgroundColor="{Binding Color}">                         <ffimage:CachedImage Aspect="AspectFill" Source="{Binding Source}"/>                    </Frame>                </ContentView>            </DataTemplate>        </cards:CardsView.ItemTemplate>    <controls:IndicatorsControl  />        <controls:LeftArrowControl />  <controls:RightArrowControl />
    </cards:CardsView>`
    
  • jayrwafujayrwafu Member ✭✭
    edited October 2019

    I want to achieve this (screenshot from shopping app) : swipe control and zoom in zoom out

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @jayrwafu your xaml looks fine. Probably there is only one item in your collection or any another mistake.
    you can create small sample and share with me (on github e.g.) and i will help you

  • jayrwafujayrwafu Member ✭✭

    I've created new project, add pancardview project and pancardview.driod.

    I had an error :
    System.MissingMethodException: 'Method not found: bool PanCardView.CardsView.get_ShouldThrottlePanInteraction()'

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @jayrwafu have you added Preserve call?

  • jayrwafujayrwafu Member ✭✭

    Hi AndreiMisiukevich_ , is this correct?
    https://github.com/jayrwafu1115/GitMe

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭
  • jayrwafujayrwafu Member ✭✭

    Thank you for your unconditional support. Still doesn't swipe. I got error. But when I remove CardsViewRenderer.Preserve(); I have no error, but I able to use Arrow Control only to view next page. Maybe the version is conflict.. I dont know.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    https://github.com/jayrwafu1115/GitMe update sample with the latest code I will check

  • jayrwafujayrwafu Member ✭✭

    I've updated the source code, I've reference only the pancardview.driod.dll

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @jayrwafu I've checked your sample. You installed a lot of strange stuff

    My package is CardsView

    Remove PanCardView nuget package, and remove PanCardView.Droid.dll from the android project
    then install the latest version of CardsView

  • kavitap810kavitap810 Member ✭✭
    edited May 18

    Hello Andrei,
    I am using your package's latest version (2.6.1) for the carousel view. I am able to integrate my content view to your package with some static content. However, I am stuck at the data binding part because my content view is actually a dynamic form on which the data gets populated based on the JSON response from API. So, how can I create and bind the dynamic model to ItemSource Property of the carousel view?
    Looking forward to your response. Thanks in advance.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @kavitap810 said:
    Hello Andrei,
    I am using your package's latest version (2.6.1) for the carousel view. I am able to integrate my content view to your package with some static content. However, I am stuck at the data binding part because my content view is actually a dynamic form on which the data gets populated based on the JSON response from API. So, how can I create and bind the dynamic model to ItemSource Property of the carousel view?
    Looking forward to your response. Thanks in advance.

    Not sure I got you correctly. But you can use DataTemplateSelector if you have several types of cards.

  • kavitap810kavitap810 Member ✭✭

    Hello Andrei,
    Thanks for your response.
    I don't have fixed Data templates to bind to the View. Actually I have to show form pages in carousel vie and these pages will be generated based on API JSON response. For e.g. if API response is having 3 entries, 2 radio buttons, 3 picker view, then the form will be having these components in same sequence as it is present in API response.
    The API response for all form pages in carousel view will be same , but it will come at runtime.
    I hope I am more clear with my problem statement now.
    Looking forward to your response.
    Thanks in advance.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @kavitap810 said:
    Hello Andrei,
    Thanks for your response.
    I don't have fixed Data templates to bind to the View. Actually I have to show form pages in carousel vie and these pages will be generated based on API JSON response. For e.g. if API response is having 3 entries, 2 radio buttons, 3 picker view, then the form will be having these components in same sequence as it is present in API response.
    The API response for all form pages in carousel view will be same , but it will come at runtime.
    I hope I am more clear with my problem statement now.
    Looking forward to your response.
    Thanks in advance.

    Do you pull JSON with all cards on the page together?

    You can build views for every card and put the list of views to ItemsSource directly (without using ItemTemplate property at all)

  • kavitap810kavitap810 Member ✭✭

    @AndreiMisiukevich_ said:

    @kavitap810 said:
    Hello Andrei,
    Thanks for your response.
    I don't have fixed Data templates to bind to the View. Actually I have to show form pages in carousel vie and these pages will be generated based on API JSON response. For e.g. if API response is having 3 entries, 2 radio buttons, 3 picker view, then the form will be having these components in same sequence as it is present in API response.
    The API response for all form pages in carousel view will be same , but it will come at runtime.
    I hope I am more clear with my problem statement now.
    Looking forward to your response.
    Thanks in advance.

    Do you pull JSON with all cards on the page together?

    You can build views for every card and put the list of views to ItemsSource directly (without using ItemTemplate property at all)

    Oh, that would be helpful. I am not aware of binding multiple content views in CarouselView without using ItemTemplate and ItemSource Property, can you please give some code snippet for this.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @kavitap810 said:

    @AndreiMisiukevich_ said:

    @kavitap810 said:
    Hello Andrei,
    Thanks for your response.
    I don't have fixed Data templates to bind to the View. Actually I have to show form pages in carousel vie and these pages will be generated based on API JSON response. For e.g. if API response is having 3 entries, 2 radio buttons, 3 picker view, then the form will be having these components in same sequence as it is present in API response.
    The API response for all form pages in carousel view will be same , but it will come at runtime.
    I hope I am more clear with my problem statement now.
    Looking forward to your response.
    Thanks in advance.

    Do you pull JSON with all cards on the page together?

    You can build views for every card and put the list of views to ItemsSource directly (without using ItemTemplate property at all)

    Oh, that would be helpful. I am not aware of binding multiple content views in CarouselView without using ItemTemplate and ItemSource Property, can you please give some code snippet for this.

    https://github.com/AndreiMisiukevich/CardView/blob/master/PanCardViewSample/PanCardViewSample/Views/CarouselSampleViewNoTemplate.cs#L13-L22

  • kavitap810kavitap810 Member ✭✭
    edited May 21

    Hello Andrei,
    Thanks for your help until now.
    I was able to bind dynamic view using ItemTemplate only. I created the ObservableCollection of my content view binding ViewModel and bind ItemSource to it.
    However, I am facing few issues :
    1. I have one vertical scroll view that holds all the data in my content view(binded in ItemTemplate). So, when I scroll page vertically done, sometimes it does get swipe.
    2. The last child element of my content view(that is binded in ItemTemplate) is in a horizontal scroll view. If I scroll horizontally that element of form, the page gets swiped.
    3. Also, when my content view ( item template) data is updated by the user. How can I refresh data of the whole carousel view when the content of any one content view is updated?
    4. Suppose my carousel view is having 3 pages (content view 1, 2, 3). When I am navigating from my carousel view 3 to any other page(suppose Page XYZ), on navigating back from Page XYZ, the carousel view gets reset to the content view 1 (starting page of carousel view).

    Do you have any input on how can I handle the above cases?

    Code sample
    1. Content View

    <ContentView.Content>
    
        <!-- Vertical scrollview start  -->
        <ScrollView Orientation="Vertical">
            <StackLayout Padding="15" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="0,10,0,10" IsClippedToBounds="True">
                <StackLayout x:Name="txtLeakNumber" Orientation="Vertical" VerticalOptions="Start"  
                             HorizontalOptions="FillAndExpand"
                             Padding="0" FlexLayout.AlignSelf="Stretch" IsVisible="{Binding LeakNumberVisiblity}" Margin="0,10,0,0">
                    <Label  HorizontalOptions="Start" >
                        <Label.FormattedText>
                            <FormattedString>
                                <Span  Text="{Binding LeakNumberLabel}" />
                                <Span  Text=" *" TextColor="Red" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Entry  HorizontalOptions="FillAndExpand" Text="{Binding LeakNumberText}"/>
                </StackLayout>
    
                <!-- Some more Fields added in this area-->
    
                <Frame x:Name="extraFields" HasShadow="False" BorderColor="Transparent" BackgroundColor="Transparent" Margin="0" Padding="0"
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="Fill"
                       FlexLayout.AlignSelf="Stretch" IsVisible="{Binding ExtraFieldsVisible}"
                       Content="{Binding ExtraFieldItems}" />
    
                <!-- Horizontal scrollview start-->
                <ScrollView Orientation="Horizontal" HorizontalOptions="Fill" IsVisible="{Binding AttachedFilesVisiblity}">
                    <Frame x:Name="attachmentPhotos"   BackgroundColor="Transparent" HasShadow="False" BorderColor="Transparent"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="Fill"
                             Padding="0" Margin="0"
                             FlexLayout.AlignSelf="Stretch" IsVisible="{Binding AttachedFilesVisiblity}" Content="{Binding LeakAttachments}">
                    </Frame>
                </ScrollView>
                <!-- Horizontal scrollview end-->
    
                <Button x:Name="btnAttach"
                        Text="Upload"
                        HorizontalOptions="StartAndExpand"
                        VerticalOptions="Fill"
                        BackgroundColor="Transparent"
                        BorderWidth="0"
                        IsVisible="{Binding AttachmentVisiblity}"
                        Command="{Binding UploadAttachmentCommand}">
                    <Button.ImageSource>
                        <OnPlatform x:TypeArguments="FileImageSource"
                                    iOS="attachment"
                                    Android="attachment"
                                    WinPhone="Assets/attachment.png" />
                    </Button.ImageSource>
                </Button>
                <Button
                        Text="Submit"
                        BackgroundColor="#007AC3"
                        VerticalOptions="EndAndExpand"
                        HeightRequest="40"
                        WidthRequest="40"
                        CornerRadius="20"
                        TextColor="White"
                    Command="{Binding SubmitLeakData}"/>
            </StackLayout>
        </ScrollView>
        <!-- Vertical scrollview end-->
    </ContentView.Content>
    
  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @kavitap810 said:
    Hello Andrei,
    Thanks for your help until now.
    I was able to bind dynamic view using ItemTemplate only. I created the ObservableCollection of my content view binding ViewModel and bind ItemSource to it.
    However, I am facing few issues :
    1. I have one vertical scroll view that holds all the data in my content view(binded in ItemTemplate). So, when I scroll page vertically done, sometimes it does get swipe.
    2. The last child element of my content view(that is binded in ItemTemplate) is in a horizontal scroll view. If I scroll horizontally that element of form, the page gets swiped.
    3. Also, when my content view ( item template) data is updated by the user. How can I refresh data of the whole carousel view when the content of any one content view is updated?
    4. Suppose my carousel view is having 3 pages (content view 1, 2, 3). When I am navigating from my carousel view 3 to any other page(suppose Page XYZ), on navigating back from Page XYZ, the carousel view gets reset to the content view 1 (starting page of carousel view).

    Do you have any input on how can I handle the above cases?

    Code sample
    1. Content View

    <ContentView.Content>
    
        <!-- Vertical scrollview start  -->
        <ScrollView Orientation="Vertical">
            <StackLayout Padding="15" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="0,10,0,10" IsClippedToBounds="True">
                <StackLayout x:Name="txtLeakNumber" Orientation="Vertical" VerticalOptions="Start"  
                             HorizontalOptions="FillAndExpand"
                             Padding="0" FlexLayout.AlignSelf="Stretch" IsVisible="{Binding LeakNumberVisiblity}" Margin="0,10,0,0">
                    <Label  HorizontalOptions="Start" >
                        <Label.FormattedText>
                            <FormattedString>
                                <Span  Text="{Binding LeakNumberLabel}" />
                                <Span  Text=" *" TextColor="Red" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Entry  HorizontalOptions="FillAndExpand" Text="{Binding LeakNumberText}"/>
                </StackLayout>
    
                <!-- Some more Fields added in this area-->
    
                <Frame x:Name="extraFields" HasShadow="False" BorderColor="Transparent" BackgroundColor="Transparent" Margin="0" Padding="0"
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="Fill"
                       FlexLayout.AlignSelf="Stretch" IsVisible="{Binding ExtraFieldsVisible}"
                       Content="{Binding ExtraFieldItems}" />
    
                <!-- Horizontal scrollview start-->
                <ScrollView Orientation="Horizontal" HorizontalOptions="Fill" IsVisible="{Binding AttachedFilesVisiblity}">
                    <Frame x:Name="attachmentPhotos"   BackgroundColor="Transparent" HasShadow="False" BorderColor="Transparent"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="Fill"
                             Padding="0" Margin="0"
                             FlexLayout.AlignSelf="Stretch" IsVisible="{Binding AttachedFilesVisiblity}" Content="{Binding LeakAttachments}">
                    </Frame>
                </ScrollView>
                <!-- Horizontal scrollview end-->
    
                <Button x:Name="btnAttach"
                        Text="Upload"
                        HorizontalOptions="StartAndExpand"
                        VerticalOptions="Fill"
                        BackgroundColor="Transparent"
                        BorderWidth="0"
                        IsVisible="{Binding AttachmentVisiblity}"
                        Command="{Binding UploadAttachmentCommand}">
                    <Button.ImageSource>
                        <OnPlatform x:TypeArguments="FileImageSource"
                                    iOS="attachment"
                                    Android="attachment"
                                    WinPhone="Assets/attachment.png" />
                    </Button.ImageSource>
                </Button>
                <Button
                        Text="Submit"
                        BackgroundColor="#007AC3"
                        VerticalOptions="EndAndExpand"
                        HeightRequest="40"
                        WidthRequest="40"
                        CornerRadius="20"
                        TextColor="White"
                    Command="{Binding SubmitLeakData}"/>
            </StackLayout>
        </ScrollView>
        <!-- Vertical scrollview end-->
    </ContentView.Content>
    
    • Set IsVerticalSwipeEnabled = "false"
    • CarouselView cannot work properly with a Horizontal ScrollView (gesture recognition conflict), you may set IsPanInteractionEnabled = false and navigate via swipes (like swipe gesture)
    • No idea, you can raise some kind of event and update the carousel
    • It should work, perhaps you have a bug on your side. Or just bind your VM property to "SelectedIndex" (Use SelectedIndex for restoring desired state)
  • kavitap810kavitap810 Member ✭✭
    edited May 21

    @AndreiMisiukevich_ said:

    @kavitap810 said:
    Hello Andrei,
    Thanks for your help until now.
    I was able to bind dynamic view using ItemTemplate only. I created the ObservableCollection of my content view binding ViewModel and bind ItemSource to it.
    However, I am facing few issues :
    1. I have one vertical scroll view that holds all the data in my content view(binded in ItemTemplate). So, when I scroll page vertically done, sometimes it does get swipe.
    2. The last child element of my content view(that is binded in ItemTemplate) is in a horizontal scroll view. If I scroll horizontally that element of form, the page gets swiped.
    3. Also, when my content view ( item template) data is updated by the user. How can I refresh data of the whole carousel view when the content of any one content view is updated?
    4. Suppose my carousel view is having 3 pages (content view 1, 2, 3). When I am navigating from my carousel view 3 to any other page(suppose Page XYZ), on navigating back from Page XYZ, the carousel view gets reset to the content view 1 (starting page of carousel view).

    Do you have any input on how can I handle the above cases?

    Code sample
    1. Content View

    <ContentView.Content>
    
        
        <ScrollView Orientation="Vertical">
            <StackLayout Padding="15" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="0,10,0,10" IsClippedToBounds="True">
                <StackLayout x:Name="txtLeakNumber" Orientation="Vertical" VerticalOptions="Start"  
                             HorizontalOptions="FillAndExpand"
                             Padding="0" FlexLayout.AlignSelf="Stretch" IsVisible="{Binding LeakNumberVisiblity}" Margin="0,10,0,0">
                    <Label  HorizontalOptions="Start" >
                        <Label.FormattedText>
                            <FormattedString>
                                <Span  Text="{Binding LeakNumberLabel}" />
                                <Span  Text=" *" TextColor="Red" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Entry  HorizontalOptions="FillAndExpand" Text="{Binding LeakNumberText}"/>
                </StackLayout>
    
                
    
                <Frame x:Name="extraFields" HasShadow="False" BorderColor="Transparent" BackgroundColor="Transparent" Margin="0" Padding="0"
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="Fill"
                       FlexLayout.AlignSelf="Stretch" IsVisible="{Binding ExtraFieldsVisible}"
                       Content="{Binding ExtraFieldItems}" />
    
                
                <ScrollView Orientation="Horizontal" HorizontalOptions="Fill" IsVisible="{Binding AttachedFilesVisiblity}">
                    <Frame x:Name="attachmentPhotos"   BackgroundColor="Transparent" HasShadow="False" BorderColor="Transparent"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="Fill"
                             Padding="0" Margin="0"
                             FlexLayout.AlignSelf="Stretch" IsVisible="{Binding AttachedFilesVisiblity}" Content="{Binding LeakAttachments}">
                    </Frame>
                </ScrollView>
                
    
                <Button x:Name="btnAttach"
                        Text="Upload"
                        HorizontalOptions="StartAndExpand"
                        VerticalOptions="Fill"
                        BackgroundColor="Transparent"
                        BorderWidth="0"
                        IsVisible="{Binding AttachmentVisiblity}"
                        Command="{Binding UploadAttachmentCommand}">
                    <Button.ImageSource>
                        <OnPlatform x:TypeArguments="FileImageSource"
                                    iOS="attachment"
                                    Android="attachment"
                                    WinPhone="Assets/attachment.png" />
                    </Button.ImageSource>
                </Button>
                <Button
                        Text="Submit"
                        BackgroundColor="#007AC3"
                        VerticalOptions="EndAndExpand"
                        HeightRequest="40"
                        WidthRequest="40"
                        CornerRadius="20"
                        TextColor="White"
                    Command="{Binding SubmitLeakData}"/>
            </StackLayout>
        </ScrollView>
        
    </ContentView.Content>
    
    • Set IsVerticalSwipeEnabled = "false"
    • CarouselView cannot work properly with a Horizontal ScrollView (gesture recognition conflict), you may set IsPanInteractionEnabled = false and navigate via swipes (like swipe gesture)
    • No idea, you can raise some kind of event and update the carousel
    • It should work, perhaps you have a bug on your side. Or just bind your VM property to "SelectedIndex" (Use SelectedIndex for restoring desired state)

    Hello Andrei,
    Thanks for your response. It was really helpful.
    1. Setting Set IsVerticalSwipeEnabled = "false" resolved issue for vertical scroll view.
    2. Understood that it is because of gesture recognition conflict, but setting IsPanInteractionEnabled = false is not working. On IOS, it does giving swipe feature but on android, carousel pages are not getting swiped. Can you tell me how to handle it for Android.
    3. Okay, I will check this.
    4. Yes, I identified the bug in my code and resolved it.

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @kavitap810 just add arrows for android xD

  • kavitap810kavitap810 Member ✭✭
    edited June 3

    Hello @AndreiMisiukevich_
    Thanks for your help till now. Really appreciated.
    However, I observed a bit of weird behavior in the carousel view. I have done visibility binding for a few fields based on some business logic. Initially, their visibility is false, and if certain conditions are met, the visibility binding is set to true.
    So, at times after data loading when I perform left swipe of pages, these fields don't appear, but with the same data without reloading, if I perform the right swipe, these fields appear appropriately.
    Do you have any idea that what could be the cause of it?

    //Code



    <carouselview:CarouselView.ItemTemplate>



    </carouselview:CarouselView.ItemTemplate>

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    @kavitap810 said:
    Hello @AndreiMisiukevich_
    Thanks for your help till now. Really appreciated.
    However, I observed a bit of weird behavior in the carousel view. I have done visibility binding for a few fields based on some business logic. Initially, their visibility is false, and if certain conditions are met, the visibility binding is set to true.
    So, at times after data loading when I perform left swipe of pages, these fields don't appear, but with the same data without reloading, if I perform the right swipe, these fields appear appropriately.
    Do you have any idea that what could be the cause of it?

    //Code



    <carouselview:CarouselView.ItemTemplate>



    </carouselview:CarouselView.ItemTemplate>

    Hi) I don't see your code/xaml

  • kavitap810kavitap810 Member ✭✭

    @kavitap810 said:
    Hello Andrei,
    Thanks for your help until now.
    I was able to bind dynamic view using ItemTemplate only. I created the ObservableCollection of my content view binding ViewModel and bind ItemSource to it.
    However, I am facing few issues :
    1. I have one vertical scroll view that holds all the data in my content view(binded in ItemTemplate). So, when I scroll page vertically done, sometimes it does get swipe.
    2. The last child element of my content view(that is binded in ItemTemplate) is in a horizontal scroll view. If I scroll horizontally that element of form, the page gets swiped.
    3. Also, when my content view ( item template) data is updated by the user. How can I refresh data of the whole carousel view when the content of any one content view is updated?
    4. Suppose my carousel view is having 3 pages (content view 1, 2, 3). When I am navigating from my carousel view 3 to any other page(suppose Page XYZ), on navigating back from Page XYZ, the carousel view gets reset to the content view 1 (starting page of carousel view).

    Do you have any input on how can I handle the above cases?

    Code sample
    1. Content View

    <ContentView.Content>
    
        <!-- Vertical scrollview start  -->
        <ScrollView Orientation="Vertical">
            <StackLayout Padding="15" Orientation="Vertical" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Margin="0,10,0,10" IsClippedToBounds="True">
                <StackLayout x:Name="txtLeakNumber" Orientation="Vertical" VerticalOptions="Start"  
                             HorizontalOptions="FillAndExpand"
                             Padding="0" FlexLayout.AlignSelf="Stretch" IsVisible="{Binding LeakNumberVisiblity}" Margin="0,10,0,0">
                    <Label  HorizontalOptions="Start" >
                        <Label.FormattedText>
                            <FormattedString>
                                <Span  Text="{Binding LeakNumberLabel}" />
                                <Span  Text=" *" TextColor="Red" />
                            </FormattedString>
                        </Label.FormattedText>
                    </Label>
                    <Entry  HorizontalOptions="FillAndExpand" Text="{Binding LeakNumberText}"/>
                </StackLayout>
    
                <!-- Some more Fields added in this area-->
    
                <Frame x:Name="extraFields" HasShadow="False" BorderColor="Transparent" BackgroundColor="Transparent" Margin="0" Padding="0"
                       HorizontalOptions="FillAndExpand"
                       VerticalOptions="Fill"
                       FlexLayout.AlignSelf="Stretch" IsVisible="{Binding ExtraFieldsVisible}"
                       Content="{Binding ExtraFieldItems}" />
    
                <!-- Horizontal scrollview start-->
                <ScrollView Orientation="Horizontal" HorizontalOptions="Fill" IsVisible="{Binding AttachedFilesVisiblity}">
                    <Frame x:Name="attachmentPhotos"   BackgroundColor="Transparent" HasShadow="False" BorderColor="Transparent"
                             HorizontalOptions="FillAndExpand"
                             VerticalOptions="Fill"
                             Padding="0" Margin="0"
                             FlexLayout.AlignSelf="Stretch" IsVisible="{Binding AttachedFilesVisiblity}" Content="{Binding LeakAttachments}">
                    </Frame>
                </ScrollView>
                <!-- Horizontal scrollview end-->
    
                <Button x:Name="btnAttach"
                        Text="Upload"
                        HorizontalOptions="StartAndExpand"
                        VerticalOptions="Fill"
                        BackgroundColor="Transparent"
                        BorderWidth="0"
                        IsVisible="{Binding AttachmentVisiblity}"
                        Command="{Binding UploadAttachmentCommand}">
                    <Button.ImageSource>
                        <OnPlatform x:TypeArguments="FileImageSource"
                                    iOS="attachment"
                                    Android="attachment"
                                    WinPhone="Assets/attachment.png" />
                    </Button.ImageSource>
                </Button>
                <Button
                        Text="Submit"
                        BackgroundColor="#007AC3"
                        VerticalOptions="EndAndExpand"
                        HeightRequest="40"
                        WidthRequest="40"
                        CornerRadius="20"
                        TextColor="White"
                    Command="{Binding SubmitLeakData}"/>
            </StackLayout>
        </ScrollView>
        <!-- Vertical scrollview end-->
    </ContentView.Content>
    

    The carousel view's content view code is same as mentioned in this comment above. Here, as you can see visibility is assigned to button btnAttach.

    And my Carousel view code is

    <ContentPage.Resources>
        <ResourceDictionary>
            <Style x:Key="ActiveIndicator" TargetType="controls:CircleFrame">
                <Setter Property="BackgroundColor" Value="Black" />
                <Setter Property="BackgroundColor" Value="Black" />
            </Style>
            <Style x:Key="InactiveIndicator" TargetType="controls:CircleFrame">
                <Setter Property="BackgroundColor" Value="White" />
                <Setter Property="OutlineColor" Value="Gray" />
            </Style>
        </ResourceDictionary>
    </ContentPage.Resources>
    <StackLayout BackgroundColor="Transparent">
    
        <!-- OppositePanDirectionDisablingThreshold="1" IsPanInteractionEnabled ="False" -->
        <carouselview:CarouselView x:Name="carouselView" ItemsSource="{Binding LoggedLeaklist}" IsVerticalSwipeEnabled="False" 
                                   SelectedIndex="{Binding CurrentIndex}">
            <controls:IndicatorsControl ToFadeDuration="1500"
                SelectedIndicatorStyle="{StaticResource ActiveIndicator}"
                UnselectedIndicatorStyle="{StaticResource InactiveIndicator}"/>
            <carouselview:CarouselView.ItemTemplate>
                <DataTemplate>
                    <contentviews:LogLeakView />
                </DataTemplate>
            </carouselview:CarouselView.ItemTemplate>
        </carouselview:CarouselView>
        <!--<IndicatorView  IndicatorsShape="Circle"
                    IndicatorColor="White"
                    SelectedIndicatorColor="Black"
                    HorizontalOptions="Center"
                    Margin="0,0,0,40"/>-->
    </StackLayout>
    

  • AndreiMisiukevich_AndreiMisiukevich_ USMember ✭✭✭✭✭

    I think that's something with bindings. If you create a small sample with this issue, I will take a look at what's wrong.
    But I am sure that's something not related to CardsView, because cards view is just a layout that shows other views&layouts.

    Can you build a very small project and send it to me (or fork my repository and reproduce this bug there)

  • edyboyedyboy Member ✭✭✭

    You are a genius thank you

  • kavitap810kavitap810 Member ✭✭
    edited June 6

    @AndreiMisiukevich_ said:
    I think that's something with bindings. If you create a small sample with this issue, I will take a look at what's wrong.
    But I am sure that's something not related to CardsView because cards view is just a layout that shows other views&layouts.

    Can you build a very small project and send it to me (or fork my repository and reproduce this bug there)

    yes okay. I will try and fork your repository and reproduce this bug there but that may take time (PS: This binding issue on swiping is intermediate).

    Meanwhile, I am facing issue on UWP, with same code carousel pages are not getting swiped. It gives error - "Value does not fall within the expected range". Do you have any idea regarding the cause of it?

    I have not done any declaration for in UWP App.cs i.e. CardsViewRenderer.Preserve(); for this package. Is it required? As it's not present in your git sample and I am using latest version 2.6.1

Sign In or Register to comment.