Xamarin表单图像未在列表视图中显示

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

1. Checked case of image and source declaration
2. Checked the build action and copy to output directory
3. Checked binding matching
4. Tried building to phone instead of xamarin live player
5. 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()});
    }
}

Answer 1

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.-