Xamarin Forms Image not showing in listview

Question

I want to display a /!\ icon in my listview. Unfortunately, it's not showing up anywhere.

I am 100% positive it's in the right place in both the iOS and Android app. I have double checked that it is a Android resource (as per screenshot below)

The code used to initialize the image: alarmIcon = new Image { Source = "warning.png" };

After initialization I put it in an AlarmPageItem object which as an Image property. This gets added to the listview. I have checked that I matched the bindings with the AlarmPageItem properties. (The text does get shown).

I am at a loss why it wouldn't work...

Things I tried

Checked case of image and source declaration
Checked the build action and copy to output directory
Checked binding matching
Tried building to phone instead of xamarin live player
Checked image location

Code:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="OSIApp.Pages.AlarmPage"
         Title="Alarm Log">
<ContentPage.Content>
    <StackLayout>
        <ListView x:Name="listView" 
                  ItemTapped="OnItemTapped" >
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Orientation="Horizontal">
                            <StackLayout>
                                <Label x:Name="alarmTimeLabel"
                                       HorizontalOptions="Center"
                                       HorizontalTextAlignment="Center"
                                       Text="{Binding DateTime}"/>
                                <Image x:Name="alarmIconImage" 
                                       Source="{Binding AlarmImage}"/>
                            </StackLayout>
                            <Label x:Name="alarmTextLabel"
                                   FontSize="14"
                                   VerticalOptions="FillAndExpand"
                                   VerticalTextAlignment="Center"
                                   HorizontalOptions="FillAndExpand"
                                   FontFamily="Avenir Next"
                                   FontAttributes="Bold"
                                   Text="{Binding AlarmText}"/>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</ContentPage.Content>

    public partial class AlarmPage : ContentPage
{
    private List<AlarmPageItem> listViewItems;

    private Image alarmIcon;

    public AlarmPage ()
    {
        listViewItems = new List<AlarmPageItem>();
        alarmIcon = new Image { Source = "warning.png" };
        PopulateList();

        InitializeComponent();

        listView.ItemsSource = listViewItems;
    }

    private void OnItemTapped(object sender, ItemTappedEventArgs e)
    {
        if (e == null) return; // has been set to null, do not 'process' tapped event
        Debug.WriteLine("Tapped: " + e.Item);
        ((ListView)sender).SelectedItem = null; // de-select the row
    }

    private void PopulateList()
    {


        listViewItems.Add(new AlarmPageItem() {AlarmImage = alarmIcon, AlarmText = "The front is too heavy", DateTime = DateTime.Now.ToShortTimeString()});
    }
}

Why don't you display the whole code you implemented for the ListView? It's easier to find where the issue might be. — pinedax

pinedax pinedax · Accepted Answer · 2018-03-30T01:57:23

You are binding as "Source" of your Image in the XAML an Image object you are creating in your code behind.

Update your AlarmPageItem class by making the AlarmImage property either an ImageSource or just a simple string.

Something like:

class AlarmPageItem
{
    public string AlarmImage { get; set; }

    public string AlarmText { get; set; }

    //Just a suggestion: Change this property name for something different as it 
    //can create some confusion.
    public DateTime DateTime { get; set; }

     ...

    // Add any other properties your class might have.
}

Once the above is updated just change your code to set the name of the image in the PopulateList method

private void PopulateList()
{
    listViewItems.Add(new AlarmPageItem() {AlarmImage = "warning.png", AlarmText = "The front is too heavy", DateTime = DateTime.Now.ToShortTimeString()});
}

Hope this helps.-

Xamarin Forms Image not showing in listview

1 Answers