This guide will discuss how to setup a development environment for building mobile apps with Visual Studio and Xamarin.

Resources

You will need a Windows 10 Creators edition computer, a current macbook computer with latest iOS 10.3, and network access on both. You may have to install JDK 8 before VS2017. JDK8 is used in the macbook agent.

Launch VS2017 setup.

Select the “Mobile Development with .NET” and “Universal Windows Platform development” workloads.

“Mobile Development with .NET” will get you:

Xamarin,
.NET Framework 4.6.1 development tools,
C# and Visual Basic,
.NET Portable Library targeting pack,
Xamarin Workbooks,
Android NDK (R13B),
Android SDK Setup (API level 23),
Java SE Development Kit (8.0.1120.15),
Google Android Emulator (API level 23),
F# language support,
Intel Hardware Accelerated Execution Manager (HAXM),
Windows 10 Mobile Emulator (Creators Update),
Universal Windows Platform tools for Xamarin.

“Universal Windows Platform development” will get you:

Blend for Visual Studio,
.NET Native,
NuGet Package Manager,
Universal Windows Platform tools,
Windows 10 SDK (10.0.15063.0) for UWP: C#, VB, JS.

Don’t use HAXM. The Hyper-V works for both windows and android phone emulation. The default HAXM method only works for Android phone emulation. The iphone emulator only runs on the macbook, but it can be deployed and launched from Visual Studio 2017 on the windows machine. Iphone emulator requires matching versions between Visual Studio and the Macbook Xamarin software.

Uncheck the boxes for:

Google Android Emulator (API level 23),
Intel Hardware Accelerated Execution Manager (HAXM),

Check the boxes for:

Windows 10 Mobile Emulator (Creators Update),
Universal Windows Platform tools for Xamarin,
Visual Studio Emulator for Android,
Windows 10 SDK (10.0.10586.0),
GitHub extension for Visual Studio

The 10.0.10586.0 module matches the default minimal version used in the VS project wizard.

You can always install components again. Just run the setup app again.

Using Android Emulator Manager

The Android Emulator Manager (AEM) controls the installation of the various android phone emulators for Hyper-v. When you install one from the manager, it will appear in the Visual Studio dropdown. Hyper-v is microsoft’s visualization manager. It is similar to Oracle’s VirtualBox, and VMware. I don’t think they work together so you may have to uninstall those to get hyper-v working.

see https://www.visualstudio.com/vs/msft-android-emulator/

Install the emulator for testing your app.

This installs within a few minutes.

Start the Android Emulator

Filter the Device Profiles by choosing Marshmallow API 23 which is the most current that the manager has.

Click the download button to right of 5.7” Marshmallow.

This will take a while to download. A dialog access window will appear late in the install to do the actual install.

Click the green play button to start it.

By default there is no internet access in the emulator.

Internet access for emulator

You may need to run you emulator and have it talk to the internet.

Verify that there is no internet in the emulator by trying the browser.

Search for Hyper and run the Manager.

If you are still running the emulator stop it by closing the emulator window.

In hyper-v, right click your computer name and choose Virual Switch Manager,

Click Create Virtual Switch and give it a name like “Internet Virtual Switch”. Click yes to warning.

Right click the emulator virtual machine that was running in hypter-v and choose settings.
In the Add Hardware section, select Network Adapter and Add.

Choose Iternet Virual Switch and OK.

Relaunch the emulator and verify internet.

Run Visual Studio

The first time starting Visual Studio 2017 will ask for an account which will:

Provide the licensing of the versions of Visual Studio Professional and higher,
Link your Visual Studio to visual studio online,
Link your Visual Studio to github.

Choose the Team Explorer Tab in lower right corner of main window.

Welcome to GitHub for Visual Studio! Why not take a look at our training or documentation? The training link is https://services.github.com/on-demand/windows/visual-studio and the documentation link is https://github.com/github/VisualStudio/tree/master/docs

After logging into a GitHub project to store your app, click new solution.

Choose the 4.6.2 Framework, Cross Platform App(Xamarin) and give it a name.

Choose either Shared Project or PCL. The difference is PCL creates a dll that is used in the other projects. Shared project shares the code with the other projects. If you want to use skiasharp and match closely with the Skiasharp graphical demo code, Skiasharp uses PCL.

You will need to allow access for VS2017 program to the network.

Install any updates that appear in Notifications. The github plugin update required me to close VS for it to install.

Choose File->New->Project…

The created solution will contain four projects.

You should be able to build and run the app on each phone emulator.

Windows Phone Emulation

The Windows Phone will look like this.

A warning about download before running may appear since the Xamarin solution wizard default settings for all cpu do not build and deploy UWP.

If you see a deploy warning, you need to modify the configuration manager.

A startup window will take a while to start the emulator on the first deployment after a computer reboot. Other deployments will happen much faster it the emulator is already running.

The windows phone starter app looks like the following image.

iPhone Emulation

The iPhone will run options look like this.

The macbook will contain the emulator for iPhone. The emulator should appear and the app. To Save a screen shot, select File->Save ScreenShot. Then use scp to securely copy the file from the macbook to the windows computer. The command is from windows powershell. You will need bash for Windows installed.

Getting iPhone Screenshots from the Macbook.

Use the secure copy command to copy the screenshot from the macbook to the windows computer.

scp davidskowronski@192.168.1.2:~/Desktop/*.png /mnt/c/Users/david/Pictures/

Here is the full output of what to expect.

david@D:/mnt/c/Users/david$ scp
davidskowronski@192.168.1.2:~/Desktop/\*.png
/mnt/c/Users/david/Pictures/

The authenticity of host '192.168.10.9 (192.168.10.2)' can't be established.

ECDSA key fingerprint is SHA256:…

Are you sure you want to continue connecting (yes/no)? yes

Warning: Permanently added '192.168.1.9' (ECDSA) to the list of known hosts.

Password:

Simulator Screen Shot Jul 12, 2017, 4.03.56 PM.png 100% 467KB 466.9KB/s
00:00

Simulator Screen Shot Jul 15, 2017, 5.52.55 PM.png 100% 156KB 155.8KB/s
00:00

You now have access to the iphone screenshots in your Pictures folder.

Android Phone Emulation

The Android Phone run options will look like this.

It may warn about internet access. Click Yes to the warning.

The android starter app will look like the following image.

Installing Bash for Windows

You may need bash to transfer screenshots from the macbook.

There is a windows feature to install.

A computer reboot is required.
Run bash from command line.

Updating and Install dependencies with NuGet

This section was added Oct 18, 2017.

Nuget is a visual studio component that will manage many of your 3rd party reference libraries. To use Nuget, right click on the solution and select “Manage NuGet packages for Solution”. Many packages are installed by default when you create a solution from a wizard. The Xamarin.Android.Support.xxxxxx packages from the cross-platform wizard can be upgraded to 26.0.2 only if you update your visual studio to 15.4.0 (see help->about to find VS2017 version). If you try on some earlier VS2017 version, you get a failure and rollback.

Vs Cross Platform Dev Setup