Monthly Archives: April 2019

Xamarin Forms – MVVM & SQLite

In the MVVM pattern, the ViewModel is aware of the Model and the View interacts with the Model through the ViewModel. Instantiating the ViewModel in the App class allows all the various pages to interact with the single object. With that in place, although it’s not a prerequisite, I’ll move on to store contacts in a SQLite database and Views will interact with the DB through the VM.

  1. Contact Model

    Define the object in a class. This becomes the model.

  2. Get and Set Contacts

    Keeping the list in the Main Page, we can add records to it and send it to a ListView to display them.

    Add Contacts

    List Contacts

  3. Interact with Model through MVVM

    Now, rather than creating a list in the Main Page to store contacts, move it to the ViewModel which will instantiate the list and handle interactions with it. The ListViewContacts will no longer take a List<Contact> argument and instead get the list from App.vm.GetContacts();

  4. Import SQLite

    The MVVM will manage how views interact with the information in memory, but we still need a database to store data when the application is closed. Luckily, SQLite will help us with that. We need to add it to our project from NuGet, then create a db interface that defines a connection and a platform specific class that implements it. Lastly, we’ll add a couple of data attributes to the Contact model.

    Get Sqlite



  5. Create, Read and Delete

    Now the relationship between the ViewModel and the database needs to be established. Since the contact list will reside in the database, we’ll use the ViewModel to pass new contacts to it and retrieve existing contacts from it. The DB will be instantiated in App.xaml.cs to make it accessible everywhere and the VM will be called by the pages as they need it, MainPage and ListViewContacts.





    Stored data

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