Xamarin.forms 轮播视图列表列表

Question

我有一个使用轮播视图的 xamarin.forms 应用程序。我的轮播视图每个视图有 6 个项目。但现在它每次视图显示一个项目。我知道问题是我需要创建一个List 的 List。但我被困在这个问题上。

我预期的轮播视图输出是这样的。

但我现在得到的是这样的

我原来的包含数据的列表是这样的。

 ObservableCollection<SECHomescreenData> resultObjForSEC = callForSECtilesScreen.APICallResult<ObservableCollection<SECHomescreenData>>();

我的 SECHomescreenData。

  public partial class SECHomescreenData

   {        

       public string Status { get; set; }    

       public string Countered { get; set; }

   }

当我将此列表绑定到我的轮播视图时，它只会在每个视图中显示一个项目。我想要实现的是将数据填充到轮播的 6 项中，如果有第 7 项，则转到轮播视图的下一页。那么我怎样才能实现这一目标呢？如果需要列表列表，我该怎么做？任何帮助表示赞赏。

Answer 1

实际上，您不需要使用List of List。设置每个Frame的大小（宽度等于屏幕宽度的1/2，高度等于屏幕高度的1/3）。并设置属性 Span="3"CarouselView在 Xamarin.Forms 4.0 之后发布。<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;xmlns:d="http://xamarin.com/schemas/2014/forms/design"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;mc:Ignorable="d"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x:Name="contentPage"&nbsp; &nbsp;// set the name of the contentpage&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;x:Class="xxx.MainPage"><CarouselView&nbsp; ItemsSource="{Binding MyItems}"&nbsp; BackgroundColor="Transparent" HorizontalOptions="Center" VerticalOptions="Center">&nbsp; &nbsp; &nbsp; &nbsp; <CarouselView.ItemsLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <GridItemsLayout SnapPointsAlignment="Center"&nbsp; SnapPointsType="Mandatory" Span="3" Orientation="Horizontal"/>&nbsp; &nbsp; &nbsp; &nbsp; </CarouselView.ItemsLayout>&nbsp; &nbsp; &nbsp; &nbsp; <CarouselView.ItemTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Frame WidthRequest="{Binding Source={x:Reference contentPage}, Path=BindingContext.FrameWidth}" HeightRequest="{Binding Source={x:Reference contentPage}, Path=BindingContext.FrameHeight}" HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True"&nbsp; BackgroundColor="#4D2F4F4F" BorderColor="#294145">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <StackLayout HorizontalOptions="FillAndExpand">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Grid.RowDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="Auto"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="Auto"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="Auto"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <RowDefinition Height="Auto"/>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid.RowDefinitions>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightGreen"></BoxView>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Text="111111" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Label Text="153" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Image Source="alllead.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Grid>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </StackLayout>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Frame>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </DataTemplate>&nbsp; &nbsp; &nbsp; &nbsp; </CarouselView.ItemTemplate></CarouselView>在共享项目 App.xaml.cs 中public static double ScreenWidth;public static double ScreenHeight;在 Android MainActivity.cs 中protected override void OnCreate(Bundle savedInstanceState){&nbsp; &nbsp;TabLayoutResource = Resource.Layout.Tabbar;&nbsp; &nbsp;ToolbarResource = Resource.Layout.Toolbar;&nbsp; &nbsp;base.OnCreate(savedInstanceState);&nbsp; &nbsp;Xamarin.Essentials.Platform.Init(this, savedInstanceState);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Forms.SetFlags("CollectionView_Experimental");&nbsp; &nbsp;global::Xamarin.Forms.Forms.Init(this, savedInstanceState);&nbsp; &nbsp;App.ScreenWidth = Resources.DisplayMetrics.WidthPixels/Resources.DisplayMetrics.Density;&nbsp;&nbsp; &nbsp;App.ScreenHeight =Resources.DisplayMetrics.HeightPixels/Resources.DisplayMetrics.Density;&nbsp;&nbsp; &nbsp;LoadApplication(new App());}在 iOS 中public override bool FinishedLaunching(UIApplication app, NSDictionary options){&nbsp; &nbsp; //...&nbsp; &nbsp; App.ScreenWidth = UIScreen.MainScreen.Bounds.Width;&nbsp; &nbsp; App.ScreenHeight = UIScreen.MainScreen.Bounds.Height;&nbsp; &nbsp; //...}在代码隐藏或 ViewModel 中public double FrameHeight { get; private set; }public double FrameWidth { get; private set; }//...FrameHeight = App.ScreenHeight/3.0;FrameWidth = App.ScreenWidth/2.0;