提问者:小点点

如何在CollectionView项目中添加来自库的照片?


我有一个集合视图,我想从图库中添加一张照片到它。例如,如果我在标签图像中添加图库中的图片。它可以工作。但是我想在集合视图中添加它,我不明白为什么它不添加图片

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


共1个答案

匿名用户

首先,保持对VM的引用

    VM ViewModel;

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

然后,在添加图片时,不要创建新的VM实例

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

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

ViewModel.Types.Add(image);