Xamarin: ListView in Forms
We will summarize the controls (ListView) that is able to display lists in Xamarin.forms, we will explain some properties used.
How to use ListView
We will work in MainPage.xaml, we start by add this XAML code in MainPage.xaml as follows:
<``StackLayout``>
``<``ListView x:Name="MyListView"/>
</``StackLayout``>
In MainPage.xaml.cs, we will add this C# code as follows:
1.``// iOS only, take a margin at the top
2.``this``.Padding = ``new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
3.
4.``// Generate a ListView
5.``// Create a list of 100 lines "item-0 ~ item-99"
6.``this``.MyListView.ItemsSource = Enumerable.Range(0, 100).Select(n => $"item-{n}");
And the result is:
https://cdn-images-1.medium.com/max/800/0*Cy6mdrejiyOTBsBz.JPG
Public property list of ListView
The number of properties of the ListView control is more than other controls, and there are things that are hard to understand so we will go out carefully. Also, unless otherwise noted in the code behind, we will write XAML after using the above.
Footer property
Gets or sets the string, binding, or view to be displayed at the bottom of the list view.
XAML:
<``StackLayout``>
``<``ListView x:Name="MyListView" Footer="This is Footer"/>
</``StackLayout``>
Result:
https://cdn-images-1.medium.com/max/800/0*hURA8l33tNzdfTxC.JPG
FooterTemplate property
Gets or sets the data template to use for formatting the data object displayed at the bottom of the list view.
If only the Footer property was set, only characters could be set. By using the FooterTemplate property you can change the way the footer is expressed.
XAML:
<``ListView x:Name="MyListView" Footer="This is Footer">
``<``ListView.FooterTemplate``>
``<``DataTemplate``>
``<``Label Text``=``"{Binding}" FontSize="30"/>
``</``DataTemplate``>
``</``ListView.FooterTemplate``>
</``ListView``>
Result:
https://cdn-images-1.medium.com/max/800/0*Zh5KO41TUO5WTJYL.JPG
GroupDisplayBinding Property ? IsGroupingEnabled Property
Gets or sets the binding used to display the group header.
You can group in the list by using the GroupDisplayBinding property, At the same time, we will set the IsGroupingEnabled property to True.
XAML in MainPage.xaml
<``ListView x:Name``=``"MyListView" IsGroupingEnabled``=``"True" GroupDisplayBinding``=``"{Binding SectionLabel}" />
C# Code-Behind in MainPage.xaml.cs
01.``public class GroupingItem : ObservableCollection<``string``>
02.``{
03.``public string SectionLabel { ``get``; set``; }
04.``}
05.``readonly ObservableCollection<GroupingItem> _items = ``new ObservableCollection<GroupingItem>();
06.``public MainPage()
07.``{
08.``InitializeComponent();
09.``
10.``// iOS only, take a margin at the top
11.``this``.Padding = ``new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
12.``// Generate a ListView
13.``// Create a list of 100 lines "item-0 ~ item-99"
14.``this``.MyListView.ItemsSource = Enumerable.Range(0, 100).Select(n => $"item-{n}");
15.``//Participants section created
16.``var item = ``new GroupingItem
17.``{
18.``SectionLabel = "Participants",
19.``};
20.``//Add each name to a section of a Participants
21.``item.Add("Hamida REBAI");
22.``item.Add("Rayen Trabelsi");
23.``item.Add("Mohamed trabelsi");
24.``_items.Add(item);
25.``
26.``//Topics section created
27.``item = ``new GroupingItem
28.``{
29.``SectionLabel = "Topics",
30.``};
31.``//Add a name to a Topic's section
32.``item.Add("ASP.NET Core 2.0");
33.``item.Add("Learning Cloud ``in Azure");
34.``item.Add("Introduce XAMARIN");
35.``_items.Add(item);
36.``//Set grouping item to ItemsSource of ListView
37.``MyListView.ItemsSource = _items;
38.``}
Result:
https://cdn-images-1.medium.com/max/800/0*qmQm7S_AQ7E_s8RW.JPG
GroupHeaderTemplate property
Gets or sets the DataTemplete of the group header.
The GroupDisplayBinding property could only represent the text of the header.
By using the GroupHeaderTemplate property you can change the representation of the value.
As a rule of how it feels the same as the FooterTemplate property.
Result:
https://cdn-images-1.medium.com/max/800/0*XIaJPranr859p51o.JPG
MainPage.xaml.cs is the same as the GroupDisplayBinding property part.
GroupShortNameBinding property
Gets or sets the binding of the name displayed in the grouped jump list.
The GroupShortNameBinding property can only be used on iOS. We can display what is grouping on the right side of the screen.
XAML:
<``ListView x:Name``=``"MyListView" IsGroupingEnabled``=``"True" GroupShortNameBinding =``"{Binding SectionLabel}" />
Result in Android but it's different in iOS
https://cdn-images-1.medium.com/max/800/0*QNbwFwdtqsSgantw.JPG
HasUnevenRows property
Gets or sets a Boolean value that indicates whether this ListView element has nonuniform rows.
HasUnevenRows property is a property that makes the height of list view non-uniform. The height is automatically set according to the contents of the list view.
XAML:
<``ListView x:Name``=``"MyListView" HasUnevenRows``=``"true"``/>
And C# Code-Behind
01.``InitializeComponent();
02.
03.``// iOS only, take a margin at the top
04.
05.``this``.Padding = ``new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0);
06.
07.``this``.MyListView.ItemsSource = ``new List<``string``>
08.
09.``{
10.
11.``"Xamarin Forms is based on the XAML / WPF model" ,
12.
13.``"MVVM divides an application into three layers:"``,
14.
15.``"The Model provides underlying data, sometimes involving file or web accesses."``,
16.
17.``"The ViewModel connects the Model and the View."``,
18.
19.``"It helps to manage the data" ,
20.
21.``"The View is the user interface or presentation layer, generally implemented in XAML"
22.
23.``};
Result:
https://cdn-images-1.medium.com/max/800/0*Exl5qtxoyWwJ94Ss.JPG
It seems that it is not reflected if it is only letters.
You can change the size of the cell dynamically. Android has been dynamically resized originally, but if Cell.ForceUpdateSize() you call it with this change, the size will be updated.
"Depending on the platform, the cost of treatment is high", in fact, it is slow to follow the update of the size when used on iOS.
Example:
Create a custom ViewCell for confirmation, the height of BoxView will change according to the slider. By calling Cell.ForceUpdateSize () according to the MeasureInvalidated event of the StackLayout root element, the cell size of the ListView is updated.