Xamarin listview image bind

Issue

I use realmdb in my project and I store the data that the user added to the basket in the local memory. But I have a problem. One of the data I have stored is image. I can show all data in listview, but I cannot show the image in listview. Why is the image not showing in listview? How can I show the image

With this code block, I save the data to realm db.

var realmDB = Realm.GetInstance();
            var myOrderRealm = realmDB.All<OrderOnRealm>().ToList();

            var maxOrderId = 0;
            if (myOrderRealm.Count != 0)
            {
                maxOrderId = myOrderRealm.Max(m => m.OrderId) + 1;
            }
            var Order = new OrderOnRealm
            {
                OrderId = maxOrderId,
                OrderImage = Convert.ToString(imgImage.Source),
                OrderName = lblName.Text,
                OrderCount = lblStepperValue.Text,
                OrderDetail = edtDetail.Text,
                OrderPrice = lblPriceNormal.Text
            };
            realmDB.Write(() =>
            {
                realmDB.Add(Order);
            });
            var orderList = realmDB.All<OrderOnRealm>().ToList();

I also display the data in this listview.

<ListView x:Name="lstOrder" ItemTapped="lstOrder_ItemTapped" HasUnevenRows="True">

                    <ListView.ItemTemplate>

                        <DataTemplate>

                            <ViewCell>

                                <Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

                                    <Grid VerticalOptions="StartAndExpand" BackgroundColor="White" HorizontalOptions="FillAndExpand">

                                        <Grid.ColumnDefinitions>

                                            <ColumnDefinition Width="100"/>
                                            <ColumnDefinition/>

                                        </Grid.ColumnDefinitions>

                                        <Grid.RowDefinitions>

                                            <RowDefinition/>

                                        </Grid.RowDefinitions>

                                        <Grid Grid.Column="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">

                                            <Image Aspect="AspectFill" Source="{Binding OrderImage}"/>

                                        </Grid>

                                        <Grid Grid.Column="1" Padding="8">

                                            <Grid RowSpacing="20">

                                                <Grid.RowDefinitions>

                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                    <RowDefinition/>
                                                    <RowDefinition Height="1"/>
                                                    <RowDefinition/>

                                                </Grid.RowDefinitions>

                                                <Label Grid.Row="0" Text="{Binding OrderName}" FontAttributes="Bold" FontSize="18" TextColor="Black" VerticalTextAlignment="End"/>
                                                <Label Grid.Row="1" Text="{Binding OrderCount}" TextColor="Black" Opacity="0.8" FontSize="15"/>
                                                <Label Grid.Row="2" Text="{Binding OrderDetail}" HorizontalOptions="EndAndExpand" TextColor="Black" Opacity="0.8" VerticalTextAlignment="End" FontSize="12" LineBreakMode="TailTruncation"/>
                                                <BoxView Grid.Row="3" BackgroundColor="#ef7860" HorizontalOptions="EndAndExpand" WidthRequest="60"/>
                                                <Label Grid.Row="4" Text="{Binding OrderPrice}" HorizontalOptions="EndAndExpand" TextColor="Black" Opacity="0.8"/>

                                            </Grid>

                                        </Grid>

                                    </Grid>

                                </Grid>

                            </ViewCell>

                        </DataTemplate>

                    </ListView.ItemTemplate>

                </ListView>

And this is my model.

public class OrderOnRealm : RealmObject
{
    [PrimaryKey]
    public int OrderId { get; set; }
    public string OrderImage { get; set; }
    public string OrderName { get; set; }
    public string OrderCount { get; set; }
    public string OrderDetail { get; set; }
    public string OrderPrice { get; set; }
}

Thanks already for your help...

Solution

If you want to get image from Resource Drawable, then store image in Realm database, you can set image in drawable as AndroidResource.

Changing the following code, you will get the path like File:a11.jpg using following code.

 OrderImage = Convert.ToString(imgImage.Source), 

using OrderImage = (image1.Source as FileImageSource).File to get correct image source

This is my sample that you can take a look:

<Image
            x:Name="image1"
            HeightRequest="50"
            Source="a11.jpg"
            WidthRequest="50" />
        <Button
            x:Name="btnadd"
            Clicked="btnadd_Clicked"
            Text="add image " />

        <Button
            x:Name="btnload"
            Clicked="btnload_Clicked"
            Text="load image" />

        <ListView x:Name="listview1" HasUnevenRows="True">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout>
                            <Label Text="{Binding OrderName}" />
                            <Image
                                HeightRequest="50"
                                Source="{Binding OrderImage}"
                                WidthRequest="50" />
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

 public partial class Page32 : ContentPage
{
    public List<OrderOnRealm> orders { get; set; }
    public Page32()
    {
        InitializeComponent();
                        
    }

    private void btnadd_Clicked(object sender, EventArgs e)
    {
        var realmdb = Realm.GetInstance();

        var myOrderRealm = realmdb.All<OrderOnRealm>().ToList();

        var maxOrderId = 0;
        if (myOrderRealm.Count != 0)
        {
            maxOrderId = myOrderRealm.Max(m => m.OrderId) + 1;
        }
        OrderOnRealm item = new OrderOnRealm()
        {
            OrderId = maxOrderId, OrderName = "image " + maxOrderId, OrderImage = (image1.Source as FileImageSource).File
        
        };
        realmdb.Write(() => {
            realmdb.Add(item);
        
        } );
    }
    private void loaddata()
    {
        var realm = Realm.GetInstance();
        orders = realm.All<OrderOnRealm>().ToList();
        listview1.ItemsSource = orders;
    }

   
    private void btnload_Clicked(object sender, EventArgs e)
    {
        loaddata();
    }
}

Answered By - Cherry Bu - MSFT