Anand
Reputation: 1959
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. 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.
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. So how can I achieve this? If it requires list of list, how can I do it? Any help is appreciated.
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>
PS: I asked this question before. But there are some changes.
Upvotes: 1
Views: 112
Answers (1)
Lucas Zhang
Reputation: 18861
Actually , you don'r need to use List of List . Set the size of each Frame(width equals 1/2 of screen width and height equals 1/3 height of screen) . And set the prpoerty
Span="3"
CarouselView is released after 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">
<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
public static double ScreenWidth;
public static double ScreenHeight;
in 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
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
public double FrameHeight { get; private set; }
public double FrameWidth { get; private set; }
//...
FrameHeight = App.ScreenHeight/3.0;
FrameWidth = App.ScreenWidth/2.0;
Upvotes: 0
Related Questions
- ToList in MainViewModel
- xamarin forms - populate list view that is inside collection view
- Xamarin listview of List<List>
- Xamarin Forms ViewModel with List in List
- Xamarin.Forms Working with ListView from existing List of objects
- Xamarin forms. CarousalView with multiple Items
- Xamarin Forms - how to display/Bind List in ListView?
- Xamarin.Forms Listview
- Xamarin Forms dynamic list view
- List within List in Xamarin.forms xaml