Xamarin CarouselView не отображает изображения, когда я привязываю объект CarouselView к ImageSource - PullRequest
0 голосов
/ 06 августа 2020

Мне удалось использовать CarouselView для отображения изображений, привязав CarouselView к ObservableCollection строк, представляющих URL-адреса изображений, и напрямую ссылаясь на эти URL-адреса с помощью свойства Source тега Image в файлах XAML:

<CarouselView x:Name="carouselView" ItemsSource="{Binding CarImages}">
                <CarouselView.ItemTemplate>
                    <DataTemplate>
                        <Frame>
                            <StackLayout>
                                <Label Text="{Binding FileName}"/>
                                <Image Source="{Binding FileName}"/>
                            </StackLayout>
                        </Frame>
                    </DataTemplate>
                </CarouselView.ItemTemplate>
            </CarouselView>

Это отображает и изображение, и имя файла, как я хотел бы.

Но теперь я пытаюсь создать CarouselView изображений, привязав CarouselView к объектам ImageSource вместо того, чтобы связывать их со строками. ObservableCollection объектов ImageSource определен в моей ViewModel:

public ObservableCollection<ImageSource> ImageSources { get; set; }

Объекты ImageSource создаются путем передачи путей к файлам в метод ImageSource.FromFile:

foreach(MediaFile photoFile in photoFiles)
            {
                CarViewModel.ImageSources.Add(ImageSource.FromFile(photoFile.Path));
            }

Теперь я пытаюсь отобразить их в моем файле xaml:

                <CarouselView ItemsSource="{Binding ImageSources}" HeightRequest="500">
                    <CarouselView.ItemTemplate>
                        <DataTemplate>
                            <StackLayout>
                                <Image Source="{Binding}"/>
                            </StackLayout>
                        </DataTemplate>
                    </CarouselView.ItemTemplate>
                </CarouselView>

, но изображение не отображается.

Я могу отображать по одному изображению за раз:

CarViewModel.SampleImage.Source = CarViewModel.ImageSources[0];

<Image Source="{Binding SampleImage.Source}"/>

При этом отображается одно изображение.

Почему изображения не отображаются в CarouselView?

Изменить: вот вся ViewModel, как просил Лео Чжу - MSFT

using MyProgram.Models;
using MyProgram.Views;
using Plugin.Media.Abstractions;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.IO;
using Xamarin.Forms;

namespace MyProgram.ViewModels
{
    public class CarDetailViewModel : BaseViewModel
    {
        string name, description, priceString;
        DateTime date;
        public ObservableCollection<Photograph> CarImages { get; set; }
        public ObservableCollection<ImageSource> ImageSources { get; set; }
        public ObservableCollection<Image> Images { get; set; }
        public CarouselView carouselView;
        private ImageSource sampleImageSource;
        public ImageSource SampleImageSource
        {
            get
            {
                return sampleImageSource;
            }
            set
            {
                sampleImageSource = value;
                OnPropertyChanged("SampleImageSource");
            }
        }
        private Image sampleImage;
        public Image SampleImage
        {
            get 
            {
                return sampleImage;
            }
            set 
            { 
                sampleImage = value;
                OnPropertyChanged("SampleImage");

            }
        }
        decimal price;
        Car car;

        public void AddImages(List<string> fileNames, bool areNewImages)
        {

            if (CarImages == null || CarImages.Count == 0)
                CarImages = new ObservableCollection<Photograph>();
            string pathToImages = Path.GetDirectoryName(Constants.ItemsDatabasePath) + "/images/";
            foreach (string fileName in fileNames)
            {
                string filenameInLoop = pathToImages + Path.GetFileName(fileName);
                Photograph carImage = new Photograph { FileName = filenameInLoop, IsNew = areNewImages };

                CarImages.Add(carImage);
                OnPropertyChanged("fileName");
                OnPropertyChanged("CarImages");
            }
        }
        public void RemoveImage(Photograph imageToRemove)
        {
            CarImages.Remove(imageToRemove);
            OnPropertyChanged("CarImages");
        }
        public DateTime Date
        {
            set
            {
                if (date != value)
                {
                    Car.Date = date = value;
                    OnPropertyChanged("Date");
                }
            }
            get
            {
                return date;
            }
        }
        
        public string DatabasePath => Constants.ItemsDatabasePath;
        public string Name
        {
            set
            {
                if (name != value)
                {
                    Car.Name = name = value;
                    OnPropertyChanged("Name");
                }
            }
            get
            {
                return name;
            }
        }
        public string Description
        {
            set
            {
                if (description != value)
                {
                    Car.Description = description = value;
                    OnPropertyChanged("Description");
                }
            }
            get
            {
                return description;
            }
        }
        public String PriceString
        {
            set
            {
                if (priceString != value)
                {
                    priceString = value;
                    OnPropertyChanged("PriceString");
                }
            }
            get
            {
                return priceString;
            }
        }
        public decimal Price
        {
            set
            {
                if (price != value)
                {
                    Car.Price = price = value;
                    OnPropertyChanged("Price");
                }
            }
            get
            {
                return price;
            }
        }
        
        public Car Car
        {
            set
            {
                if (car != value)
                {
                    car = new Car
                    {
                        Id = value.Id,
                        Name = value.Name,
                        Price = value.Price,
                        Description = value.Description,
                        Date = value.Date
                    };
                    OnPropertyChanged("Car");
                    OnPropertyChanged("Id");
                    OnPropertyChanged("Name");
                    OnPropertyChanged("Price");
                    OnPropertyChanged("Description");
                    OnPropertyChanged("ImageFile");
                    OnPropertyChanged("Date");

                }
            }
            get
            {
                return car;
            }
        }
        public CarDetailViewModel(Car car = null)
        {
            MessagingCenter.Subscribe<UpdateCarPage, Car>(this, "UpdateCar", (obj, item) =>
            {
                Car = item;
            });
            if (car != null)
                Car = car;
            else
                Car = new Car();
            this.Name = Car.Name;
            this.Description = Car.Description;
            this.Price = Car.Price;
            this.Date = Car.Date;
            OnPropertyChanged("Date");
            OnPropertyChanged("Car");
            OnPropertyChanged("Id");
            OnPropertyChanged("Name");
            OnPropertyChanged("Price");
            OnPropertyChanged("Description");
            OnPropertyChanged("ImageFile");

        }
        public void ReloadCarFromDataStore()
        {
            string Id = Car.Id;
            car = App.CarRepository.GetItemAsync(Id).Result;
        }

    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...