Xamarin forms. CarousalView with multiple Items

0
votes

I have a xamarin.forms app in which I use a CarouselView.There is 6 Frames inside that carousal view ItemTemplate . Each frame is intend to load diffrent data. What I Have done is look like this.

First screen of CarouselView Second Screen of CarouselView

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.

First Pageof CarouselView enter image description here

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. Any help is appreciated

Code Portion

My 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

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? Any help is appreciated.

1
xamarinxamarin.forms

1 Answers

1
votes

You need to create a nested List like this: 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.

1. Create a Class for holding a List of LeadList:

public class LeadListGroup : ObservableCollection<LeadList>

Then add a maximum of 6 LeadLists to each LeadListGroup. If you have 7 LeadLists, it will look like this:

> GroupedLeadList
    > LeadList 1
    > LeadList 2
    > LeadList 3
    > LeadList 4
    > LeadList 5
    > LeadList 6
> GroupedLeadList
    > LeadList 7

2. Now create a List of 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.

Bind GroupedLeadListVariable to your CarouselView and you should be fine!