0

在使用 Xamarin.Forms（iOS 项目）的 XAML 和 C# 中，我正在尝试创建一个画廊，用户可以在其中添加照片。目前我可以显示一个列表，该列表确实将照片数据绑定到每个条目，因为用户可以单击列表中的一个项目，并且会显示正确的图像。但是我实际上并未成功显示较小版本的我的 FlowListView 中的图片。我知道它必须与绑定有关，我正在尝试从每个对象中获取图像 uri 以显示它，但我对此仍然很陌生，尤其是 xaml 并且这部分还没有成功。

如果你能指出我正确的方向，那就太好了！

预期结果 使用 FlowListView 和 FFImageLoading 在 2 列中显示图像

实际结果 我目前能够显示一个 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;
            }

        }
4

1 回答 1

0

一旦我将 INotifyPropertyChanged 实现到我的 NLTicketPhoto 模型并调整我的 PhotoUrl 和 PhotoDescription 属性以使用 OnPropertyChanged() 我就能够让我的列表正确显示。

遵循这个例子对我有帮助。https://www.c-sharpcorner.com/article/grid-view-in-xamarin-forms-using-flowlistview/

于 2019-10-08T15:02:31.527 回答