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
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.csdefine a derived class named MainPage which directly inherits from ContentPage, which itself indirectly inherits from Page.
App.xaml.csdefine a derived class named App which directly inherits from Application.
MySteps.csdefines a derived class named Program which directly inherits from FormsApplication.
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.
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.
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
class Program : Xamarin.Forms.Platform.Tizen.FormsApplication
protected override void OnCreate()
static void Main(string args)
var app = new Program();
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.
public partial class App : Application
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:
Change the text of Label from "Welcome to Xamarin Forms!" to "Welcome to My Steps!".
The following shows the finished
<?xml version="1.0" encoding="utf-8" ?>
<Label Text="Welcome to MySteps!"
- Build and run MySteps. You can see the following screen 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.