C# Xamarin.forms用于carousal视图的列表列表

我有一个xamarin.forms应用程序，它使用carousal视图。我的carousal视图每个视图有6个项目。但现在它在每个视图中显示一个项目。我知道问题是我需要创建一个列表，但是我被困在这个问题上了

我对carousal view的预期输出如下。

  <controls:CarouselViewControl IndicatorsTintColor="LightBlue"  ArrowsTintColor="White"   CurrentPageIndicatorTintColor="White"  ItemsSource="{Binding SECList}" ShowIndicators="True" AnimateTransition="True" ShowArrows="True"  Orientation="Horizontal"  InterPageSpacing="10"   VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
            <controls:CarouselViewControl.ItemTemplate>
                <DataTemplate>
         <Grid RowSpacing="5" ColumnSpacing="5" >                   
            <Grid.RowDefinitions >
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="0" Grid.Row="0" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145"
                    >                       
                </Frame.GestureRecognizers>  
                    <StackLayout HorizontalOptions="FillAndExpand">
                        <Grid RowSpacing="3">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightGreen"></BoxView>
                            <Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >                                      
                            </Label>
                            <Label Text="153" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0" >                                      
                            </Label>
                            <Image Source="alllead.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
                        </Grid>
                    </StackLayout>
            </Frame>
            <Frame HasShadow="False" HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="0" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >
                <Grid RowSpacing="3">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightPink"></BoxView>
                    <Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >                              
                    </Label>
                    <Label Text="123" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">                             
                    </Label>
                    <Image Source="openlead.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
                </Grid>
            </Frame>
            <Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="0" Grid.Row="1" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >           
                    <StackLayout HorizontalOptions="FillAndExpand">
                        <Grid RowSpacing="3">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightSalmon"></BoxView>
                            <Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >                                     
                            </Label>
                            <Label Text="153" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">                                     
                            </Label>
                            <Image Source="closedlead.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
                        </Grid>
                    </StackLayout>
            </Frame>
            <Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="1" Grid.Row="1" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >                    
                    <StackLayout HorizontalOptions="FillAndExpand">
                        <Grid RowSpacing="3">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightGoldenrodYellow"></BoxView>
                            <Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >                                   
                            </Label>
                            <Label Text="18" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">                                    
                            </Label>
                            <Image Source="callback.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
                        </Grid>
                    </StackLayout>
            </Frame>
            <Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="0" Grid.Row="2" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >                     
                    <StackLayout HorizontalOptions="FillAndExpand">
                        <Grid RowSpacing="3">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightSeaGreen"></BoxView>
                            <Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >                                      
                            </Label>
                            <Label Text="169" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">                                     
                            </Label>
                            <Image Source="referredby.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
                        </Grid>
                    </StackLayout>                     
            </Frame>
            <Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="1" Grid.Row="2" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >                   
                    <StackLayout HorizontalOptions="FillAndExpand">
                        <Grid RowSpacing="3">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightCyan"></BoxView>
                            <Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >                                       
                            </Label>
                            <Label Text="142" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">                                      
                            </Label>
                            <Image Source="appoinments.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
                        </Grid>
                    </StackLayout>                     
            </Frame>
         </Grid>
                </DataTemplate>
            </controls:CarouselViewControl.ItemTemplate>
        </controls:CarouselViewControl>

但我现在得到的是这样的

包含数据的原始列表如下所示

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

当我将此列表绑定到我的carousal视图时，每个视图只显示一个项目。我试图实现的是将数据填充到carousal的6个项目中，如果有第7个项目，则转到carousal视图的下一页。那么我如何才能做到这一点呢？如果它需要列表，我怎么做？感谢您的帮助

