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:

• Xamarin Guide 1: Create a Xamarin Forms Project
• Xamarin Guide 2: Create the Model and the Data Source
• Xamarin Guide 3: Create the SessionsView
• Xamarin Guide 4: Create the SessionDetailsView
• Xamarin Guide 5: Add ShareService
• Xamarin Guide 6: Add Splash Screen, Name and Version
• Xamarin Guide 7: Add Support For WinRT Apps

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

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ENEI.SessionsApp.App">
    <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

App.xaml.cs

public partial class App : ContentPage
{
    public App()
    {
        InitializeComponent();
    }
}

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

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ENEI.SessionsApp.App">
</Application>

App.xaml.cs

public partial class App : Application
{
    public App()
    {
        InitializeComponent();
    }
}

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:

public class App : Application
{
    public App()
    {
        // The root page of your application
        MainPage = new NavigationPage(new SessionsView())
        {
            BarBackgroundColor = Color.White,
            BarTextColor = Color.Black,
            BackgroundColor = Color.White,
        };
    }

    protected override void OnStart()
    {
        // Handle when your app starts
    }

    protected override void OnSleep()
    {
        // Handle when your app sleeps
    }

    protected override void OnResume()
    {
        // Handle when your app resumes
    }
}

If you run the application it must behave as before.