Xamarin.forms列表的轮播视图
[英]Xamarin.forms list of list for carousal view
问题描述
I have a xamarin.forms app which uses a carousal view.My carousal view have 6 items per view. 
我有一个xamarin.forms应用程序，该应用程序使用轮播视图。我的轮播视图每个视图有6个项目。 But now it shows one item per view. 但是现在，每个视图只显示一项。 I know the problem is I need to create a List of List .But I am stuck at this. 我知道问题是我需要创建一个列表列表 。但是我对此感到困惑。
My expected output of carousal view is like this. 我对预期效果的预期输出是这样的。
But what I am getting now is like this 但是我现在得到的是这样的
My orginal list that contains data is like this. 我包含数据的原始列表是这样的。
ObservableCollection<SECHomescreenData> resultObjForSEC = callForSECtilesScreen.APICallResult<ObservableCollection<SECHomescreenData>>();
my SECHomescreenData. 我的SECHomescreenData。
public partial class SECHomescreenData
{
public string Status { get; set; }
public string Countered { get; set; }
}
When I bind this list to my carousal view,It will only shows one item per view.What I am trying to achieve is fill the data into 6 items of carousal and if there is 7 th item , go to the next page of carousal view. 当我将此列表绑定到我的carousal视图时，每个视图仅显示一个项目。我想要实现的是将数据填充到6个carousal项目中，如果有第7个项目，请转到carousal视图的下一页。 So how can I achieve this? 那么我该如何实现呢？ If it requires list of list, how can I do it? 如果需要列表清单，该怎么办？ Any help is appreciated. 任何帮助表示赞赏。
My XAML. 我的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: I asked this question before. PS：我之前问过这个问题。 But there are some changes. 但是有一些变化。
1 个解决方案
解决方案1
0 已采纳 2019-08-26 07:15:03
Actually , you don'r need to use List of List . 实际上，您不需要使用List of List 。 Set the size of each Frame(width equals 1/2 of screen width and height equals 1/3 height of screen) . 设置每个Frame的大小（宽度等于屏幕宽度的1/2，高度等于屏幕高度的1/3）。 And set the prpoerty Span="3" 并设置属性Span="3"
CarouselView is released after Xamarin.Forms 4.0 . 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>
in Share Project App.xaml.cs 在Share Project App.xaml.cs中
public static double ScreenWidth;
public static double ScreenHeight;
in Android MainActivity.cs 在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());
}
in iOS 在iOS中
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
//...
App.ScreenWidth = UIScreen.MainScreen.Bounds.Width;
App.ScreenHeight = UIScreen.MainScreen.Bounds.Height;
//...
}
in Code Behind or ViewModel 在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;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
列表视图中的复选框-Xamarin.Forms - Checkboxes inside a list view - Xamarin.Forms
Xamarin.Forms 随机列表 - Xamarin.Forms Random List
如何在xamarin.forms中隐藏列表视图的空行 - How to hide the empty rows of a list view in xamarin.forms
如何在Xamarin.Forms列表视图下添加按钮 - How to add buttons underneath a Xamarin.Forms list view
如何在 Xamarin.Forms 的列表视图中获取所选项目的坐标？ - How to get coordinates of the selected item in a list view in Xamarin.Forms?
Xamarin.Forms列表视图，带有简单的主文本/详细文本 - Xamarin.Forms List view with simple primary text / detail text
列表视图在Xamarin.forms中不包含“ ItemsSource”的定义？ - List view does not contain a definition for 'ItemsSource' in Xamarin.forms?
Xamarin.forms xaml中的列表中的列表 - List within List in Xamarin.forms xaml
Xamarin.Forms中GridView中的动态列表 - a dynamic list in a GridView in Xamarin.Forms
显示列表Xamarin.Forms上的数据 - Display data that is on the List Xamarin.Forms
相关标签