Xamarin Forms 4.0 (Collection View)
In this article, I will be explaining a new feature of Xamarin.Forms 4.0 - a new control called Collection View. This is an awesome control that can be used with different types of views, like horizontal list view, listing with 2 span and others.
Collection View is an example of listview for listing items. It improves inventory design and reduces complexity. Collection View control is very flexible.
Implementation
First, we have to create a project with the name CollectionViewApp.
Open VS2017 >> select file >> Create Project >> give the name to the project "CollectionViewApp". Then, set the path and press Enter.
Now we check the
xamarin forms version is updated or not if the package does not update so we
are updating package, these are the step for update package.
Firstly we select the
solution and right click o the solution and then select the Nuget package like
showing in this below screen.
Now if you want to use
the collection view in our project so you will make sure to initialize the in
(xamarin android) MainActivity.cs and (xamarin ios) AppDelegate.cs project.
if you want to update
an existing project to the Xamarin.Forms 4.0- NuGet (available via your
favorite NuGet package manager).
A Basic Layout
In Xamarin Forms 4.0
review, One of the biggest changes between ListView and CollectionView is the
removal of wrapping content in a ViewCell. This allows for significant gains to
performance.
Below is an example
layout. In this Example, we create a List of Store Items names in
your binding context and then bind to it in XAML:
Now Coding time:
<Collectionview backgroundcolor="#F9F9F9"
Emptyview="No items match your filter."
Horizontaloptions="Center" Itemssource="{Binding Stores}"
Margin="10" Verticaloptions="Center">
<Collectionview .itemslayout="">
<Griditemslayout orientation="Vertical" span="2">
</Griditemslayout></collectionview>
<Collectionview.Itemtemplate>
<Datatemplate>
<Stacklayout Padding="10">
<Frame Bordercolor="LightGray" cornerradius="15"
Hasshadow="True" Padding="5"></frame>
<Grid Columnspacing="0"
Margin="2" padding="5"
Rowspacing="0">
<Grid.RowDefinitions>
<Rowdefinition Height="Auto">
<Rowdefinition Height="130">
<Rowdefinition Height="Auto">
<Rowdefinition Height="Auto">
</Grid.RowDefinition>
<Image Aspect="AspectFit" Grid.Row="0"
Horizontaloptions="End"
Source="{StaticResource favorite}">
<Behaviors:viewtappedbuttonbehavior
Animationtype="Scale" Command="{Binding OnLoginCommand}">
</Behaviors:viewtappedbuttonbehavior></image>
</Image>
<Image Aspect="Fill" grid.row="1"
Source="{Binding ImageUrl}">
<Label Grid.row="2"
Horizontaltextalignment="Center"
Text="{Binding Title}"
Textcolor="#14B7F8"
Verticaloptions="CenterAndExpand"/>
<Label Fontattributes="Bold"
Grid.row="3" horizontaltextalignment="Center"
Text="{Binding Price, StringFormat='${0:N}'}}"
Verticaloptions="CenterAndExpand"/>
</grid>
</Stacklayout>
</Datatemplate>
</Collectionview>
</Collectionview>
and here is C# code adding the list items and show the list,
public List storelist;
public StorePage()
{
InitializeComponent();
BindingContext = new MonkeysViewModel();
storelist = new List();
storelist.Add(new Store() { Id = 1,
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png",
IsLike = true, Price = 21.00, Title = "Title" });
storelist.Add(new Store() { Id = 2,
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png",
IsLike = true, Price = 88.12, Title = "Title" });
storelist.Add(new Store() { Id = 3,
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png",
IsLike = true, Price = 65.21, Title = "Title" });
storelist.Add(new Store() { Id = 4,
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png",
IsLike = true, Price = 39.95, Title = "Title" });
storelist.Add(new Store() { Id = 5,
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png",
IsLike = true, Price = 958.99, Title = "Title" });
storelist.Add(new Store() { Id = 6,
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png",
IsLike = true, Price = 64.85, Title = "Title" });
storelist.Add(new Store() { Id = 7,
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png",
IsLike = true, Price = 2050.55, Title = "Title" });
storelist.Add(new Store() { Id = 8,
ImageUrl = "Allbirds_W_Wool_Runner_Kotare_GREY_ANGLE_0f3bfe63-ac7d-4106-9acf-d26f8414ac53_600x600.png",
IsLike = true, Price = 120500.00, Title = "Title" });
CV.ItemsSource = storelist;
}
and this is model code
for add and set the property,
public class Store{public int Id { get; set; }public bool IsLike { get; set; }public string ImageUrl { get; set; }public string Title { get; set; }public double Price { get; set; }public string Favorite { get; set; } = "favorite.png";}
Now you have a simple list, this new CollectionView it is almost like the ListView you’ve used in the older xamarin forms. Let’s look now at what else it can we do.
It’s so Empty in Here
Lastly, a common
scenario many developers may face is what to display when the ItemsSource is
empty. With the CollectionView you can now set any content to the EmptyView of
your list for just this purpose. With the XAML below, the string “No items
currently exist!” will be shown inside of the CollectionView when the list of
people is empty,
<CollectionView.EmptyView>
<Label Text="No items match your filter."/>
</CollectionView.EmptyView>
OR use direct in
<CollectionView ItemsSource="{Binding Stores}"
VerticalOptions="Center"
HorizontalOptions="Center"
BackgroundColor="#F9F9F9"
EmptyView="No items match your filter."
Margin="10">
You can customize this
view you want to like, including interactive content and supporting bindings.
and happy
xamarin Coding.....
