Xamarin Forms: How to make each Carousel Page a different Color

Question

I created Carousel view that contains a Collection of Slides. Each slide contains and image, message, and Color. It is stored in an ObservableCollection. I have three colors in the collection. The first slide/page should be yellow, second should be Red, and third should be blue. The issue I have is, when the app initiates all of the slides are blue in the carousel. I need each slide/page to have different colors.

 Carousel.ItemsSource =   slides = new ObservableCollection<Slides>(new[]
            {
                new Slides("money", "Some Description", BackgroundColor = Color.Yellow),
                new Slides("money", "Some Description2", BackgroundColor = Color.Red),
                new Slides("money", "Some Description3",BackgroundColor = Color.Blue)});



<Control:CarouselViewControl x:Name="Carousel"
                             ShowIndicators="True"
                             BackgroundColor="{Binding Color}"
                             CurrentPageIndicatorTintColor="Black">
   <Control:CarouselViewControl.ItemTemplate>
       <DataTemplate>
      <Grid>
          <Grid.RowDefinitions>
              <RowDefinition Height="*"/>
              <RowDefinition Height="*"/>
          </Grid.RowDefinitions>
          <ContentView Grid.Row="0" Padding="60,30,60,0">
              <Image Source="{Binding Image}" Aspect="AspectFit"/>
          </ContentView>
          <ContentView Grid.Row="1" Padding="20,50,20,0">
              <Label Text="{Binding Message}" TextColor="black"
                     HorizontalOptions="CenterAndExpand"
                     FontSize="Large"/>

          </ContentView>

      </Grid>

       </DataTemplate>
   </Control:CarouselViewControl.ItemTemplate>
</Control:CarouselViewControl>

I expect each page to have different colors.

Which Carousel View are you using? But in general you need to bind the color at ItemTemplate level. — SushiHangover
could you show your Slides,do you bind the data correctly ？ — Leo Zhu - MSFT
I'm using a carousel plugin called CarouselView.FormsPlugin. The slides are added in the ObservableCollection at the top of the xaml code. — probertson

Paul Kertscher Paul Kertscher · Accepted Answer · 2019-10-28T07:49:24

You are binding the BackgroundColor for the CarouselViewControl, which will set it for the whole view, not the distinct slides.

Furthermore, the items stored in ItemsSource do not represent any views in the CarouselViewControl, but rather data objects. Just because an object in the ItemsSource collection has a value BackgroundColor, the BackgroundColor of the respective view in the CarouselViewControl ain't set automagically.

To set the background of the pages you'll have to operate from within the DataTemplate and bind the BackgroundColor property of the Grid to the respective property of Slide.

<DataTemplate>
  <Grid BackgroundColor="{Binding BackgroundColor}"> <!-- Bind the grids BackgroundColor to the one of the Slide -->
    <!-- the grids content -->
  </Grid>
</DataTemplate>

Xamarin Forms: How to make each Carousel Page a different Color

1 Answers