CarouselView，Xamarin表单中的每个幻灯片都有不同的模板 [英] CarouselView with a different template for each slide in Xamarin forms

问题描述

我需要制作Xamarin形式的CarouselView，其中每个幻灯片都有一个特定的模板. 目前，我已经这样做了:

I need to make a CarouselView in Xamarin forms where every slide has a specific template. Currently I have done so:

XAML :

xmlns:control="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
.......

 <ContentView HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
          <control:CarouselView x:Name="carouselView">
            <control:CarouselView.ItemTemplate>
              <DataTemplate>
                <Label Text="{Binding Testo}" />
              </DataTemplate>
            </control:CarouselView.ItemTemplate>
          </control:CarouselView>
        </ContentView>

CODEBEHIND :

List<CustomCell> myCarousel = new List<CustomCell>();
myCarousel.Add(new CustomCell { Testo = "ciao" });
myCarousel.Add(new CustomCell { Testo = "ciao due" });

carouselView.ItemsSource = myCarousel;

CustomCell :

public class CustomCell
{
    public string Testo { get; set; }
}

所有这些工作正常，我的问题是我需要为每个幻灯片使用不同的模板，例如，每个幻灯片在图形上都不同的网格，这是因为我必须以图形方式显示不同的数据. 您能推荐一个解决方案吗?谢谢

All this works, my problem is that I'd have a different template for each slide, for example, a grid different graphically each slide, this is because I have to display data differently graphically speaking. Can you recommend a solution? Thank you

推荐答案

您可以使用

You can use a data template selector to customize the look of different items in the CarouselView. A simple example:

MyDataTemplateSelector.cs

public class MyDataTemplateSelector : DataTemplateSelector
{
    public DataTemplate SimpleTemplate { get; set; }
    public DataTemplate ComplexTemplate { get; set; }

    public MyDataTemplateSelector()
    {
        SimpleTemplate = new DataTemplate(typeof(SimpleView));
        ComplexTemplate = new DataTemplate(typeof(ComplexView));
    }

    protected override DataTemplate OnSelectTemplate(object item, BindableObject container)
    {
        CustomCell cell = (CustomCell)item;

        if (cell.Testo.Length > 5) {
            return ComplexTemplate;
        } else {
            return SimpleTemplate;
        }
    }
}

SimpleView.xaml

SimpleView.xaml

<ContentView>
    <StackLayout BackgroundColor="Red">
      <Label Text="{Binding Testo}" VerticalOptions="CenterAndExpand" HorizontalOptions="CenterAndExpand" />
    </StackLayout>
</ContentView>

ComplexView.xaml

ComplexView.xaml

<ContentView>
    <StackLayout BackgroundColor="Yellow" >
      <Label Text="{Binding Testo}" VerticalOptions="CenterAndExpand" HorizontalOptions="Center" />
      <Label Text="I lied about this being complex" />
    </StackLayout>
</ContentView>

在您的CarouselView所在的页面中:

And in the page where your CarouselView is:

<ContentPage.Resources>
  <ResourceDictionary>
    <local:MyDataTemplateSelector x:Key="templateSelector"></local:MyDataTemplateSelector>
  </ResourceDictionary>
</ContentPage.Resources>

....

<control:CarouselView x:Name="carouselView" ItemTemplate="{StaticResource templateSelector}" />

这篇关于CarouselView，Xamarin表单中的每个幻灯片都有不同的模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！