Data Binding Xaml Values

I have an in xaml, and I want to get that value the user types.

<Entry x:name="enteredInput>
The file with that is in startingPage.xaml with a code behind class startingPage.xaml.cs.

Then I would like to transfer that value in the

Tagged:

Answers

  • stemadostemado Member ✭✭
    edited November 2018

    I prefer using the MVVM pattern to do this along with the Prism Framework (VS Extension Template Pack To Start One Easily) because it makes my life 100x easier in the long run.

    However, that being said:

    1. Bind <Entry /> input to your StartingPage.xaml (We'll introduce UserEntryText in a moment)

      <Entry Text="{Binding UserEntryText}" />
      <Button Text="NavToStartPage"  Command="{Binding NavigateToMainPage}" />
      
    2. Create a new file called StartingPageViewModel.cs for storing your ViewModel logic (and where we will create UserEntryText so we can complete our binding)

      using System;
      using System.Collections.Generic;
      using System.ComponentModel;
      using System.Linq;
      using System.Runtime.CompilerServices;
      using System.Threading.Tasks;
      using NonPrismXamarinApp.Views;
      using Xamarin.Forms;
      
      namespace NonPrismXamarinApp.ViewModels
      {
          public class StartPageViewModel
          {
              public INavigation Navigation { get; }
      
          private string _userEntryText;
      
          public string UserEntryText //Property we will bind our Entry Text to so we can pass it as a parameter to our MainPage view.
          {
              get => _userEntryText;
              set 
              {
                  _userEntryText = value;
              }
      
          }
      
          public StartPageViewModel(INavigation navigation)
          {
              this.Navigation = navigation;
              NavigateToMainPage = new Command(async () => await GotoPageMainPage()); //Pass Navigation through ViewModel constructor
          }
      
      
      
          public async Task GotoMainStartPage() 
          {
              await Navigation.PushAsync(new MainPage(UserEntryText)); //Navigate to MainPage with parameter UserEntryText of user to pass to MainPage view.
      
          }
      
          public Command NavigateToMainPage { get; } // Create a new Command we can bind to our Button's Command property.
      
      
      }
      

      }

    3. MainPage.xaml

       //Create a label with an x:Name (like you did on your startPage.xaml) - I named mine boundUserData
      <Label Text="Bound Data" />
      <Label x:Name="boundUserData" />
      
    4. And in MainPage.xaml.cs

          // Set the boundUserData Text = UserEntryText that you passed in when you navigated to the MainPage from the StartPage Constructor. 
          public MainPage(string UserEntryText)
          {
              InitializeComponent();
              boundUserData.Text = UserEntryText;
          }
      
    5. You should be able to now pass your text entered from your StartPage.xaml and view it in your MainPage.xaml


    (Enter some random text)


    (Now you can see it on MainPage.xaml)

  • jezhjezh Member, Xamarin Team Xamurai

    Besides the MVVM pattern as @stemado mentioned, there are several methods to pass data between two page.

    1. the simple way is to pass parameters by using the constructor, public properties, public methods, etc
      For example:

       private void Button_Clicked(object sender, EventArgs e)
       {
          string value = myEntry.Text as string;
          SecondPage page = new SecondPage(value);
          Navigation.PushModalAsync(page);
        }
      

      In SecondPage, modify the constructor to accept a parameter

          public SecondPage (String value)
      {
          InitializeComponent ();
                      Application.Current.MainPage.DisplayAlert("value", "value = " + value, "OK");
               }
      
    2. you can also use MessagingCenter . for example

         MessagingCenter.Send<StartingPage, string>(this, "Value",myEntry.Text as string);
      

      and

         MessagingCenter.Subscribe<StartingPage, string>(this, "Value", (arg1, arg2) =>
          {
              string value = arg2; 
          });
      
    3. use BindingContext

                  SecondPage mg = new SecondPage();
                  mg.BindingContext = e.Item as string;
                  await Navigation.PushAsync(mg);
      

      the SecondPage.xaml

            <Label Text="{Binding }"
                 VerticalOptions="Center" 
                 HorizontalOptions="CenterAndExpand"
                 x:Name="myLabel"
                 />
      

      Note : you can also get the BindingContext by the following code.

           public SecondPage()
         {
          InitializeComponent();
          string value = this.BindingContext.ToString();
         }
      
    4. of course , you can also use EventHandler

      define EventHandler value in SecondPage

               public EventHandler<string> Value;
      

      and

               async void BackCall(object send, string s)
              {
                 if (s == null)
                {
                  throw new ArgumentNullException(nameof(s));
                 }
      
               await this.DisplayAlert(
                      "这里是返回值",
                     s,
                      "Cancel"
                      );
                   }
               }
      

      in StartingPage

                 SecondPage page = new SecondPage();
                  page.Value += delegate (object s,string a)
                  {
                      BackCall(s,a);
                  };
      

      Note : the SecondPage is like the MainPage you said.

Sign In or Register to comment.