СarouselView does not display content - xamarin

Question

СarouselView does not display content. I have the following code in the AppShell.axml
for the whole day I can’t figure out how to make this work. Help make a working code.
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:local="clr-namespace:test.Views"
BackgroundColor="Azure"
x:Class="test.AppShell">
<CarouselView HorizontalOptions="Center" NumberOfSideItems="1">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="11111111111"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
</ContentPage>
I have the following code in the AppShell.axml.cs
using System;
using System.Collections.Generic;
using Xamarin.Forms;
namespace test
{
public partial class AppShell : ContentPage
{
public AppShell()
{
InitializeComponent();
}
}
}
I tried such an example and it works, but I need the option to work from above.
<CarouselView>
<CarouselView.ItemsSource>
<x:Array Type="{x:Type x:String}">
<x:String>Baboon</x:String>
<x:String>Capuchin Monkey</x:String>
<x:String>Blue Monkey</x:String>
<x:String>Squirrel Monkey</x:String>
<x:String>Golden Lion Tamarin</x:String>
<x:String>Howler Monkey</x:String>
<x:String>Japanese Macaque</x:String>
</x:Array>
</CarouselView.ItemsSource>
</CarouselView>

Answer 1

Firstly why you place a carsouselView in the Appshell.xaml? I think the AppShell.Xaml is only to set the App configurations.
you can write code in the AppShell.xaml to layout the App menu or flylayout.
if you do not specify a ItemsSource to CarouselView It will not renderer.
you can make the ItemsSource by BindingContext.

Answer 2

Do you want to achieve the result like following GIF?
If so, you could show the content in the CarouselView by DataBinding.
Step 1: Create a Model for your CarouselView, I create it like following code.
public class MyModel
{
public string Name { get; set; }
}
Step 2: create a viewModel for your CarouselView(we can add the content that we want them to display).
public class MyModelView: BaseViewModel
{
public ObservableCollection<MyModel> MyModels { get; set; }
public MyModelView()
{
MyModels = new ObservableCollection<MyModel>();
MyModels.Add(new MyModel() { Name="test1"});
MyModels.Add(new MyModel() { Name = "test2" });
MyModels.Add(new MyModel() { Name = "test3" });
MyModels.Add(new MyModel() { Name = "test4" });
MyModels.Add(new MyModel() { Name = "test5" });
MyModels.Add(new MyModel() { Name = "test6" });
}
}
Step 3: please add the ItemsSource for your CarouselView and binding the properties for xamarin forms control(Label)
<CarouselView HorizontalOptions="Center" NumberOfSideItems="1" ItemsSource="{ Binding MyModels}">
<CarouselView.ItemTemplate>
<DataTemplate>
<StackLayout>
<Frame HasShadow="True"
BorderColor="DarkGray"
CornerRadius="5"
Margin="20"
HeightRequest="300"
HorizontalOptions="Center"
VerticalOptions="CenterAndExpand">
<StackLayout>
<Label Text="{Binding Name}"
FontAttributes="Bold"
FontSize="Large"
HorizontalOptions="Center"
VerticalOptions="Center" />
</StackLayout>
</Frame>
</StackLayout>
</DataTemplate>
</CarouselView.ItemTemplate>
</CarouselView>
Step 4： backend code for your CarouselView.To bind your ModelView for layout.
BindingContext = new MyModelView();
Here is an example project. you can refer to it.
https://github.com/851265601/MyShellCarouselView