Ошибка отображения изображений с помощью FlowListView и FFImageLoading в Xamarin.Forms - PullRequest
Новая
       32

Ошибка отображения изображений с помощью FlowListView и FFImageLoading в Xamarin.Forms

0 голосов
/ 03 октября 2019

В XAML & C # с использованием Xamarin.Forms (iOS Project) я пытаюсь создать галерею, в которую пользователь может добавлять фотографии. В настоящее время я могу показать список, в котором данные фотографии привязаны к каждой записи, поскольку пользователь может щелкнуть элемент в списке, и отобразится правильное изображение. Однако мне не удалось отобразить уменьшенную версиюкартинки в моем FlowListView. Я знаю, что это должно быть что-то с привязкой, и я пытаюсь получить изображение URI от каждого объекта, чтобы отобразить его, но я все еще довольно новичок в этом, особенно в xaml, и пока не добился успеха в этой части.

Если бы вы указали мне правильное направление, это было бы мило!

Ожидаемый результат Для отображения изображений в 2 столбцах с использованием FlowListView и FFImageLoading

Фактический результат В настоящее время я могу отобразить список из 2 столбцов, который имеетправильные объекты привязаны к каждому элементу, но единственный способ узнать, есть ли что-нибудь, есть ли я добавить рамку или добавить текстовую метку к каждому элементу.

Пользователь может щелкнуть по каждой метке в настоящий момент, иправильное изображение покажет.

Это часть моей TicketPageModel 

private void AddItems()
        {
public void UpdatePhotosData()
        {
            //get the notes and set the source for the list to them.
            photos = NLTicketPhotos.Get(_ticket).OrderByDescending(x => x.PhotoCreatedAt).ToList();
        }
            foreach (var i in photos)
            {
                Items.Add(i);
            }
        }

private ObservableCollection<NLTicketPhoto> _items = new ObservableCollection<NLTicketPhoto>();

public ObservableCollection<NLTicketPhoto> Items
        {
            get
            {
                return _items;
            }
            set
            {
                if (_items != value)
                {
                    _items = value;
                    OnPropertyChanged(nameof(Items));
                }
            }
        }

Мой XAML 

<flv:FlowListView FlowColumnCount="2" SeparatorVisibility="Default" HasUnevenRows="True" FlowItemTapped="OnImageTapped" FlowItemsSource="{Binding Items}">
            <flv:FlowListView.FlowColumnTemplate>
                <DataTemplate>
                    <StackLayout Padding="10" Spacing="0" AutomationProperties.Name="Too Cool">
                        <ff:CachedImage Aspect="AspectFill" HeightRequest="30">
                            <ff:CachedImage.Source>
                                <UriImageSource Uri="{Binding Items.PhotoFileUrl}"/>
                            </ff:CachedImage.Source>
                        </ff:CachedImage>
                        <StackLayout Orientation="Horizontal" Padding="10" Spacing="0">
                            <Label HorizontalOptions="Fill" VerticalOptions="Fill" TextColor="Black" XAlign="Center" YAlign="Center" Text="Too Cool For School"/>
                        </StackLayout>
                    </StackLayout>
                </DataTemplate>
            </flv:FlowListView.FlowColumnTemplate>
        </flv:FlowListView>

Мой код позади 

void OnImageTapped(object sender, ItemTappedEventArgs e)
        {
            NLTicketPhoto photo = (NLTicketPhoto)e.Item;
            //listPhotos.SelectedItem = null; //deselect the item

            switch (photo.PhotoFileType)
            {
                case "mov":
                    if (photo.PhotoIsOnServer)
                    {
                        Device.OpenUri(new Uri(photo.PhotoFileName));
                    }
                    else
                    {
                        //Only watch videos after sync
                        DisplayAlert("Video Unavailable", string.Format("This video will be viewable after it is synced to the server."), "OK");
                    }
                    break;

                case "jpg":
                    //View image
                    NLPageViewPhoto preview = new NLPageViewPhoto(photo);
                    Navigation.PushAsync(preview);
                    break;
                default:
                    DisplayAlert("Photo Unavailable", string.Format("The photo format .{0} is currently not viewable", photo.PhotoFileType), "OK");
                    break;
            }

        }

1 Ответ

0 голосов
/ 08 октября 2019

После того как я реализовал INotifyPropertyChanged в своей модели NLTicketPhoto и настроил свойства PhotoUrl и PhotoDescription для использования OnPropertyChanged (), я смог правильно отобразить свой список.

Следующий пример помог мне. https://www.c -sharpcorner.com / статьи / сетки вид-в-Xamarin-форм, использующих-flowlistview /

...