Xamarin Forms：如何使每个轮播页面具有不同的颜色答案

【问题标题】：Xamarin Forms: How to make each Carousel Page a different ColorXamarin Forms：如何使每个轮播页面具有不同的颜色
【发布时间】：2019-10-25 04:04:43
【问题描述】：

我创建了包含幻灯片集合的轮播视图。每张幻灯片都包含图像、消息和颜色。它存储在 ObservableCollection 中。我的系列有三种颜色。第一张幻灯片/页面应该是黄色的，第二张应该是红色的，第三张应该是蓝色的。我遇到的问题是，当应用程序启动时，轮播中的所有幻灯片都是蓝色的。我需要每张幻灯片/页面有不同的颜色。

 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>

我希望每个页面都有不同的颜色。

【问题讨论】：

您使用的是哪个轮播视图？但一般情况下，您需要在 ItemTemplate 级别绑定颜色。
能不能显示你的Slides，数据绑定正确吗？
我正在使用一个名为 CarouselView.FormsPlugin 的轮播插件。幻灯片添加到 xaml 代码顶部的 ObservableCollection 中。

标签： forms xamarin carousel

【解决方案1】：

您正在为CarouselViewControl 绑定BackgroundColor，这会将其设置为整个视图，而不是不同的幻灯片。

此外，ItemsSource 中存储的项目不代表CarouselViewControl 中的任何视图，而是数据对象。仅仅因为ItemsSource 集合中的对象具有值BackgroundColor，CarouselViewControl 中相应视图的BackgroundColor 不会自动设置。

要设置页面的背景，您必须在DataTemplate 中进行操作，并将Grid 的BackgroundColor 属性绑定到Slide 的相应属性。

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

【讨论】：