Hi,

Your amazing control works fine in Xamarin.Forms, but in Maui it behaves differently, hopefully you can give me some advice.

I use CarouselView to scroll the list of emails, but only keep 3 emails at one point - currently visible and one on the left and one on the right. Once you swipe to last one I add new to the end and delete first one, exactly opposite when going back. But in Maui when I delete first email CarouselView jumps to newly added one instead of staying on middle one.

The flow of event is as this:

1. Navigate to page with CarouselView
2. First email is loaded
3. Event "ItemAppeared" is triggered and second email is loaded
4. Swipe to second email
5. Event "ItemAppeared" is triggered again and third email is loaded
6. Swipe to third email
7. Event "ItemAppeared" is triggered again and fourth email is loaded
8. First email then gets deleted from the email list source

In Xamarin after step 9 third email is displayed in the middle. On the left would be second email and on the right fourth email, but in Maui CollectionView moves to fourth email.

My XAML:

<cards:CarouselView 
            x:Name="Carousel"
            ItemsSource="{Binding Emails}"
            IsVerticalSwipeEnabled="False"
            IsCyclical="False"
            IsViewReusingEnabled="False"
            DesiredMaxChildrenCount="3"
            VerticalSwipeThresholdDistance="0"
            IsAutoNavigatingAnimationEnabled="False"
            ItemAppeared="ItemAppeared">

            <cards:CarouselView.ItemTemplate>
                <DataTemplate>
                    <ctrl:EmailView/>
                </DataTemplate>
            </cards:CarouselView.ItemTemplate>
        </cards:CarouselView >

Code which add emails:

public void LoadMore( object index ) 
    {
        _currentEmailId = Emails.ElementAt( (int)index ).emailId;

        var e = ListItemDetails.FromEmail( _emailSource.JsonEmail );
        RecentsLog.AddToLog( e );

        // last 
        if (Emails.Count-1 == (int)index)
        {
            if (!HasNextEmail()) return;
            _addingNext = true;

            if (_nextTask is { IsCompleted: false })
                _nextTask.Wait();

            // load next
            var idx = _emailIdList.IndexOf( _currentEmailId );
            _loadEmailId = _emailIdList.ElementAt( idx + 1 );
            _nextTask = ReloadSource();

            // remove first
            if (Emails.Count > 3)
                Emails.RemoveAt( 0 );
        }
        else if ((int)index == 0)
        {
            // if not first in email id's then add on left
            if (!HasPreviousEmail()) return;
            _addingNext = false;

            if (_nextTask != null && !_nextTask.IsCompleted)
                _nextTask.Wait();

            // load previous
            var idx = _emailIdList.IndexOf( _currentEmailId );
            _loadEmailId = _emailIdList.ElementAt( idx - 1 );
            _nextTask = ReloadSource();

            // remove last
            if (Emails.Count > 3) 
                Emails.RemoveAt( Emails.Count - 1 );
        }
    }

LoadMore is called in code behind:

    private async void ItemAppeared( PanCardView.CardsView view, PanCardView.EventArgs.ItemAppearedEventArgs args )
    {
        await Task.Delay( 100 );
        _viewModel.LoadMore( args.Index );
    }

Hello,

I'm using CardsView to create a slide of images and videos. I would like to bind the SlideShowDuration value to the itemsSource elements.

This is my model :

    public class MediaModel
    {
        public string Name { get; set; }
        public string MediaPath { get; set; }
        public string MediaType { get; set; }
        public string DisplayDuration { get; set; }
    }

This is my XAML :

        <cards:CarouselView x:Name="carouselView" ItemsSource="{Binding Medias}"
                      SlideShowDuration="5000"
                      ItemTemplate="{StaticResource MediaSelector}">
                        . . .
        </cards:CarouselView>

I want SlideShowDuration to the take DisplayDuration's value. I tried SlideShowDuration="{Binding DisplayDuration}" but it didn't work.

I would like some assistance if it's possible to apply this scenario or a workaround.

Thanks :)

Label inside CarouselView is not wrapping. Problem only exist in iOS.

Tried to change to Maui.Controls.CarouselView, no problem.

I would like to display syncfusion shimmer until load data in carousel view and change item template after but there is a crash when i change item template and change swipe to right item swipe to left and swipe again to right item.

"Unable to convert Microsoft.Maui.Handlers.ContentViewHandler to UIKit.UIView"

if i switch to use the maui carousel view it's work fine.

CardsView.Maui 0.0.4
I use .net 7
Maui
syncfusion 21.2.10

