Xamarin Forms ListView with F# part 2: Custom cell

As promised, this post is part 2 of the ListView series. If you missed part 1, I covered setting up a Xamarin Forms ListView with a data source as per the Xamarin guide. In this post, I’ll cover the next page in the Xamarin guide with a custom cell.

Getting started: add the xaml

Let’s get to it, create another forms project with F#, for this post I’ll use the name CustomSimpleList. Add the xaml file (see my part 1 if you’ve forgotten this), I’ll name this CustomListView.xaml and add the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<contentpage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:class="CustomSimpleList.CustomCellPage">
    <contentpage.content>
        <listview x:name="listView">
            <listview.itemtemplate>
                <datatemplate>
                    <viewcell>
                        <stacklayout backgroundcolor="#eee" orientation="Vertical">
                            <stacklayout orientation="Horizontal">
                                <label text="{Binding Title}" textcolor="#f35e20">
                                </label><label text="{Binding Rating}" horizontaloptions="EndAndExpand" textcolor="#503026">
                            </label></stacklayout>
                        </stacklayout>
                    </viewcell>
                </datatemplate>
            </listview.itemtemplate>
        </listview>
    </contentpage.content>
</contentpage>

Be sure to update the following items:

• Class to have the correct namespace and name
• Remove the line: 

1

<image source="{Binding image}" />

(details why are at the bottom).

Create some Types

With the xaml created, it’s time to create some types. As in the last post open, the fs file that was automatically created. For the main type I’ll use the name CustomCellPage, so update app to load this as main page (don’t forget to open the required libraries): inherit Application(MainPage = CustomCellPage()) and then above that line add the type:

1
2
3
4
5
6
7
8
9
10
11
12

type CustomCellPage() =
    inherit ContentPage() 

    let _ = base.LoadFromXaml(typeof<customcellpage>)
    let movies = [
        {Title = "Zootopia (2016)"; Rating = "98%"} 
        {Title = "Love & Friendship (2016)"; Rating = "99%"}
        {Title = "The Jungle Book (2016)"; Rating = "94%"}
        {Title = "Hunt for the Wilderpeople (2016)"; Rating = "98%"}
        {Title = "Finding Dory (2016)"; Rating = "94%"} ]
    let movieList = base.FindByName<listview>("listView")
    do movieList.ItemsSource <- ((movies |> List.toSeq) :> Collections.IEnumerable)

This should look familiar as the only thing that has changed is the record type.

Make it compile

To finish this small example, add the last required type above the CustomCellPage:

1
2
3
4

type Movie = {
    Title: string
    Rating: string
}

With that last type added everything should compile and run now. Voila!

But where are my images

So the original guide from Xamarin had images, what’s up? Well, there’s a bug in F# with forms and Android (I’m not sure if this affects iOS. If some has tried it out I would love to know). I have filled a bug with xamarin for this and will add an update when I get one.

What’s actually broken

Following this guide using either local images or embedded images an exception is thrown when trying to load the image from the image source. There is an example available on github if you want the details, it uses local images. For embedded images, I also added the debugging code and verified that images are in the package. Additionally, I haven’t found a work around for this (maybe writing some custom UI for forms). Again leave me a comment if you have found a workaround or also encounter this bug. That’s a wrap folks!