Xamarin - Save data captured from multiple screens.

Question

I have several screens in an application that capture data for a single entity. The entity is composed of many objects.

Example:

First Screen

Student First name
Student Last Name
Student Date of Birth.

Second Screen

Student Photograph (from camera or gallery)

Third Screen

Student Education details
Course Name
University Name
Passing Year
Grade
Scanned copy of the certificate (from camera or gallery)

I am trying to figure out how do I keep passing the student object from screen to screen and fill it up with the details.

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Update

----------

If you use MVVM mode in these three pages. You can binding same viewmodel in these three pages.

Firstly, Create a videomodel called Page1VM to achieve the INotifyPropertyChanged and your Student need to achieve INotifyPropertyChanged as well, If you want to change the image at the runtime.

   public class Page1VM : INotifyPropertyChanged  
       {  
           public event PropertyChangedEventHandler PropertyChanged;  
     
           private Student student;  
           public Student Student  
           {  
               get { return student; }  
               set  
               {  
                   student = value;  
                   OnPropertyChanged();  
               }  
           }  
           protected void OnPropertyChanged([CallerMemberName] string name = null)  
           {  
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));  
           }  
           public Page1VM()  
           {  
               Student = new Student();      
                 
           }  
       }  
       public class Student: INotifyPropertyChanged  
       {  
           public event PropertyChangedEventHandler PropertyChanged;  
           public string FirstName { get; set; }  
           public string LastName { get; set; }  
     
           public string Description { get; set; }  
           public DateTime BirthDate { get; set; }  
     
           private string photograph;  
     
           public string Photograph  
           {  
               get { return photograph; }  
               set  
               {  
                   photograph = value;  
                   OnPropertyChanged();  
               }  
           }  
     
           public string CourseName { get; set; }  
           public string UniversityName { get; set; }  
           protected void OnPropertyChanged([CallerMemberName] string name = null)  
           {  
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));  
           }  
       }  

Then we can create a static ViewModelLocator. This static viewmodel could keep same viewmodel for three pages. For example, if you use BindingContext= new VIewModel() for every page. three pages have three viewmodels, you student object cannot be accessed in different pages.

   public static class ViewModelLocator  
       {  
           private static Page1VM _myViewModel = new Page1VM();  
           public static Page1VM MainViewModel  
           {  
               get  
               {  
                   return _myViewModel;  
               }  
           }  
       }  

We can bind ViewModelLocator in these three pages with BindingContext = ViewModelLocator.MainViewModel;. This line will keep the same viewmodels for three pages.

Here is MainPage's layout.

   <ContentPage.Content>  
               <StackLayout>  
               <Entry x:Name="firstName" Text="{Binding Student.FirstName}" Placeholder="First name"> </Entry>  
               <Entry x:Name="lastName" Text="{Binding Student.LastName}"  Placeholder="Last  name"></Entry>  
               <DatePicker x:Name="birth" Date="{Binding Student.BirthDate}" />  
               <Button Text="click" Clicked="Button_Clicked"></Button>  
               </StackLayout>  
           </ContentPage.Content>  

Here is MainPage's background code.

   public MainPage()  
           {  
               InitializeComponent();  
     
               BindingContext = ViewModelLocator.MainViewModel;  
     
           }  
           private void Button_Clicked(object sender, EventArgs e)  
           {  
               
     
               Navigation.PushModalAsync(new Page1());  
           }  

Here is Page1's layout. I achieve the pick photo. then set the path to Student.Photograph.

   <StackLayout>  
               <Image x:Name="MyImage" Source="{Binding  Student.Photograph}"></Image>  
     
               <Button Text="pick" Clicked="Button_Clicked"></Button>  
               <Button Text="next" Clicked="Button_Clicked_1"></Button>  
               <Label x:Name="details" Text="{Binding Student.FirstName}"  
                   VerticalOptions="CenterAndExpand"   
                   HorizontalOptions="CenterAndExpand" />  
           </StackLayout>  

Here is Page1's background code.

   public partial class Page1 : ContentPage  
       {  
           public Page1()  
           {  
               InitializeComponent();  
               BindingContext = ViewModelLocator.MainViewModel;  
           }  
     
           private async void Button_Clicked(object sender, EventArgs e)  
           {  
               FileResult result =await PickAndShow(PickOptions.Images);  
               ViewModelLocator.MainViewModel.Student.Photograph= result.FullPath;  
           }  
           string Text;  
           ImageSource Image;  
           async Task<FileResult> PickAndShow(PickOptions options)  
           {  
               try  
               {  
                   var result = await FilePicker.PickAsync(options);  
                   if (result != null)  
                   {  
                       Text = $"File Name: {result.FileName}";  
                       if (result.FileName.EndsWith("jpg", StringComparison.OrdinalIgnoreCase) ||  
                           result.FileName.EndsWith("png", StringComparison.OrdinalIgnoreCase))  
                       {  
                           var stream = await result.OpenReadAsync();  
                           Image = ImageSource.FromStream(() => stream);  
                       }  
                   }  
     
                   return result;  
               }  
               catch (Exception ex)  
               {  
                   // The user canceled or something went wrong  
               }  
     
               return null;  
           }  
     
           private void Button_Clicked_1(object sender, EventArgs e)  
           {  
               Navigation.PushModalAsync(new Page2());  
     
           }  
       }  

I show the image from Binding Student.Photograph In the page2 for testing. You can get the student information from previous page by data-binding .

   <StackLayout>  
               <Image x:Name="MyImage" Source="{Binding Student.Photograph}"></Image>  
           </StackLayout>  
     
     
    public Page2()  
           {  
               InitializeComponent();  
     
               BindingContext = ViewModelLocator.MainViewModel;  
           }  

Here some useful doc about using MVVM in Xamarin.Forms

MVVM is in the Xaml Basics docs
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/xaml/xaml-basics/data-bindings-to-mvvm

And in learning modules:
https://learn.microsoft.com/en-us/learn/modules/design-a-mvvm-viewmodel-for-xamarin-forms/

Here is a book about the using MVVM.
https://learn.microsoft.com/en-us/xamarin/xamarin-forms/enterprise-application-patterns/mvvm

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

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.