Xamarin 列表视图图像绑定

Question

我在我的项目中使用realmdb，我将用户添加到购物车的数据存储在本地内存中。但我有一个问题。我存储的数据之一是图像。我可以在列表视图中显示所有数据，但我无法在列表视图中显示图像。为什么图像没有显示在列表视图中？如何显示图像

使用此代码块，我将数据保存到领域数据库。

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();

我也在这个列表视图中显示数据。

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

这是我的模型。

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; }
}

已经感谢您的帮助...

Answer 1

如果想从Resource Drawable中获取图片，然后将图片存储到Realm数据库中，可以将drawable中的图片设置为AndroidResource。

更改以下代码，您将使用以下代码获得类似 File:a11.jpg 的路径。

 OrderImage = Convert.ToString(imgImage.Source),

使用OrderImage = (image1.Source as FileImageSource).File获取正确的图像源

这是我的示例，您可以看看：

<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();
    }
}

Xamarin 列表视图图像绑定

Xamarin listview image bind

xamarin.ios

xamarin.android

xamarin

xamarin.forms