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
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
- 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.
- 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.
Requirements for our first Xamarin.Forms app:
Github code sample:
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.
2. Select the Blank Xaml App (Xamarin.Forms Portable) template, set a Name and Location and press OK:
3. Visual Studio generates this solution:
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.
6. Right click in “View” folder and select Add \ New Item.., in the new windows select Forms Xaml Page, set Name and press Add.
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:
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:
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:
12. In MySeriesPage.cs, set the BindingContext with our ViewModel (“SeriesViewModel”):
13. Finally, in App.cs set the MainPage of the app.
The final application is shown below:
Written by Alexander Llanes