我的XAML。

  <controls:CarouselViewControl IndicatorsTintColor="LightBlue"  ArrowsTintColor="White"   CurrentPageIndicatorTintColor="White"  ItemsSource="{Binding SECList}" ShowIndicators="True" AnimateTransition="True" ShowArrows="True"  Orientation="Horizontal"  InterPageSpacing="10"   VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" >
            <controls:CarouselViewControl.ItemTemplate>
                <DataTemplate>
         <Grid RowSpacing="5" ColumnSpacing="5" >                   
            <Grid.RowDefinitions >
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="0" Grid.Row="0" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145"
                    >                       
                </Frame.GestureRecognizers>  
                    <StackLayout HorizontalOptions="FillAndExpand">
                        <Grid RowSpacing="3">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightGreen"></BoxView>
                            <Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >                                      
                            </Label>
                            <Label Text="153" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0" >                                      
                            </Label>
                            <Image Source="alllead.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
                        </Grid>
                    </StackLayout>
            </Frame>
            <Frame HasShadow="False" HorizontalOptions="FillAndExpand" Grid.Column="1" Grid.Row="0" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >
                <Grid RowSpacing="3">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightPink"></BoxView>
                    <Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >                              
                    </Label>
                    <Label Text="123" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">                             
                    </Label>
                    <Image Source="openlead.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
                </Grid>
            </Frame>
            <Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="0" Grid.Row="1" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >           
                    <StackLayout HorizontalOptions="FillAndExpand">
                        <Grid RowSpacing="3">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightSalmon"></BoxView>
                            <Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >                                     
                            </Label>
                            <Label Text="153" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">                                     
                            </Label>
                            <Image Source="closedlead.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
                        </Grid>
                    </StackLayout>
            </Frame>
            <Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="1" Grid.Row="1" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >                    
                    <StackLayout HorizontalOptions="FillAndExpand">
                        <Grid RowSpacing="3">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightGoldenrodYellow"></BoxView>
                            <Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >                                   
                            </Label>
                            <Label Text="18" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">                                    
                            </Label>
                            <Image Source="callback.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
                        </Grid>
                    </StackLayout>
            </Frame>
            <Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="0" Grid.Row="2" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >                     
                    <StackLayout HorizontalOptions="FillAndExpand">
                        <Grid RowSpacing="3">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightSeaGreen"></BoxView>
                            <Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >                                      
                            </Label>
                            <Label Text="169" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">                                     
                            </Label>
                            <Image Source="referredby.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
                        </Grid>
                    </StackLayout>                     
            </Frame>
            <Frame HasShadow="False" HorizontalOptions="FillAndExpand" IsClippedToBounds="True" Grid.Column="1" Grid.Row="2" CornerRadius="7" BackgroundColor="#4D2F4F4F" BorderColor="#294145" >                   
                    <StackLayout HorizontalOptions="FillAndExpand">
                        <Grid RowSpacing="3">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <BoxView Grid.Row="0" Margin="2,2,10,2" HeightRequest="1" Color="LightCyan"></BoxView>
                            <Label Text="{Binding Category}" Grid.Row="1" HorizontalOptions="StartAndExpand" FontSize="Small" TextColor="LightGray" Margin="2,0,0,0" >                                       
                            </Label>
                            <Label Text="142" TextColor="White" HorizontalOptions="StartAndExpand" FontSize="Medium" Grid.Row="2" Margin="2,0,0,0">                                      
                            </Label>
                            <Image Source="appoinments.png" HorizontalOptions="EndAndExpand" HeightRequest="30" Grid.Row="3" Margin="0,0,5,0"></Image>
                        </Grid>
                    </StackLayout>                     
            </Frame>
         </Grid>
                </DataTemplate>
            </controls:CarouselViewControl.ItemTemplate>
        </controls:CarouselViewControl>

---

附：我以前问过这个问题。但是有一些变化。

实际上，您不需要使用列表列表。设置每个框架的大小（宽度等于屏幕宽度的1/2，高度等于屏幕高度的1/3）。并设置参数

Span=“3”

CarouselView

在Xamarin.Forms 4.0之后发布

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Name="contentPage"   // set the name of the contentpage
             x:Class="xxx.MainPage">

在Android MainActivity.cs中 在iOS中 在代码隐藏或视图模型中

---

实际上，您不需要使用列表列表。设置每个框架的大小（宽度等于屏幕宽度的1/2，高度等于屏幕高度的1/3）。并设置参数

Span=“3”

CarouselView

在Xamarin.Forms 4.0之后发布

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Name="contentPage"   // set the name of the contentpage
             x:Class="xxx.MainPage">

在Android MainActivity.cs中 在iOS中 在代码隐藏或视图模型中

---

你的问题有点模糊，你能直观地告诉我你想要什么吗？@G.hakim ok bro.。@G.hakim bro.请检查我的更新问题你的问题有点模糊，你能直观地告诉我你想要什么吗？@G.hakim ok bro.。@G.hakim bro.请检查我的更新问题嗨，谢谢你的回复。我的问题不是宽度或高度。。这是关于如何设置如图所示的数据。您可以尝试我的解决方案。它会在你的屏幕上显示6个项目。但是第7个项目呢？它会显示在carousal的第二页吗？是的，你可以先试试。根据你的需要设置框架的宽度和高度。嗨，谢谢你的回复。我的问题不是宽度或高度。。这是关于如何设置如图所示的数据。您可以尝试我的解决方案。它会在你的屏幕上显示6个项目。但是第7个项目呢？会吗

public static double ScreenWidth;
public static double ScreenHeight;

protected override void OnCreate(Bundle savedInstanceState)
{
   TabLayoutResource = Resource.Layout.Tabbar;
   ToolbarResource = Resource.Layout.Toolbar;

   base.OnCreate(savedInstanceState);

   Xamarin.Essentials.Platform.Init(this, savedInstanceState);
            
   Forms.SetFlags("CollectionView_Experimental");
   global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

   App.ScreenWidth = Resources.DisplayMetrics.WidthPixels/Resources.DisplayMetrics.Density; 
   App.ScreenHeight =Resources.DisplayMetrics.HeightPixels/Resources.DisplayMetrics.Density; 

   LoadApplication(new App());
}

public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
    //...
    App.ScreenWidth = UIScreen.MainScreen.Bounds.Width;
    App.ScreenHeight = UIScreen.MainScreen.Bounds.Height;
    //...
}

public double FrameHeight { get; private set; }
public double FrameWidth { get; private set; }

//...

FrameHeight = App.ScreenHeight/3.0;
FrameWidth = App.ScreenWidth/2.0;