Forum Xamarin Xamarin.Forms

Creating Dynamic imagegallery/grid with Mediapicker

mndevelopmentsmndevelopments Member ✭✭
edited October 14 in Xamarin.Forms

Hello

I'm currently trying to create an app where I need the user to take images either from the camera or from the image gallery and insert the into a table.
The images needs to be stored together with som SQL data.

I'm trying to make the images show up in something similar to a GridView whenever the user adds og takes the images, however I'm having trouble implementing this.

So far I got this from xamboy.com/2019/03/12/select-multiple-images-and-videos-in-xamarin-forms/

But the code is old, and hard to implement on later Xamarin.forms builds - at least I can't get it to work.

I want to put it in where the black boxes are in the below image:

My current app is using the build in MediaPicker in Xamarin.Essentials prebuild 1.6, and I would like to save each image in a grid as show in the image, but the the grid needs to create it self including the image containers (I can set the image source in code behind, but can't figure out how to create the image container and stack them in a grid.

I really hope someone can help or has a good idea.

Best Answer

Answers

  • ColeXColeX Member, Xamarin Team Xamurai

    I test the sample , it works perfectly on my side .

    I would like to save each image in a grid as show in the image, but the the grid needs to create it self including the image containers (I can set the image source in code behind, but can't figure out how to create the image container and stack them in a grid.

    You need to customize the datatemplate as you want .

    https://github.com/CrossGeeks/MultipleMediaPickerSample/blob/285afd22b8faebeeb905bc31521e69b72e18eee0/MultiMediaPickerSample/MainPage.xaml#L18

  • mndevelopmentsmndevelopments Member ✭✭

    @ColeX
    I don't think my previous post was clear. I can get the provided sample to work, but when I try to integrate into my existing projects I get redundancy errors on the codebehind, and errors on my emulators - both android and iPhone.

    I'll have to look at it again later today when I'm back from work, and I'll report back.

    However, do you have a good idea to how I can implement the same feature for the MediaPicker in Xamarin.Essentials? I don't need the multi-picking, even though it's a nice feature.

  • mndevelopmentsmndevelopments Member ✭✭

    I'm not using the MediaPicker from James' GitHub. I'm using the one included in Xamarin.Essentials - I can't find any documentation for the same things.

    I'm currently trying the part about using a CollectionView, but I haven't done so before, so I'm going to have to do some trial and error.

    My code so far for taking images is:

    async void Button_Clicked(System.Object sender, System.EventArgs e)
            {
                if (!MediaPicker.IsCaptureSupported)
                {
                    await DisplayAlert("UPS! Der er sket en fejl", "Jeg kan ikke finde et kamera på din enhed. ", "OK");
                    return;
                }
    
                var result = await MediaPicker.CapturePhotoAsync();
    
    
                try
                {
                    var photo = await MediaPicker.CapturePhotoAsync();
                    await LoadPhotoAsync(photo);
                    Console.WriteLine($"CapturePhotoAsync COMPLETED: {PhotoPath}");
                }
                catch (Exception ex)
                {
                    Console.WriteLine($"CapturePhotoAsync THREW: {ex.Message}");
                }
    
    
                async Task LoadPhotoAsync(FileResult photo)
                {
                    // canceled
                    if (photo == null)
                    {
                        PhotoPath = null;
                        return;
                    }
                    // save the file into local storage
                    var newFile = Path.Combine(FileSystem.CacheDirectory, photo.FileName);
                    using (var stream = await photo.OpenReadAsync())
                    using (var newStream = File.OpenWrite(newFile))
                        await stream.CopyToAsync(newStream);
    
                    PhotoPath = newFile;
                }
    
    
                if (result != null)
                {
                    var stream = await result.OpenReadAsync();
    
                    //resultImage.Source = ImageSource.FromStream(() => stream);
                }
            }
    

    and for picking:

                async void OpenPicture_Activated(System.Object sender, System.EventArgs e)
                {
    
                    var result = await MediaPicker.PickPhotoAsync(new MediaPickerOptions
                    {
                        Title = "Vælg et billede"
                    });
    
    
                    //if (result != null)
                    //{
                    //    var stream = await result.OpenReadAsync();
    
    
    
                    //    //resultImage.Source = ImageSource.FromStream(() => stream);
                    //}
        }
    

    For now both are a mix of the simple code I tested the MediaPicker with from the introduction videos on YouTube and the documentation from microsoft: https://docs.microsoft.com/en-us/xamarin/essentials/media-picker?tabs=ios

Sign In or Register to comment.