Converting CarouselPage to CarouselView

Question

Is it possible to add direct content to a CarouselView in Xaml?

I need to convert an old CarouselPage to the newer CarouselView, but it looks like it must be data bound. But my content for each slide is entirely different and does not easily lend itself to an item template.

<?xml version="1.0" encoding="utf-8" ?>
<CarouselPage xmlns="http://xamarin.com/schemas/2014/forms"
              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              x:Class="myCarousel" 
              x:Name="carouselPage"
NavigationPage.HasNavigationBar="false" BackgroundColor="#000000">
    <ContentPage BackgroundColor="#000000">
        <StackLayout BackgroundColor="#000000">
            <Label Text="Lorem ipsum" />
            <ImageButton Margin="0,20" Source="btn_continue" HorizontalOptions="Center" HeightRequest="30" Clicked="Go_Right" />
        </StackLayout>
    </ContentPage>
    <ContentPage BackgroundColor="#000000">
        <StackLayout BackgroundColor="#000000">
            <Button Text="X" TextColor="White" BackgroundColor="Transparent" VerticalOptions="Start" HorizontalOptions="End" Clicked="Go_Home"></Button>
            <ImageButton Source="slider-2" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="Start"  />
            <Grid Margin="0,20" VerticalOptions="Start">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <ImageButton Source="btn_back" HorizontalOptions="Center" HeightRequest="30" Grid.Column="0" Clicked="Go_Left" />
                <ImageButton Source="btn_close" HorizontalOptions="Center" HeightRequest="30" Grid.Column="1" Clicked="Go_Home" />
            </Grid>
        </StackLayout>
    </ContentPage>

</CarouselPage>

I need to create a multi-slide carousel, where each slide has different content like above. How would I convert that using CarouselViews?

The problem I am having with the CarouselPage is that it does not always behave consistently, which is why I imagine they are slowly deprecating it.

My answer is not working for you ? You need something different ? — G.Mich, Oct 26 '20 at 07:41

score 1 · Accepted Answer · answered Oct 23 '20 at 01:59

But my content for each slide is entirely different and does not easily lend itself to an item template.

You need to create different DataTemplate for each slide and Choose item appearance at runtime, for example:

<ContentPage ...
             xmlns:controls="clr-namespace:CarouselViewDemos.Controls"
             x:Class="CarouselViewDemos.Views.HorizontalLayoutDataTemplateSelectorPage">
    <ContentPage.Resources>
        <DataTemplate x:Key="StyleATemplate">
            ...
        </DataTemplate>

        <DataTemplate x:Key="StyleBTemplate">
            ...
        </DataTemplate>

        <controls:ContentSelector x:Key="myContentSelector"
                                             AmericanMonkey="{StaticResource StyleATemplate}"
                                             OtherMonkey="{StaticResource StyleBTemplate}" />
    </ContentPage.Resources>

    <CarouselView ItemsSource="{Binding Monkeys}"
                  ItemTemplate="{StaticResource myContentSelector}" />
</ContentPage>

And in code behind, use DataTemplateSelector to select different template for each slide:

public class ContentSelector: DataTemplateSelector
{
    public DataTemplate StyleATemplate{ get; set; }
    public DataTemplate StyleBTemplate{ get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        if(item.style == A){
            return  StyleATemplate;
        }else{
            return StyleBTemplate;
        }
       
    }
}

Is it also possible to change the current page programmatically? private void RestartSlider(object sender, EventArgs e) { carouselPage.CurrentPage = carouselPage.Children[0]; } — User970008, Oct 23 '20 at 11:00
Yes, you can set the [current item](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/carouselview/interaction#preset-the-current-item) in CarouselView. — nevermore, Oct 26 '20 at 01:28
@User970008 Does my solution work for you? If yes, can you please accept it (click the ☑️ in the upper left corner of this answer ) so that we can help more people with same problem:). — nevermore, Oct 27 '20 at 01:31