Capture photo in xamarin forms

Question

I want to take multiple photos and it is shown in a list, but I must use the mvvm structure if I put this code in the CS of the XAML it works but I cannot use it that way ...

The view model works and everything but does not show the image on the screen

What can be ??

You can tell me that I am doing wrong he tried everything but he does not show me the image.

Reference XAML (view) SEE MODEL and MODEL public class CapturePhotoViewModel : BaseViewModel { ObservableCollection Photos = new ObservableCollection();

    public ICommand CapturePhotoCommand => new Command(async (s) => await CaptureFoto());
    private async Task CaptureFoto()
    {
        var IniciandoEvento = await CrossMedia.Current.Initialize();

        if (!CrossMedia.Current.IsCameraAvailable || !CrossMedia.Current.IsPickPhotoSupported || !CrossMedia.IsSupported || !IniciandoEvento)
        {
            await DialogService.DisplayAlertAsync("No se puede Acceder a la camara", "¡Error!", "Aceptar");
            return;
        }

        var newPhoto = Guid.NewGuid();
        using (var photo = await CrossMedia.Current.TakePhotoAsync(new StoreCameraMediaOptions()
        {
            Name = newPhoto.ToString(),
            SaveToAlbum = true,
            DefaultCamera = CameraDevice.Rear,
            Directory = "Demo",
            CustomPhotoSize = 50
        }))
        {
            if (string.IsNullOrWhiteSpace(photo?.Path))
            {
                return;
            }

            var newphotomedia = new MediaModel()
            {
                MediaID = newPhoto,
                Path = photo.Path,
                LocalDateTime = DateTime.Now
            };
            Photos = new ObservableCollection<MediaModel>();
            Photos.Add(newphotomedia);


        }


    }
}

THIS IS MY XAML CODE which goes the list of image that is captured, but I do not know what I am doing wrong and does not show me the image

 <Button Text="Tomar Foto" x:Name="photobutton" Command="{Binding CapturePhotoCommand}"/>
        <ListView x:Name="ListPhotos" ItemsSource="{Binding Photos.Source}" RowHeight="400"
            HeightRequest="300">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <Grid>
                            <Frame  OutlineColor="LightGray" HasShadow="true" Margin="4" WidthRequest="200" HeightRequest="250">
                                <Frame.Content>
                                    <StackLayout>
                                        <Image Source="{Binding Source}" VerticalOptions="StartAndExpand" HeightRequest="280"/>
                                        <Button Text="Delete" />
                                    </StackLayout>

                                </Frame.Content>

                            </Frame>
                        </Grid>


                    </ViewCell>

                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>

Y Este es mi model

 public class MediaModel
{
    public Guid MediaID { get; set; }
    public string Path { get; set; }
    public DateTime LocalDateTime { get; set; }

    private FileImageSource source = null;
    public FileImageSource Source => source ?? (source = new FileImageSource() { File = Path });
}

Answer 1

first, get rid of this line

Photos = new ObservableCollection<MediaModel>();

then fix your ItemsSource binding

<ListView x:Name="ListPhotos" ItemsSource="{Binding Photos}" RowHeight="400"

then fix your Image binding

<Image Source="{Binding Path}" VerticalOptions="StartAndExpand" HeightRequest="280"/>