Skip to content

Month: September 2016

Adding a SQLite database to Xamarin.Forms

SQLite Logo
Source: Wikipedia (https://en.wikipedia.org/wiki/SQLite)

SQLite is an excellent choice for local storage within a mobile application. It is lightweight and with virtually zero configuration. Adding SQLite to a Xamarin.Forms project is fairly straightforward:

1. Add the nuget package SQLite-net PCL to each project (PCL, Android, & iOS)
Author = Frank A Krueger
ID = sqlite-net-pcl

2. Add an interface to the PCL project called: ISQLiteService.cs

3. Add a class to the iOS project called: SQLiteService.cs

4. Add a class to the Android project also called SQLiteService.cs

5. Add a class to the PCL project called: BaseItem.cs

6. Add a class to the PCL project called: Database.cs

7. To create a table model, simply create a class with public properties (with getters and setters) of the types and names of each field in the table. The class should inherit from BaseItem; this adds an auto incrementing ID field.

8. Create an instance of Database.cs called: database
To create a table simply call database.CreateTable();

Xamarin.Forms SQLiteExample ScreenshotYou now have a fully functioning database in Forms. To see a database in action, checkout out my example project on GitHub.

 

If you have any comments, questions, or suggestions, feel free to leave a comment below.

Creating a hamburger menu in Xamarin.Forms

Amazon Hamburger Menu
Source: Amazon iOS App (Amazon.com)

One of the most common navigation design patterns for applications and websites is none other than the hamburger menu. While the effectiveness of this type of navigation is greatly debated in the industry, no one can dispute that consumers have, for better or worse, acclimated to these menus. Many of the bigger players in the industry have utilized these menus within their applications (e.g. Amazon, Facebook, Google… to name a few).

Regardless of which side of the fence you are on, implementing a hamburger menu is dead simple in Forms. Xamarin has cleverly disguised their implementation as “Master-Detail Page.”

To create a hamburger menu:

1. Add a new class to your project called: MenuPage
2. Have MenuPage inherit from ContentPage
// TODO: Customize the MenuPage to your heart’s content (with navigation logic, Buttons, ListViews, Labels, etc).

3. Add a second new class to your project called: HomePage (call it whatever)
4. Have HomePage also inherit from ContentPage

5. Add a third new class to your project called: RootPage
6. Have the new class inherit from MasterDetailPage

7. In the constructor of App.xaml.cs, create a new instance of RootPage
8. Create a new instance of MenuPage
9. Assign MenuPage to the Master property of RootPage
10. In the same constructor, create a new instance of a NavigationPage, add a new instance of HomePage as the argument for the NavigationPage
11. Assign the instance of NavigationPage to the Detail property of RootPage

The NavigationPage becomes your navigation stack. Therefore, if you want to push a new page onto the stack (from your MenuPage), simply call:

App.NavigationPage.Navigation.PushAsync(PAGE)

Or pop a page off the stack (from your MenuPage):

App.NavigationPage.Navigation.PopAsync()

To replace the HomePage with another page:

Xamarin will automatically provide a hamburger menu button within your navigation bar. I have found the default navigation bar to be a royal pain to customize. My recommendation would be to implement your own custom header bar. If you do create a custom header, simply call RootPage.IsPresented = true; to open the menu drawer. Set it to false to close it.

// UPDATE: as requested, here is an example project