Creating Mobile Apps With Xamarin.Forms and Visual Studio For Mac Using F#

I have worked through chapters one to nine in Petzold’s Creating Mobile Apps with Xamarin.Forms using Visual Studio For the Mac and F#.  I found a couple of gotchas that might trip up someone doing the same that I thought I could document here.  I am using a Mac Book Pro and Visual Studio Enterprise For Mac 2017.

1) The code samples found on GitHub are in C# with a folder for the F# port – well until chapter nine when he stopped with port.  Since we are in a “Pull Request or STFU” world, I will be adding my samples for chapter 9 and beyond.

Issue #1

When you fire up Visual Studio for Mac and Select File –> New Solution –> Single View App (iOS –> app) and follow the default prompts, you will get a skeleton of a project.  Selecting Main.storyboard bring you to a designer that you can drag and drop controls onto an iPhone application, like a Label.  A problem arises when you try and given the Label a name like “testLabel”

Just by setting the name, when you try and run your app, you get this error:

Objective-C exception thrown.  Name: NSUnknownKeyException Reason: [<ViewController 0x7f90f7a11310> setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key testLabel.

The problem is that the IDE does not update the code-behind of the Main.Storyboard to reflect the new name.  If you open that file using “Source Code Editor”, you can then rename the id to “testLabel” from “name-outlet-197” and delete the destination attribute. 

The project then runs

Issue #2

When you add a new File to an existing solution, in this case “MyPage”,

 

it shows up alphabetically in the solution explorer

If you try and reference that new file in the App.xaml to display it on startup, you get the following error:

This is because in F#, the ordering of files is important.  MyPage has to be visible to the compiler before App.xaml.  The way to fix this is to open the project items file, in this case Greetings.projitems:

and change the new file (MyPage.fs) location from the default location (the end)

to above the app.xaml fie

 

Issue #3

Chapter 9 talks about calling native code on each device and referring to those calls from the forms project.  To achieve this, you need to add an interface to the common project

and then refer to it in the common project page

and to implement this in the iOS project

I had to ask for help on Stack Overflow here.  Note that the “Dependency” attribute is in a module at the end, above the do() function.  I’ll be adding this code to the book’s repository in a bit, but at least this post will help others along.