如何在CollectionView Project中从库中添加照片？

问题描述

我有一个收藏夹视图，我想向其中添加一张照片。例如，如果我在标签Image.it中添加了来自画廊的图片，那是可行的，但是我想将其添加到我的收藏夹视图中，但是我没有不明白为什么它不添加图片

XAML

<StackLayout>
        <Button Text="Select"
                     Clicked="Handle_Clicked" />
       
        <StackLayout HeightRequest="120" BackgroundColor="LightGray">
            <!--  <Label Text="No photo yet" TextColor="#616161" HorizontalOptions="CenterandExpand" FontSize="Large"
                                VerticalOptions="CenterandExpand"    ></Label>-->
            <CollectionView  x:Name="AddCar" ItemsSource="{Binding Types}"      
                  SelectionMode="None">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Horizontal"
                />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <Grid >
                            <Grid.RowDeFinitions>
                                <RowDeFinition Height="120" />
                            </Grid.RowDeFinitions>
                            <Frame CornerRadius="10" BorderColor="Black" Margin="5,5,5" Padding="0" >
                                <Image Source="{Binding Source}"
                          HorizontalOptions="Center" 
                         BackgroundColor="{Binding CustButtonColor}"/>
                            </Frame>
                        </Grid>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>

        </StackLayout>
    </StackLayout>

隐藏代码

 public MainPage()
        {
            InitializeComponent();
            BindingContext = new VM();
        }

        async void Handle_Clicked(object sender,System.EventArgs e)
        {
            //! added using Plugin.Media;
            await CrossMedia.Current.Initialize();
            var image = new Image();
            //// if you want to take a picture use this
            // if(!CrossMedia.Current.IsTakePhotoSupported || !CrossMedia.Current.IsCameraAvailable)
            /// if you want to select from the gallery use this
            if (!CrossMedia.Current.IsPickPhotoSupported)
            {
                await displayAlert("Not supported","Your device does not currently support this functionality","Ok");
                return;
            }

            //! added using Plugin.Media.Abstractions;
            // if you want to take a picture use StoreCameraMediaOptions instead of PickMediaOptions
            var mediaOptions = new PickMediaOptions()
            {
                PhotoSize = PhotoSize.Medium
            };
            // if you want to take a picture use TakePhotoAsync instead of PickPhotoAsync
            var selectedImageFile = await CrossMedia.Current.PickPhotoAsync(mediaOptions);

          /*  if (selectedImage == null)
            {
                await displayAlert("Error","Could not get the image,please try again.","Ok");
                return;
            }
          */
            image.source = ImageSource.FromStream(() => selectedImageFile.GetStream());
            var page = new VM();
            page.Types.Add(image);
        }
    }

VM

 class VM : INotifyPropertyChanged
    {
        //  public Command Photo { get; set; }
        public ObservableCollection<Image> types { get; set; }
        public ObservableCollection<Image> Types { get => types; set { types = value; OnPropertyChanged("Types"); } }
        public VM()
        {
            //  Photo = new Command(OnPickPhotoButtonClicked);
            Types = new ObservableCollection<Image>();
            Types.Add(new Image() { Source = "heart",BackgroundColor = Color.White });
            Types.Add(new Image() { Source = "heart",BackgroundColor = Color.White });
        }

        public event PropertyChangedEventHandler PropertyChanged;
        protected virtual void OnPropertyChanged(string propertyName)
        {
            PropertyChanged?.Invoke(this,new PropertyChangedEventArgs(propertyName));
        }
    }

请帮助。在GitHub上有我的项目的链接

https://github.com/kamenskyh/PhotoFromGallery/tree/master/Photos

解决方法

首先，保留对您的VM的引用

FEED = 'json'
FEED_EXPORT_ENCODING = 'utf-8'

然后，在添加图片时，请勿创建新的VM实例

    VM ViewModel;

    public MainPage()
    {
        InitializeComponent();
        BindingContext = ViewModel = new VM();
    }

相反，使用您的页面已绑定到的VM实例

var page = new VM();
page.Types.Add(image);