xamarin.forms carouselview different contentpages

Question

I want to add a CarouselView in my Contentpage with different templates in slider views. Can I create 3 Datatemplates in the design page like this:

<ctrl:CarouselViewControl x:Name="test" BackgroundColor="LightGreen" HeightRequest="250" WidthRequest="250" InterPageSpacing="10" ShowIndicators="True" IndicatorsShape="Circle" IndicatorsTintColor="White" Position="0">
            <ctrl:CarouselViewControl.ItemTemplate>
                <DataTemplate1>

                </DataTemplate1>

                <DataTemplate2>

                </DataTemplate2>

                <DataTemplate3>

                </DataTemplate3>
            </ctrl:CarouselViewControl.ItemTemplate>
        </ctrl:CarouselViewControl>

When I swipe left or right I want to select the specific Datatemplate, because I want to work in one contentpage with different labels, Imagebutton or something else.

Thanks.

Answer 1

You can create DataTemplateSelector for different DataTemplates.

Here is running GIF.

The code like the folliwng format.

       <ContentPage.Resources>
    <ResourceDictionary>
        <DataTemplate x:Key="Page1Template" >
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
                <Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
                <Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
                <Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
            </Grid>
            <!--<ViewCell>
                <StackLayout>
                    <Button Text="ccccc"/>
                    <Button Text="cccc"/>
                    <Button Text="ccccc"/>
                    <Label Text="ccccccc"/>
                    <Button Text="cccc"/>
                    <Button Text="ccccc"/>
                </StackLayout>

            </ViewCell>-->
        </DataTemplate>

        <DataTemplate x:Key="Page2Template">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="button1" Grid.Row="0" Grid.Column="0" />
                <Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
                <Button Text="button2" Grid.Row="1" Grid.Column="0" />
                <Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="Page3Template">
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="*" />
                    <RowDefinition Height="*" />
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Button Text="button1" Grid.Row="0" Grid.Column="0" />
                <Button Text="Top Right" Grid.Row="0" Grid.Column="1" />
                <Button Text="button2" Grid.Row="1" Grid.Column="0" />
                <Button Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
            </Grid>
        </DataTemplate>

        <local:PersonDataTemplateSelector x:Key="personDataTemplateSelector"

            Page1="{StaticResource  Page1Template}"
            Page2="{StaticResource  Page2Template}" 
            Page3="{StaticResource  Page3Template}"/>
    </ResourceDictionary>
</ContentPage.Resources>

Then you can set it to your CarouselView

 <control:CarouselView  x:Name="mycal" ItemTemplate="{StaticResource personDataTemplateSelector}" />

Here is code of DataTemplateSelector

    public class PersonDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate Page1 { get; set; }
    public DataTemplate Page2 { get; set; }

    public DataTemplate Page3 { get; set; }

    public DataTemplate Page4 { get; set; }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        switch (((MyText)item).Page)
        {
            case 1:
                return Page1;
            case 2:
                return Page2;
            case 3:
                return Page3;
            default:
                return Page1;

        }

    }
}

If you want to know more details, you can refer to the following link.

http://codeworks.it/blog/?p=444

Here is my MyText.

public class MyText
{
    public string LabelText { get; set; }
    public int Page { get; set; }
}

My backcode of Mainpage.

            ObservableCollection<MyText> observableCollection = new ObservableCollection<MyText>();
        observableCollection.Add(new MyText { LabelText="xxxxx", Page=1 });
        observableCollection.Add(new MyText { LabelText = "bbbbb", Page = 2 });
        observableCollection.Add(new MyText { LabelText = "ccccc", Page = 3 });




        mycal.ItemsSource = observableCollection;