MAUI CarouselView does not show anything on iOS

Question

MAUI CarouselView does not show anything on iOS

Maximilian Grabner 5

Hi

Slowly I am getting the feeling, that iOS want to be special as Apple always want to be..

I am now facing the issue, that my carouselView shows and uses its defined space, but does not show the elements in the dataTemplate defined.

For test purposes, i defined the ItemsSource directly in my xaml-file. But even this strings does not appear as you can see in the following screenshot. :/

Simulator Screenshot - iPhone 15 Pro Max - 2024-08-16 at 13.21.04

This is my xaml-code:

<CarouselView IsVisible="{ Binding PopupHasImage, Source={x:Reference Root} }"
			  Loop="False"
			  HeightRequest="190"
			  Margin="-15,-5,-15,5"
			  IndicatorView="indicatorView">
			  <!--="{ Binding ImageSources, Source={x:Reference Root} }">-->
	<CarouselView.ItemsSource>
		<x:Array Type="{x:Type x:String}">
			<x:String>Item 1</x:String>
			<x:String>Item 2</x:String>
			<x:String>Item 3</x:String>
		</x:Array>
	</CarouselView.ItemsSource>
	<CarouselView.ItemTemplate>
		<DataTemplate>
			<Grid Padding="15,15,15,15">
				<Grid BackgroundColor="#ebebeb">
					<Label Text="{ Binding . }" />
					<!-- <local:LoadingIndicator IsVisible="{ Binding LoadingVisible }"  
											Autostart="True" 
											HorizontalOptions="Fill" 
											VerticalOptions="Center" /> -->
					<!-- <Image Aspect="AspectFill"
						   HorizontalOptions="Fill"
						   VerticalOptions="Fill"
						   Source="{ Binding ImageSource }">
						<Image.Behaviors>
							<local:EventToCommandBehavior EventName="PropertyChanged" 
														  Command="{ Binding PropertyChangedCommand }" />
						</Image.Behaviors>
					</Image> -->
				</Grid>
			</Grid>
		</DataTemplate>
	</CarouselView.ItemTemplate>
</CarouselView>

After some difficulties with android with setting the ItemsSource, i managed to get it working.
Hopefully you can help me solve this problem.
Thanks in advance

1 answer

Your answer

Answer 1

Anonymous

Hello,

=============UPDATE===============

Updating my .NET version to 8.0.4 on my MacBook did not solve the problem

Please click the project, choose the Manage NuGet Packages.., then choose Update tab, update your Microsoft.Maui.Controls, Microsoft.Maui.Controls.compatiblity to 8.0.40 or higher(latest version is 8.0.80)

Firstly, please use <StackLayout> to wrap the <CarouselView> .

By the way, if you set the Loop="False" in .NET versions prior to 8.0.4, here is a known issue about CarouselView - Content disappears when 'Loop' is false, please update to 8.0.40. And PopupHasImage's value should be true.

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Maximilian Grabner 5 Reputation points

2024-08-19T08:20:40.9533333+00:00

Wrapping my <CarouselView> with a <StackLayout> does not change anything.
But setting Loop="True" shows at least my content, even though this is not exactly how we want our <CarouselView> to behave..
Updating my .NET version to 8.0.4 on my MacBook did not solve the problem. Is there anything I can do, that this works with Loop="False" or should i just wait till a new MAUI-Version is released and hope it is fixed in this version?
Anonymous

2024-08-19T09:18:14.6766667+00:00

Please see my update answer about updating .NET Maui nugget package version.
Anonymous

2024-08-19T09:19:55.29+00:00

I test it in Microsoft.Maui.Controls, Microsoft.Maui.Controls.compatiblity to 8.0.80, it works as normal.
Maximilian Grabner 5 Reputation points

2024-08-19T10:08:48.63+00:00

I downloaded the sample project for the carouselView from https://github.com/dotnet/maui-samples/tree/main/8.0/UserInterface/Views/CarouselViewDemos/CarouselViewDemos
Using this it works fine, maybe it depends on the ItemsSource in the background. I am currently using an ObservableCollection<InfoPopModel> while the "InfoPopModel" is a class from the type "INotifyPropertyChanged" to get an loadingIndicator while loading the images and resetting the visibility of the image and indicator if the loading process has finished.
In the sample mentioned above it´s used very similar with the viewModel. Do you have an example for this use case? In the sample there is only a await Task.Delay(2000) used..

Maximilian Grabner 5

Did you use the MAUI-Sample project?
I downloaded this project, tested it and it works for me too. Now i dont know, where my problem is. Could the problem be that i dont use a ViewModel instead i implemented my itemsSource directly in the codebehind as ObservableCollection with the type of "InfoPopModel"

This Model looks like this:

public class InfoPopModel : INotifyPropertyChanged
{
	private static readonly ILogger _NLog = LogManager.GetCurrentClassLogger();

	private ImageSource _ImageSource;
	public ImageSource ImageSource 
	{ 
		get => _ImageSource;
		set 
		{
			_ImageSource = value;
			OnPropertyChanged(nameof(ImageSource));
		}
	}	

	public bool LoadingVisible { get; set; }

	public ICommand PropertyChangedCommand { get; set; }

	public event PropertyChangedEventHandler PropertyChanged;

	public InfoPopModel(string source)
	{
		try
		{
			LoadingVisible = true;
			ImageSource = ImageSource.FromUri(new Uri(source));
			PropertyChangedCommand = new Command(HandleLoadingPropertyChanged);
		}
		catch (Exception ex)
		{
			_NLog.Error(ex, "Error in InfoPopModel");
		}
	}

	protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
	{
		PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
	}

	private void HandleLoadingPropertyChanged(object arg)
	{
		try
		{
			bool imageIsLoading = CheckImageLoading(arg);
			if (!imageIsLoading)
				SetLoadingIndictorInvisible();
			return;
		}
		catch (Exception ex)
		{
			_NLog.Error(ex, "Error in handling propertychanged");
		}
	}

	private void SetLoadingIndictorInvisible()
	{
		LoadingVisible = false;
		OnPropertyChanged(nameof(ImageSource));
	}

	private bool CheckImageLoading(object arg)
	{
		if (arg is PropertyChangedEventArgs eventArgs && ImageSource.Parent is Image img)
		{
			if (eventArgs.PropertyName == "IsLoading" && img != null && img.IsLoading == false)
				return false;
		}
		return true;
	}
}

Anonymous

2024-08-20T06:58:20.6266667+00:00

Firstly, make sure PopupHasImage's value is true and ObservableCollection<InfoPopModel> is not empty in your ViewModel.

It works in my side; it is a good choose that you can share a mini demo with us.

Share via

MAUI CarouselView does not show anything on iOS

1 answer

Your answer