Xamarin.forms列表的輪播視圖

Question

我有一個xamarin.forms應用程序，該應用程序使用輪播視圖。我的輪播視圖每個視圖有6個項目。 但是現在，每個視圖只顯示一項。 我知道問題是我需要創建一個列表列表 。但是我對此感到困惑。

我對預期效果的預期輸出是這樣的。

但是我現在得到的是這樣的

我包含數據的原始列表是這樣的。

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

我的SECHomescreenData。

  public partial class SECHomescreenData
   {        
       public string Status { get; set; }    
       public string Countered { get; set; }
   }

當我將此列表綁定到我的carousal視圖時，每個視圖僅顯示一個項目。我想要實現的是將數據填充到6個carousal項目中，如果有第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>

PS：我之前問過這個問題。 但是有一些變化。

Answer 1

實際上，您不需要使用List of List 。 設置每個Frame的大小（寬度等於屏幕寬度的1/2，高度等於屏幕高度的1/3）。 並設置屬性Span="3"

Xamarin.Forms 4.0之后， CarouselView被發布。

<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">

<CarouselView  ItemsSource="{Binding MyItems}"  BackgroundColor="Transparent" HorizontalOptions="Center" VerticalOptions="Center">
        <CarouselView.ItemsLayout>
            <GridItemsLayout SnapPointsAlignment="Center"  SnapPointsType="Mandatory" Span="3" Orientation="Horizontal"/>
        </CarouselView.ItemsLayout>
        <CarouselView.ItemTemplate>
            <DataTemplate>
                <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"  BackgroundColor="#4D2F4F4F" BorderColor="#294145">

                    <StackLayout HorizontalOptions="FillAndExpand">
                        <Grid >
                            <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="111111" 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>
            </DataTemplate>
        </CarouselView.ItemTemplate>
</CarouselView>

在Share Project App.xaml.cs中

public static double ScreenWidth;
public static double ScreenHeight;

在Android MainActivity.cs中

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());
}

在iOS中

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

在Code Behind或ViewModel中

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

//...

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