Search code examples
maui

MAUI Carousel not changing items in real-time, blank slide, grey bar at the bottom on iOS

I am binding an ObservableCollection to a Carousel view and displaying images and text. What I am noticing is that if I change the contents of the ObservableCollection, the Carousel doesn't reflect the change in realtime. I have to swipe through a few items and only then does the item change. I cant figure out if this is a bug in my code or MAUI. This exact code worked just fine in Xamarin.

(1) When I press the button, I expect the Text to change (I have also tried this with the image and get the same faulty behavior). The text only changes after I swipe across and return to that same slide.

On iOS - the change can be seen after a few swipes. On Android, the change is never seen. Press the change button

(2) some of the slides won't show the image or the text when you swipe through On iOS - this issue is prevalent. On Android - not seeing this issue

enter image description here

(3) There is a grey bar that appears on swipe that randomly shows up at the bottom (directly above the indicator), how do I get rid of that? On iOS - this issue is prevalent. On Android - not seeing this issue

enter image description here

Solution

  • There is a grey bar that appears on swipe that randomly shows up at the bottom (directly above the indicator), how do I get rid of that? On iOS - this issue -is prevalent. On Android - not seeing this issue

    To get rid of the grey bar above the indicator on iOS, you can set HorizontalScrollBarVisibility="Never", see Scroll bar visibility.

    <CarouselView
            HorizontalScrollBarVisibility="Never"
            Grid.Row="1"
            IndicatorView="IndicatorView"
            ItemsSource="{Binding Data}">
            <CarouselView.ItemTemplate>

    some of the slides won't show the image or the text when you swipe through On iOS - this issue is prevalent. On Android - not seeing this issue

    This issue is related with [BUG][iOS] Maui 8.0.10+ - CarouselView - Previous item content disappears after scrolling to next item #22015 and [iOS] Images from paths refuse to load in UI #19833. You can follow up there. Hopefully, it'll be fixed in next release.

    On iOS - the change can be seen after a few swipes. On Android, the change is never seen.

    You need to make your Model: CarouselData implement ObservableObject using MVVM communitytoolkit. That'll update the UI automatically after changing the Text value: Data[0].Text = "CHANGED".

    public partial class CarouselData : ObservableObject
{
    public ImageSource Image { get; set; }

    [ObservableProperty]
    public string? _text;
}