stack trace :

Microsoft.Maui.ElementHandlerExtensions.ToPlatform(IElementHandler elementHandler) Microsoft.Maui.ViewHandlerExtensions.PlatformArrangeHandler(IViewHandler viewHandler, Rect rect) Microsoft.Maui.Handlers.ViewHandler2[[Microsoft.Maui.IContentView, Microsoft.Maui, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null],[Microsoft.Maui.Platform.ContentView, Microsoft.Maui, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].PlatformArrange(Rect rect)
Microsoft.Maui.Controls.Compatibility.Platform.iOS.HandlerToRendererShim.OnBatchCommitted(Object sender, EventArg1 e) Microsoft.Maui.Controls.VisualElement.BatchCommit() PanCardView.Processors.CarouselProcessor.SetTranslationX(View view, Double value, CardsView cardsView, Boolean isFront, Nullable1 isVisible, Boolean isClean)
PanCardView.Processors.CarouselProcessor.Clean(CardsView cardsView, ProcessorItem[] items)
PanCardView.CardsView.CleanView(View view)
PanCardView.CardsView.RemoveChildren(IView[] views)
PanCardView.CardsView.<>c__DisplayClass332_0.b__0()
PanCardView.CardsView.InvokeOnMainThreadIfNeeded(Action action)
PanCardView.CardsView.RemoveRedundantChildren(Boolean isProcessingNow)
PanCardView.CardsView.CompleteInteraction(Boolean isProcessingNow, Boolean isNewItemSelected)
PanCardView.CardsView.OnTouchEnded()
System.Threading.Tasks.Task.<>c.b__128_0(Object state)
Foundation.NSAsyncSynchronizationContextDispatcher.Apply()
UIKit.UIApplication.UIApplicationMain(Int32 argc, String[] argv, IntPtr principalClassName, IntPtr delegateClassName)
UIKit.UIApplication.Main(String[] args, Type principalClass, Type delegateClass)

Hello, I have a net7 library project and I can't add the library...
I have downloaded the source code and I have modified this line:
<TargetFrameworks>net7.0;net7.0-android;net7.0-ios16.1< /TargetFrameworks>,
at this moment it has let me add its library to my library...
if possible, can you enable it in the next version?...
Thanks

I noticed the renderers currently used the shimmed renderers

Would it be possible to either

1. convert these to handlers
   or
2. use these for your base classes instead https://github.com/dotnet/maui/blob/main/src/Controls/src/Core/Compatibility/Handlers/VisualElementRenderer.cs#L19 ? These are API symmetrical to VER but they are implemented via IViewHandler so they work a bit better with MAUI layout concepts.

I think that might help with
#15

Stack trace

Error    CS1061    'MauiAppBuilder' does not contain a definition for 'UseCardsView' and no accessible extension method 'UseCardsView' accepting a first argument of type 'MauiAppBuilder' could be found (are you missing a using directive or an assembly reference?)

Issue

Hey there,

I've used super simple app from microsoft tutorial (zero complex stuff and dependencies)
Than I've tried to add your library and after following basic setup I`ve got an error.

Retro steps:

1. Added NuGet CardsView.Maui
2. Added .UseCardsView() to my MauiApp builder.
3. Got an error
   

Do you have any ideas what's might be wrong here ?

Thanks in advance for your time 🥰

Best,
Anton Vlasiuk

.NET MAUI project

Basic application from getting started "Build your first app" learn.microsoft article
https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android

.NET

C:\Users\AntonVlasiuk>dotnet --version
7.0.202

Dependencies

hello,

i am trying this:

    <cards:CarouselView >
        <cards:CarouselView.ItemsSource>
            <x:Array Type="{x:Type View}">
                <StackLayout>
                    <CollectionView HorizontalOptions="FillAndExpand" ItemsSource="{Binding CollectionViewContent}">
                        <CollectionView.ItemTemplate>
                            <DataTemplate x:DataType="ViewModels:CollectionViewContent">
                                <Grid Padding="10,6,10,6">
                                    <Grid.RowDefinitions>
                                        <RowDefinition Height="auto"/>
                                        <RowDefinition Height="2"/>
                                        <RowDefinition Height="auto"/>
                                    </Grid.RowDefinitions>
                                    <Label TextColor="{AppThemeBinding Dark=White, Default=Black}" HorizontalOptions="Start" FontSize="18" Text="{Binding PropertyName}"/>
                                    <BoxView Grid.Row="1" HeightRequest="2" BackgroundColor="{AppThemeBinding Dark=Black, Default=White}"/>
                                    <Label Margin="0,5,0,5" TextColor="{Binding Color}" FontFamily="WuerthExtraBold" HorizontalOptions="End" HorizontalTextAlignment="End" FontSize="22" Grid.Row="2" Text="{Binding PropertyValue}"/>
                                </Grid>
                            </DataTemplate>
                        </CollectionView.ItemTemplate>
                    </CollectionView>
                </StackLayout>
                <StackLayout>
                    <Label Text="Hi yolonese"/>
                </StackLayout>  
            </x:Array>
        </cards:CarouselView.ItemsSource>
    </cards:CarouselView>

What i want to achieve is a carouselview, that has different layouts in it. I populate the first stacklayout with real data and the second "yolonese" is just a placeholder.
I did get it to work when all layouts where static, but now that I bind to it, it wont compile and just throw an error saying: Value must not be null.

What can I do here?

Is there a reason why there is no Windows target lib in the nuget package?

'MauiAppBuilder' does not contain a definition for 'UseCardsView' and no accessible extension method 'UseCardsView' accepting a first argument of type 'MauiAppBuilder' could be found (are you missing a using directive or an assembly reference?) MauiCarousel (net7.0-windows10.0.19041.0)

I was wondering if it's possible to configure the carousel to display more than one card when the user rotates their device horizontally. Currently, the carousel only displays one card at a time, but I think it would be more user-friendly to take advantage of the extra horizontal space available when the device is rotated.

Hello,
Tested my application in .net 8 but. I use CoverFlowView for rendering different views like tabs on one page, using the itemsource with ObservableCollection. In .net7 everything is okay, works very well, but in .net 8 seems empty i try all types, and only gestures work.

The ItemTemplate shows blank in coverflow view when a border is used in the data template in .NET 8.
Using a normal CarouselView works completely fine.

I have attatched the sample repo with frame replaced by border in PanCardViewSample.Views.CoverFlowSampleXamlView.
It also has a CarouselView abouve the CoverFlowView to compare.

https://github.com/Zack-G-I-T/MAUI.NET8.BorderIssue

Can you build version for net6.0?

The last merge fixed issues with the border which is great @PavloLukianets!

However, now the CoverFlowView doesn't measure what's inside it to determine height, so everything squashes into it.
In the samples project - If you change the grid back to a stackLayout in CoverFlowSampleXamlView.xaml you will see the CoverFlowView get squashed to the top and the button renders over it as seen in the screenshot.

If you set a fixed height request it will work, however sometimes you don't always know what height the ItemTemplate is going to be.

Hey there, @AndreiMisiukevich

First of all, I just wanted to say that your library is fantastic and has been an invaluable tool. Thank you for your hard work! 🙌

Are you planning to continue developing and maintaining this library in the future?

Looking forward to hearing from you, and once again, thank you for all the great work you've done! 😊

Best regards,
Anton Vlasiuk

In iOS and Android everything works well, but in Windows I have this error everytime.
Could it be related to the Microsoft.Maui.Controls.Compatibility present in the CardsView? Is there something I could do to workaround this?

Not an issue but a question, Is Windows supported by this package. The Android version of my project work fine with CardView.Maui however when I build for windows I get a blank spot where my card stack should be.

Sorry for using the issues for this question but I did not know where I could ask this question.

Hello. Is it possible to make a vertical scroll using the library? I tried but was not successful. I need to do a vertical scroll like Tiktok or Instagram reels.
Thanks.

Hi,

For some reason I need to define the height request for the CardView content. It is not automatically expand the height according to the content.
If someone know how to do it, let me know.

Hi,
We have few Maui Class libraries where we have views and view models, we just found that that we cannot test any viewModels where you nuget is referenced , this is because is missing the net7.0 int the target framework.

This is stopping us from doing any kind of ViewModel testing. Would be ok for you to add this and republish your nuget?

Current
<TargetFrameworks>net7.0-ios;net7.0-android;net7.0-maccatalyst</TargetFrameworks>

Fix
<TargetFrameworks>net7.0;net7.0-ios;net7.0-android;net7.0-maccatalyst</TargetFrameworks>

many thanks

I include a some collection views with horizontal scroll in Carousel view but when I try to scroll CV carusell view change a page.

Hi,
I hope you have time to work out whats going on but it seems that the indicators no longer work or they are totally stretched in the latest version of visual studio see pic below taken from you sample app. Now all the pages where we use the indicators are looking really bad. Most likely a Maui bug but may be you can suggest a workaround. thanks for this beatiful control