Xamarin Guide 8: Change the App.cs to App.xaml

Scope

This Xamarin Workshop Guide was created for the The Portuguese National Meeting of IT Students (ENEI) by Sara Silva and the original content is available here. To extend it to the global community, it was published in a new project called Xam Community Workshop, and the main goal is for any developer, or user group customize it to theirs events.

Before reading this article you must read:

Guide 8. Change the App.cs to App.xaml

In this step you will learn how to change the App.cs to have the App.xaml file that will define the Xamarin Forms Application.

In the ENEI.SessionsApp project it is possible to find the App.cs file that defines the application. It is a simple class defined in a *.cs file that can be defined using a XAML approach. For it you need to create a new XAML page as described in Figure 1 and Figure 2:

Figure 1: Add new item (using Visual Studio)



Figure 2: Add new Forms XAML Page called App (using Visual Studio)

The result will be something as in the following.

App.xaml

  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="ENEI.SessionsApp.App">  
  5.     <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />  
  6. </ContentPage>  
App.xaml.cs
  1. public partial class App : ContentPage  
  2. {  
  3.     public App()  
  4.     {  
  5.         InitializeComponent();  
  6.     }  
  7. }  
At this moment, it is a content page that is not our goal, but it is the workaround to create the App.xaml and App.xaml.cs files. Now to create the Xamarin Forms application based in the XAML approach we need to change the code above, as in the following.

App.xaml
  1. <?xml version="1.0" encoding="utf-8" ?>  
  2. <Application xmlns="http://xamarin.com/schemas/2014/forms"  
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"  
  4.              x:Class="ENEI.SessionsApp.App">  
  5. </Application>      
App.xaml.cs
  1. public partial class App : Application  
  2. {  
  3.     public App()  
  4.     {  
  5.         InitializeComponent();  
  6.     }  
  7. }  
With it, you will need an App class that inherits from Xamarin.Forms.Application, to avoid it, you should delete the App.cs file, but first we need to move the code from the App.cs to App.xaml.cs and that result will be something as in the following:
  1. public class App : Application  
  2. {  
  3.     public App()  
  4.     {  
  5.         // The root page of your application  
  6.         MainPage = new NavigationPage(new SessionsView())  
  7.         {    
  8.             BarBackgroundColor = Color.White,  
  9.             BarTextColor = Color.Black,  
  10.             BackgroundColor = Color.White,  
  11.         };  
  12.     }  
  13.   
  14.     protected override void OnStart()  
  15.     {  
  16.         // Handle when your app starts  
  17.     }  
  18.   
  19.     protected override void OnSleep()  
  20.     {  
  21.         // Handle when your app sleeps  
  22.     }  
  23.   
  24.     protected override void OnResume()  
  25.     {  
  26.         // Handle when your app resumes  
  27.     }  
  28. }  
If you run the application it must behave as before.