Xamarin.Forms, Windows Phone, and Visual Studio

Now let's look at sharing our MainPage interface with Windows Phone.

Note

Not everyone will extend an app onto Windows Phone, so if you are not interested in creating a Windows Phone example you can skip this part.

We are going to be using Microsoft Visual Studio, so open it up and open the SpeechTalk solution file (SpeechTalk.sln) we created in Xamarin Studio. Portability between the two IDEs is very good; watch the solution port directly into Visual Studio and open your PCL file without any issues.

Tip

Create a GIT repository to help control the continuous change between Xamarin Studio and Visual Studio, we recommend creating a GIT repository for every chapter.

The iOS and Android projects may not be compatible as we created these in Xamarin Studio.

Tip

You can build iOS and Android applications directly in Visual Studio, but running iOS applications will require a mac build host.

Now it's time to create a new Windows Phone project:

Unfortunately, the automated setup done with iOS and Android will not be done with the Windows Phone project. All the setup will be done manually, but this is good for walking you through the manual setup.

We import the Xamarin.Forms nuget package:

Now its time to look at the MainPage.xaml and MainPage.xaml.cs files in the Windows Phone project.

Wait a minute, haven't we already made one of these?

Now that you are preparing a Windows Phone project, we can see the original WPF structure used in Xamarin.Forms.

Open up MainPage.xaml and paste in the following:

<forms:WindowsPhonePage 
    x:Class="SpeechTalk.WinPhone.MainPage" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:local="using:SpeechTalk.WinPhone" 
    xmlns:forms="using:Xamarin.Forms.Platform.WinRT" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    mc:Ignorable="d" 
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> 
  
    <Grid> 
  
    </Grid> 
</forms:WindowsPhonePage> 

Tip

If any lines get underlined, just ignore them; this is an issue in Visual Studio.

What can we see here?

Yes, this is XAML. Windows apps are all built using the WPF framework. We create the Xamarin.Forms element forms:WindowsPhonePage. Open the MainPage.xaml.cs in the Windows Phone project and update the constructor:

public sealed partial class MainPage 
{ 
    public MainPage() 
    { 
        InitializeComponent(); 
 
        NavigationCacheMode = NavigationCacheMode.Required; 
        LoadApplication(new SpeechTalk.App()); 
    } 
} 

Project setup is quite simple, but we are not calling Forms.Init anywhere. Open up the App.xaml.cs file in the Windows Phone project and look for this block of code:

if (rootFrame == null) 
{ 
    // Create a Frame to act as the navigation context and navigate to the first page 
    rootFrame = new Frame(); 
 
    // TODO: change this value to a cache size that is appropriate for your application 
    rootFrame.CacheSize = 1; 
 
    Xamarin.Forms.Forms.Init(e); 
 
    if (e.PreviousExecutionState == ApplicationExecutionState.Terminated) 
    { 
        // TODO: Load state from previously suspended application 
    } 
 
    // Place the frame in the current Window 
    Window.Current.Content = rootFrame; 
}  

We must manually add this line:

Xamarin.Forms.Forms.Init(e); 

Set the cache size to 1:

rootFrame.CacheSize = 1; 

Finally, we now need to reference the SpeechTalk PCL project we created in Xamarin Studio earlier:

You may run into issues with referencing this project to the targets set by the PCL by default:

To fix this issue, open the SpeechTalk PCL project and update the target configurations in Properties:

Click on the Change button where it says Targets and make sure the preceding checkboxes are selected. That's everything; try building and running the application. We should see a blank page like the Android and iOS projects. Gerat we have now made a cross-platform application for all platforms.

Now let's get into the fun stuff with IoC.