Xamarin.Forms

Getting started with Xamarin.Forms

  • Blog

Are you a .net programmer? Are you interested in the mobile world but you don’t know where to start? Well… In this post, you have the first steps to quick learn the key elements of this cross-platform framework. We discuss the main advantages and disadvantages, the differences between traditional Xamarin and Xamarin.Forms, and I’ll show a basic and interesting first app using the MVVM pattern.

What is Xamarin.Forms?

Xamarin.Forms is not just another cross-platform framework, it´s a strong set of tools and products for developers to rapidly create native apps for Android, iOS, Windows, and Windows Phone.

Using the power of C# and XAML it’s possible to share the interface and business logic, avoiding repeated code between platforms.

Differences between traditional Xamarin and Xamarin.Forms

Xamarin.Forms

One of the main differences it is that Xamarin.Forms shares the UI and the backend code, generally using XAML (Extensible Application Markup Language), while traditional Xamarin only can share the backend code.

Xamarin.Forms is best for:

  • Apps that require little platform-specific functionality.
  • Apps where code sharing is more important than custom UI.
  • Apps with common interactions across device platforms.

Traditional Xamarin is best for:

  • Apps with interactions that require native behavior.
  • Apps that use many platform-specific APIs.
  • Apps where custom UI is more important than code sharing.

Advantages and disadvantages of Xamarin.Forms

Main Advantages:

  • Because Xamarin.Forms applications are native applications, they don’t have the limitations of other toolkits such as limited APIs, or poor performance.
  • It’s possible to share almost of 85% percent of code.
  • Takes advantage of the mature and solid language C#.
  • MVVM pattern it’s part of Xamarin.Forms.
  • It’s not necessary to have multiple teams with multiple environments and different language skills. Using Xamarin.Forms a unique team can develop the functionalities just one time for all platforms. Complying with a basic rule called DRY (Don’t repeat yourself).
  • A big community. Since 2016 Xamarin is part of Microsoft, included in the most recent versions of visual studio.
  • It’s free!
  • The user interfaces are rendered using the native controls of the target platform, allowing Xamarin.Forms applications to retain the appropriate look and feel for each platform.

Main Disadvantages:

  • Previewer of XAML. Right now it’s not possible to view the design mode of XAML, but the team of Xamarin is working on this feature.
  • Its a relatively young platform and may have some little issues.
  • For apps where custom UI is a core requirement, the code becomes more complicated to maintain.

Let’s code!

Requirements for our first Xamarin.Forms app:
https://developer.xamarin.com/guides/xamarin-forms/getting-started/installation/

Github code sample:

https://github.com/allanes87/MySeriesDemo

This walkthrough demonstrates how to create a basic Xamarin.Form solution using the MVVM pattern, showing a list of my favorite TV series:

1. Open Visual Studio and click New Project.

Xamarin.Forms

2. Select the Blank Xaml App (Xamarin.Forms Portable) template, set a Name and Location and press OK:

Xamarin.Forms

3. Visual Studio generates this solution:

Xamarin.Forms

4. In Solution Explorer, in the MySeries (Portable) project, delete xaml.

5. In the MySeries (Portable) project, create 3 new folders: “View”, “Model” and “ViewModel” for implement the MVVM pattern.

Xamarin.Forms

6. Right click in “View” folder and select Add \ New Item.., in the new windows select Forms Xaml Page, set Name and press Add.

Xamarin.Forms

7. In xaml, remove all of the template code and replace it with the following code. This code declaratively defines the user interface for the page:

Xamarin.Forms

8. Right click in “Model” folder and select Add \ New Item.., in the new windows select Class, set Name “Series” and press Add.

9. In Series.cs, remove all of the template code and replace it with the following code:

Xamarin.Forms

10. Right click in “ViewModel” folder and select Add \ New Item.., in the new windows select Class, set Name “SeriesViewModel” and press Add.

11. In SeriesViewModel.cs, remove the main code of the template and replace it with the following code:

Xamarin.Forms

Xamarin.Forms

12. In MySeriesPage.cs, set the BindingContext with our ViewModel (“SeriesViewModel”):

Xamarin.Forms

13. Finally, in App.cs set the MainPage of the app.

Xamarin.Forms

The final application is shown below:

Xamarin.Forms

Written by Alexander Llanes

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *