Back in the PCL project, we are going to run through the concept of binding view models to views, displaying view model data, and propagating data changes through the INotifyPropertyChanged interface.

Let's begin with our MainPage.cs and complete the rest of the user interface for this page:

<?xml version="1.0" encoding="UTF-8"?> 
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
    x:Class="SpeechTalk.Pages.MainPage" 
    BackgroundColor="White"> 
 
    <ContentPage.Content> 
 
    <Grid x:Name="Grid" RowSpacing="10" Padding="10, 10, 10, 10" VerticalOptions="Center"> 
        <Grid.RowDefinitions> 
            <RowDefinition Height="Auto"/> 
            <RowDefinition Height="Auto"/> 
            <RowDefinition Height="Auto"/> 
        </Grid.RowDefinitions> 
 
        <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="*"/> 
        </Grid.ColumnDefinitions> 
 
        <Label x:Name="DesciptionLabel" Font="Arial, 20" Grid.Row="0" Grid.Column="0"/> 
 
        <Entry x:Name="SpeakEntry" Grid.Row="1" Grid.Column="0"/> 
 
        <Button x:Name="SpeakButton" Grid.Row="2" Grid.Column="0"/> 
    </Grid> 
 
    </ContentPage.Content> 
 
</ContentPage> 

We now have a Label, Entry, and Button; each has the x:Name, Grid.Row, and Grid.Column properties assigned.

Notice how we relate the rows and columns to the definitions section previously?

We have also set, on the bounding Grid, padding values for left, up, right, and down; set the vertical options to Center; and set a row spacing of 10. The Padding will place gaps around the entire bounds of the Grid and the ContentPage.

The RowSpacing property will set the gaps between each row; as each element is placed in a new row, they will be stacked vertically with a pixel spacing of 10 between each. Since we only have 1 column, this column width will take up the entire width of the Grid, so each element will be at the full width of the Grid.

Finally, setting the VerticalOptions of the Grid to Center will position all elements to the center of the Grid. Now let's set up the binding between the MainPage and MainPageViewModel.

Create a new file, add it to the modules folder called PCLModule.cs, and paste in the following:

    public class PCLModule : IModule 
    { 
        public void Register(ContainerBuilder builer) 
        { 
            builer.RegisterType<MainPageViewModel> ().SingleInstance(); 
            builer.RegisterType<MainPage> ().SingleInstance(); 
        } 
    } 

Hold on... why are we registering our pages and view models in the container?

We don't need to abstract these.

Registering both views and view models in the container allows us to add our related view models in the constructor; as we only ever need one instance of both the view and view model throughout the entire lifetime of the application, we can set up the MainPage.xaml.cs file like this:

public partial class MainPage : ContentPage 
    { 
        public MainPage () 
        { 
            InitializeComponent (); 
        } 
 
        public MainPage (MainPageViewModel model) 
        { 
            BindingContext = model; 
            InitializeComponent (); 
        } 
    } 

The instance of the MainPageViewModel that was created in the container when registered will be pulled out of the MainPage constructor on creation. This is the same technique used with the instance of the MainPageViewModel, where we place the ITextToSpeech abstraction in the constructor; it will pull out the instance registered on the native side, and in turn we can now use this object to start calling the functions that will run the native-side code.

Now back to the MainPage.xaml sheet, let's set up the property bindings; update the label, entry, and button to the following:

<Label x:Name="DesciptionLabel" Text="{Binding DescriptionMessage}" Font="Arial, 20" Grid.Row="0" Grid.Column="0"/> 
 
<Entry x:Name="SpeakEntry" Placeholder="{Binding SpeakEntryPlaceholder}" Text="{Binding SpeakText, Mode=TwoWay}" Grid.Row="1" Grid.Column="0"/> 
 
<Button x:Name="SpeakButton" Text="{Binding SpeakTitle}" Command="{Binding SpeakCommand}" Grid.Row="2" Grid.Column="0"/>  

We have set up bindings for the text on the label and entry properties; notice the two-way binding mode set on the entry text property?

What this means is if we change the data from the user interface (as it is a text box, will we will be changing the data on the UI front) or the view model, both endpoints will receive the data change accordingly. We have also set up a binding with the command on the button; now, whenever we press this button on the page, it will run the action assigned to it in the view model.

Now that all the coding is done, let's run the application; try typing in text and pressing the Speak button and have a listen:

Well done! You have just completed your first iOS Xamarin.Forms application.

For some extra exercises, try changing the properties of volume and speech on the SpeechUtterance object for iOS.