question

CB1216 avatar image
0 Votes"
CB1216 asked RobCaplan edited

Sending Photo to another page.

Hello

I have made a really simple camera app in Xamarin Forms, I have it so there is a button that will access the camera and the user can take a photo it will then go back to the app and display the photo. I want to be able to then have a button that when clicked sends that photo to another page in a grid view, the user would be able to do this over and over. When done there would be another button when clicked takes the user to the page with all the images on. Is this possible, I have looked everywhere and cannot find a answer.

Thanks

dotnet-csharpdotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

LeonLu-MSFT avatar image
0 Votes"
LeonLu-MSFT answered LeonLu-MSFT edited

Hello,​

Welcome to our Microsoft Q&A platform!

I want to be able to then have a button that when clicked sends that photo to another page in a grid view, the user would be able to do this over and over. When done >there would be another button when clicked takes the user to the page with all the images on. Is this possible, I have looked everywhere and cannot find a answer.

First of all, we should achieve take photo function in mainPage.

Here is MainPage.xaml code.

<StackLayout>
        <Image x:Name="myImage"></Image>
        <Button Text="take" Clicked="Button_Clicked"></Button>
        
        <Button Text="navi" Clicked="Button_Clicked_2"></Button>
    </StackLayout>


Here is MainPage.xaml.cs code. We save the imagePath to the List, then send the List to the another page when navigating page.

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Essentials;
using Xamarin.Forms;

namespace TakePhotoSend2Page
{
    public partial class MainPage : ContentPage
    {
        public static List<string> ImageListPath=new List<string>();
        public MainPage()
        {
            InitializeComponent();


        }

        private async void Button_Clicked(object sender, EventArgs e)
        {
           await TakePhotoAsync();
        }


        async Task TakePhotoAsync()
        {
            try
            {
                var photo = await MediaPicker.CapturePhotoAsync();
             
               
                 await LoadPhotoAsync(photo);
                Console.WriteLine($"CapturePhotoAsync COMPLETED: {PhotoPath}");
            }
            catch (FeatureNotSupportedException fnsEx)
            {
                // Feature is now supported on the device
            }
            catch (PermissionException pEx)
            {
                // Permissions not granted
            }
            catch (Exception ex)
            {
                Console.WriteLine($"CapturePhotoAsync THREW: {ex.Message}");
            }
        }

        string PhotoPath = "";
        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;
            ImageListPath.Add(PhotoPath);
            myImage.Source = PhotoPath;

        }

        private void Button_Clicked_2(object sender, EventArgs e)
        {
            Navigation.PushModalAsync(new Page1(ImageListPath));
        }
    }
}


And please note: I use Xamarin.Essentials: Media Picker to take photo. Please the getting started guide for Xamarin.Essentials to ensure the library is properly installed and set up in your projects.

Then navigate to Page1, you want to use Gird to display the images, but if user take lots of photo, CollectionView is better choose and achieve same result like Grid.

Here is Page1.xaml.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TakePhotoSend2Page.Page1">
    <ContentPage.Content>
        <StackLayout>
            <CollectionView ItemsSource="{Binding ImageListPath}">
                <CollectionView.ItemsLayout>
                    <GridItemsLayout Orientation="Vertical"
                        Span="2" />
                </CollectionView.ItemsLayout>
                <CollectionView.ItemTemplate>
                    <DataTemplate>
                        <StackLayout Padding="10">
                            <Image  Source="{Binding .}"/>

                        </StackLayout>
                    </DataTemplate>
                </CollectionView.ItemTemplate>
            </CollectionView>
        </StackLayout>
    </ContentPage.Content>
</ContentPage>



Here is Page1.xaml.cs.

[XamlCompilation(XamlCompilationOptions.Compile)]
    public partial class Page1 : ContentPage
    {
        public List<string> ImageListPath { get; set; }
        public Page1(List<string> ImageListPath)
        {

            this.ImageListPath = ImageListPath;

            BindingContext = this;
            InitializeComponent();


Best Regards,

Leon Lu



If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


[1]: https://imgur.com/a/JowlqzQ

· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

This works incredibly well and has helped me understand the process a lot more than anything else I have tried, thankyou very much.

0 Votes 0 ·