我有一个集合视图,我想从图库中添加一张照片到它。例如,如果我在标签图像中添加图库中的图片。它可以工作。但是我想在集合视图中添加它,我不明白为什么它不添加图片
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
首先,保持对VM的引用
VM ViewModel;
public MainPage()
{
InitializeComponent();
BindingContext = ViewModel = new VM();
}
然后,在添加图片时,不要创建新的VM实例
var page = new VM();
page.Types.Add(image);
相反,使用您的页面已经绑定到的VM的实例
ViewModel.Types.Add(image);