Xamarin Forms Bind Image from Resources/Drawable folder

Question

I have a problem. What I am trying to do is bind an ImageSource from a ViewModel. The image file name is called ledstrip.png and is located in the Resources/Drawable folder. I am using the following xaml:

<ListView ItemsSource="{Binding knownDeviceList}" SelectionMode="None" RowHeight="90">
    <ListView.ItemTemplate>
        <DataTemplate>
            <ViewCell>
                <AbsoluteLayout HeightRequest="70" Margin="20,20,20,0">
                    <StackLayout Opacity="0.3" BackgroundColor="White"
                                AbsoluteLayout.LayoutBounds="0,0,1,1" 
                                AbsoluteLayout.LayoutFlags="All" />
                    <StackLayout AbsoluteLayout.LayoutBounds="0,0,1,1" 
                                AbsoluteLayout.LayoutFlags="All">
                        <Grid RowSpacing="0">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="35" />
                                <RowDefinition Height="35" />
                            </Grid.RowDefinitions>

                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="70" />
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="70" />
                            </Grid.ColumnDefinitions>

                            <Image Source="{Binding DeviceImage}" Grid.RowSpan="2" Grid.Column="0" Margin="5" />

                        </Grid>
                    </StackLayout>
                </AbsoluteLayout>
            </ViewCell>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

And in my ViewModel I have the following code:

public class VM_DeviceList : BindableObject
{
    private ObservableCollection<DisplayedDevice> _knownDeviceList;
    public ObservableCollection<DisplayedDevice> knownDeviceList
    {
        get
        {
            return _knownDeviceList;
        }
        set
        {
            if (_knownDeviceList != value)
            {
                _knownDeviceList = value;
                OnPropertyChanged();
            }
        }
    }

    public VM_DeviceList()
    {
        knownDeviceList = new ObservableCollection<DisplayedDevice>();
        MyHandler();
    }

    private async Task LoadKnownDeviceList()
    {
        foreach (KnownDevice device in App.KnownDeviceList)
        {
            DisplayedDevice displayedDevice = new DisplayedDevice();

            displayedDevice.Id = device.Id;
            displayedDevice.Name = device.Name;

            switch (device.Type)
            {
                case "ledstrip":
                    displayedDevice.DeviceImage = "ledstrip.png";
                    break;
                case "triangle":
                    displayedDevice.DeviceImage = "triangle.png";
                    break;
            }

            knownDeviceList.Add(displayedDevice);
        }
    }

    public Task MyHandler()
    {
        return LoadKnownDeviceList();
    }

    public class DisplayedDevice
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string DeviceImage { get; set; }
    }
}

The problem is that when I type "ledstrip.png" in the xaml ImageSource, the image gets displayed, but when I bind it like the way I show above, no image appears on the screen!

What am I doing wrong and how can I fix this?

Answer 1

Since you are altering the DisplayImage on a separate for loop. You have to Notify the UI that the DisplayImage property value has been changed.

Use INotifyPropertyChanged for notifying that DisplayImage property of DisplayedDevice class has been changed to the UI.

public class DisplayedDevice : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    private string deviceImage;

    public int Id { get; set; }

    public string Name { get; set; }

    public string DeviceImage
    {
        get
        {
            return deviceImage;
        }

        set
        {
            deviceImage = value;
            OnPropertyChanged();
        }
    }
}