Net Maui How to create custom carouselview ?

Question

I want to create custom carouselview to use any where in project Is it possible any help for sample , thanks..

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="AppMaui.Controls.Carousel"
             x:Name="CarView">
<Grid VerticalOptions="Start">


  <ContentView.Content>
            <CarouselView x:Name="nameCarousel"
                                  FlowDirection="LeftToRight"
                         HeightRequest="{OnIdiom Phone=400,
                                                Tablet=400,
                                                Desktop=550}"
                                      IndicatorView="imagesIndicator"
                                      ItemsSource="{Binding Source={x:Reference CarView}, Path=ItemsSource, Mode=OneWay}"
                                      HorizontalScrollBarVisibility="Never" >
                <CarouselView.ItemsLayout>
                    <LinearItemsLayout
                                Orientation="Horizontal"
                                SnapPointsAlignment="Center"
                                SnapPointsType="MandatorySingle" />
                </CarouselView.ItemsLayout>
                <CarouselView.ItemTemplate>

                    <DataTemplate>
                        <Border Margin="10,10,10,0">
                            <Border.StrokeShape>
                                <RoundRectangle CornerRadius="3" />
                            </Border.StrokeShape>
                            <Image Source="{Binding .}" Aspect="AspectFill">


                               <Image.GestureRecognizers>

                                            <TapGestureRecognizer NumberOfTapsRequired="1"
                                                                  Command="" />

                                        </Image.GestureRecognizers>


                            </Image>
                        </Border>
                    </DataTemplate>

                </CarouselView.ItemTemplate>

            </CarouselView>

            <IndicatorView x:Name="imagesIndicator"
                                       IndicatorColor="DarkGray"
                                       IndicatorsShape="Circle"
                                       SelectedIndicatorColor="{StaticResource Home}"
                                       Grid.Row="2"
                                       Margin="0,-10,0,10"
                                       HorizontalOptions="Center"
                                       VerticalOptions="End">
                <IndicatorView.IndicatorTemplate>
                    <DataTemplate>
                        <Border HeightRequest="10" Style="{StaticResource IndicatorViewStyle}">
                            <Border.StrokeShape>
                                <RoundRectangle CornerRadius="30" />
                            </Border.StrokeShape>
                        </Border>
                    </DataTemplate>
                </IndicatorView.IndicatorTemplate>
            </IndicatorView>
        </Grid>
    </ContentView.Content>
</ContentView>

Answer 1

Hello, From this line of the code: ItemsSource="{Binding Source={x:Reference CarView}, Path=ItemsSource, Mode=OneWay}"， I know you want to set a BindableProperty and pass the ItemsSource. I‘m not sure what type of ItemsSource, so I set List<String> for testing. Please refer to the following code:

public partial class Carousel: ContentView
{
    public static readonly BindableProperty ItemsSourceProperty =
  BindableProperty.Create("ItemsSource", typeof(List<String>), typeof(Carousel), new List<String>());
    public List<String> ItemsSource
    {
        get { return (List<String>)GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }
    public Carousel()
      {
            InitializeComponent();
      }
}

Consume the custom Carousel control: XMAL(adding Carousel in MainPage)

<local:Carousel ItemsSource="{Binding DataSource}"></local:Carousel>

Setting BindingContext for testing

public List<string> DataSource { get; set; }
      public MainPage()
      {
            InitializeComponent();
            
            DataSource = new List<string>()
            {
            "dotnet_bot.png",
            "https://aka.ms/campus.jpg",
                  "dotnet_bot.png",
            "https://aka.ms/campus.jpg"
        };
        this.BindingContext = this;
    }

Best Regards, Wenyan Zhang

---

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.