Tuesday, September 22, 2020

In this blog post I’ll show you a simple way to present data in a simple interactive way.

First I’ll create a simple list view in the Content Page., then in order to populate this list with data I’ll create a list of names in the code behind as well.

<ListView x:Name="listView" />
var kidNames = new List<string>
            {
                "Collin",
                "Sara",
                "Renner"
            };

ListView control provides properties to modify the separator styling: SeparatorVisibility and SeparatorColor.

<ListView x:Name="listView" SeparatorVisibility="None"/>
<ListView x:Name="listView" SeparatorColor="Red"/>

This is a very basic list so far but in most real world applications we will be displaying complex objects.

First I’ll to create a kid class to represent a kid. I’ll create this new class inside a new Models Folder

The two built in most often used templates are TextCell and ImageCell

To use TextCell you need to provide binding Text and Detail properties, we are going to set the Text to the Kid’s Name and the Detail  to Kid’s Age.

<ListView x:Name="listView">
    <ListView.ItemTemplate>
         <DataTemplate>
                <TextCell 
                    Text="{Binding Name}" 
                    Detail="{Binding Age}" 
                    TextColor="Navy" 
                    DetailColor="Black"/>
         </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

To use ImageCell built in template  we need to provide and extra property ImageSource which should be a url for an actual image

<ListView x:Name="listView">
    <ListView.ItemTemplate>
         <DataTemplate>
                <ImageCell 
                    Text="{Binding Name}" 
                    Detail="{Binding Age}" 
                    TextColor="Navy" 
                    DetailColor="Black"
                    ImageSource="{Binding ImageUrl}"/>
         </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

In the next post I’ll continue demonstrating Xamarin Forms ListView functionality, I’ll go over Custom Cell, Grouping Items Handling Selections and Context Actions