Search code examples
xamarinxamarin.formscarousel

Converting CarouselPage to CarouselView


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.


Solution

  • 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;
            }
           
        }
    }