Xamarin形式。 具有多个项目的CarousalView
[英]Xamarin forms. CarousalView with multiple Items
问题描述
I have a xamarin.forms app in which I use a CarouselView.There is 6 Frames inside that carousal view ItemTemplate . 
我有一个xamarin.forms应用程序，其中我使用CarouselView。那个旋转视图ViewItemTemplate中有6个框架。 Each frame is intend to load diffrent data. 每个帧都打算加载不同的数据。 What I Have done is look like this. 我所做的就是这样。
As you can see the repetition of data in first page and second page. 如您所见，第一页和第二页中的数据重复。 What I am trying to achieve in First page and second page is like this. 我想要在第一页和第二页中实现的目标是这样的。
My Intention is When the items (ie; "All leads, Open leads etc.") is more than six, the next item should be like in the last picture ie; 我的意图是当项目（即“所有潜在客户，未解决潜在客户等”）超过六个时，下一个项目应类似于上一张图片，即： in the second page of carousal View.Somehow I cant achieve this.The problem I think is with the Itemsource setting and binding. 在carousal View的第二页中。以某种方式我无法实现。我认为问题出在Itemsource设置和绑定上。 Any help is appreciated 任何帮助表示赞赏
Code Portion 代码部分
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>
My Xaml.cs 我的Xaml.cs
public List<LeadList> TaskList = new List<LeadList>()
{
new LeadList()
{
Category = "All Leads"
},
new LeadList()
{
Category = "Open Leads"
},
new LeadList()
{
Category = "Call Back Later"
},
new LeadList()
{
Category = "Appoinment Scheduled"
},
new LeadList()
{
Category = "Closed"
},
new LeadList()
{
Category = "Referral Leads"
},
new LeadList()
{
Category = "Approved Leads"
}
};
this data I set as Itemsource for the CarousalView.So what change should I do to achieve the expected screen? 我将这些数据设置为CarousalView的Itemsource。那么，应该做些什么更改才能获得预期的屏幕？ Any help is appreciated. 任何帮助表示赞赏。
1 个解决方案
解决方案1
1 2019-08-16 12:58:43
You need to create a nested List like this: List<List<LeadList>> 您需要创建一个像这样的嵌套列表： List<List<LeadList>>
The inner List will be a List of LeadLists. 内部列表将是潜在顾客列表。 The outer List is a List of a List with a maximum of 6 LeadLists. 外部列表是列表的列表，最多包含6个LeadList。
1. Create a Class for holding a List of LeadList : 1.创建一个用于保存LeadList列表的LeadList ：
public class LeadListGroup : ObservableCollection<LeadList>
Then add a maximum of 6 LeadLists to each LeadListGroup. 然后向每个LeadListGroup中最多添加6个LeadList。 If you have 7 LeadLists, it will look like this: 如果您有7个LeadList，它将看起来像这样：
> GroupedLeadList
> LeadList 1
> LeadList 2
> LeadList 3
> LeadList 4
> LeadList 5
> LeadList 6
> GroupedLeadList
> LeadList 7
2. Now create a List of GroupedLeadList : 2.现在创建一个GroupedLeadList列表：
ObservableCollection<GroupedLeadList> GroupedLeadListVariable
GroupedLeadListVariable should now contain 2 objects of GroupedLeadList , the first contains 6 LeadList objects and the second contains 1 LeadList object. GroupedLeadListVariable现在应该包含的2个对象GroupedLeadList ，第一包含6个LeadList对象和第二个包含1个LeadList对象。
Bind GroupedLeadListVariable to your CarouselView and you should be fine! 绑定GroupedLeadListVariable到您的CarouselView，就可以了！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.