Xamarin形式:如何使每个转盘页面具有不同的颜色

问题描述 投票:0回答:1

我创建了包含幻灯片集合的Carousel视图。每张幻灯片都包含图像,消息和颜色。它存储在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>

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

forms xamarin carousel
1个回答
0
投票

您将BackgroundColor绑定到CarouselViewControl,这将为整个视图(而不是不同的幻灯片)设置它。

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

要设置页面的背景,您必须从DataTemplate内部进行操作,并将BackgroundColorGrid属性绑定到Slide的相应属性。

<DataTemplate>
  <Grid BackgroundColor="{Binding BackgroundColor}"> <!-- Bind the grids BackgroundColor to the one of the Slide -->
    <!-- the grids content -->
  </Grid>
</DataTemplate>
© www.soinside.com 2019 - 2024. All rights reserved.