Xamarin Projects – Setup & Pages

Xamarin will allow you to build mobile applications for Android, iOS and UWP in Visual Studio. With VS2017 installed, you can get started pretty quickly, although getting the SDK and emulator set up may take some troubleshooting.

  1. Install Mobile Development with .NET

    If not already installed, you may need to go back to the Visual Studio Installer to get Mobile Development with .NET. After clicking the Modifying option, it should be under the Mobile & Gaming section.

  2. Start a Xamarin.Forms Project

    In Visual Studio, start a project with File > New > Project. I like to use the search function to find my project type, obviously “xamarin” should do the trick, but it can be found under Web > Cross-platform too.New Xamarin project

  3. Update NuGet packages

    On start up, VS will likely display a long list of errors. Most, if not all, can be taken care of by simply updating the project’s default packages using NuGet.Update Packages

  4. Incompatible Haxm

    The Intel Hardware Accelerator Manager threw an error for me. So, although it appeared that Visual Studio Installer was taking care of the Intel HAXM, finding the .exe and running it fixed the error for me. Mine is located at C:\Program Files (x86)\Android\android-sdk\extras\intel\Hardware_Accelerated_Execution_Manager\intelhaxm-android.exe, but your SDK folder my be elsewhere. The path can be seen in Tools > Android > SDK Manager.

  5. Android-sdk

    Likewise, if the installer and SDK manager are not playing nice, try getting the Android SDK from the Android Studio installer at https://developer.android.com/studio/

  6. Hello World

    Start with a label, an input field, a button and an event handler to process the click.



     
  7. Navigation Pages push New Pages around.

    Go back the the MainPage.xaml and add a new Button that will show us the About Page. Pressing F12 inside “OnAbout” will generate the method for us. Right click the project in the Solution Explorer and Add > New Item > Content Page. Before you can start handling new pages, the MainPage needs to be upgraded from Content Page to Navigation Page.¬†One way to do this is cast it when calling it in App.xaml.cs




    Add About Page
  8. Data Binding

    Data binding will link the xaml view with the data in the scope of the xaml.cs. Just be sure the BindindContext is assigned after any variables you’re referencing.



    Cats on Staff
  9. Displaying a List with Binding

    A List View does just about what it sounds like it should. In this case, notice that the Binding Context is defined in the xaml and not the code behind. Either way will work.




  10. Implementing Styles

    Just like HTML, elements can be styled individually, but that doesn’t scale. You can define some global styles (or other resources) in App.xaml.


    Resources Styles