Creating the main page

The User Interface(UI) of a Tizen .NET Application can be efficiently built by using the Xamarin.Forms API, which is an open source cross-platform UI framework for various platforms such as iOS, Android, and Windows.

If you are new to Xamarin.Forms, Creating the main page and Navigating to a second page can be a good starting point to develop UIs with Xamarin.Forms. On the other hand, if you had previous experiences with Xamarin.Forms, you can recollect the basic concepts from the first few tutorials. A more comprehensive documentation on Xamarin.Forms is available at the Xamarin.Forms official website.

Understanding the anatomy of a Xamarin.Forms Application

Page, Application, and FormsApplication

There are three important base classes that you need to understand before developing a Tizen.NET application with Xamarin.Forms: Page, Application, and FormsApplication.

Page is the base class that occupies the entire screen. A typical application has an initial page that first appears when the user clicks the icon of the application. If the application provides multiple pages, the user can navigate from the initial page to other pages based on the application's navigation logic.

Application class represents a Xamarin.Forms application that manages one or more Page objects. The class contains application-scope resources and application's life-cycle methods, which are called when the application state changes.

FormsApplication represents a Tizen application that launches the Xamarin.Forms application(the object that inherits the Application class). FormsApplication is the base class that is responsible for initializing the Xamarin.Forms framework

In the Solution Explorer of the MySteps project, each .cs file(or a file group of .xaml and .cs) contains a derived class that directly or indirectly inherits from one of the classes above:

  • MainPage.xaml and MainPage.xaml.cs define a derived class named MainPage which directly inherits from ContentPage, which itself indirectly inherits from Page.
  • App.xaml and App.xaml.cs define a derived class named App which directly inherits from Application.
  • MySteps.cs defines a derived class named Program which directly inherits from FormsApplication.

.xaml files

A XAML file(.xaml) is a file written in the XAML markup language—a declarative XML-based markup language. The file contains the definition of the page's UI—defining several UI components of a single page in a hierarchical manner. UI in Xamarin.Forms is defined as a hierarchy of Page, Layout, and View. Page is the root container that holds the most outer Layout.Layout defines how the View elements are positioned on the screen. Views are UI components such as a Label or a Button.

In the MainPage.xaml file, the code uses a ContentPage object for Page, StackLayout object for Layout, and a single View object: Label.

.xaml.cs files

Although XAML presents a good UI structure, that alone is not enough to implement a functioning UI. For example, developers need to implement responses to user interactions. Thus, every XAML file has an associated C# file(.xaml.cs) often referred to as the code behind file or simply code behind. In Visual Studio, you can find the associated .xaml.cs file when you expand the .xaml file by clicking the white arrow button on the left side of a .xaml file.

Figure 1. .xaml.cs file

Entry point of the application

When the user clicks the application's icon on a Galaxy Watch screen, the application starts by calling the Main function in the MySteps.cs file. Let's first look at the code in MySteps.cs:

namespace MySteps
{
    class Program : Xamarin.Forms.Platform.Tizen.FormsApplication
    {
        protected override void OnCreate()
        {
            base.OnCreate();
            LoadApplication(new App());
        }

        static void Main(string[] args)
        {
            var app = new Program();
            Forms.Init(app);
            global::Tizen.Wearable.CircularUI.Forms.FormsCircularUI.Init();
            app.Run(args);
        }
    }
}

At a high level, the Main function creates and runs an instance of the App class, which derived from Application. The instance of the App class shows and manages the UI pages of your application. If you look at the code in App.xaml.cs, the App class initializes the MainPage property to an instance of the MainPage class.

namespace MySteps
{
  [XamlCompilation(XamlCompilationOptions.Compile)]
  public partial class App : Application
  {
      public App()
      {
          InitializeComponent();
          MainPage = new MySteps.MainPage();
      }
...
  }
}

In the next section, we'll modify the MainPage so that it shows a text that welcomes the users.

Creating a welcoming page

MainPage.xaml and MainPage.xaml.cs represent the initial start-up page for MySteps. Make the following changes in MainPage.xaml to create a welcoming page for the user:

  1. Change the text of Label from "Welcome to Xamarin Forms!" to "Welcome to My Steps!".

  2. Add a Button with the Start text below the Label.

The following shows the finished MainPage.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="MySteps.MainPage">
  <ContentPage.Content>
    <StackLayout>
      <Label Text="Welcome to MySteps!"
          VerticalOptions="CenterAndExpand"
          HorizontalOptions="CenterAndExpand"/>
      <Button Text="Run"/>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>
  1. Build and run MySteps. You can see the following screen on a Tizen Wearable emulator.
Figure 2. Running MySteps on a Tizen Wearable emulator.

Notice that clicking the Start button does nothing because we haven't specified what to do when the user clicks on it. In the next tutorial, we will show you how to move between pages in MySteps.