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.
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 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:
Change the text of Label from "Welcome to Xamarin Forms!" to "Welcome to My Steps!".
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.
Manage Your Cookies
We use cookies to improve your experience on our website and to show you relevant
advertising. Manage you settings for our cookies below.
Essential Cookies
These cookies are essential as they enable you to move around the website. This
category cannot be disabled.
Company
Domain
Samsung Electronics
.samsungdeveloperconference.com
Analytical/Performance Cookies
These cookies collect information about how you use our website. for example which
pages you visit most often. All information these cookies collect is used to improve
how the website works.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Functionality Cookies
These cookies allow our website to remember choices you make (such as your user name, language or the region your are in) and
tailor the website to provide enhanced features and content for you.
Company
Domain
LinkedIn
.ads.linkedin.com, .linkedin.com
Advertising Cookies
These cookies gather information about your browser habits. They remember that
you've visited our website and share this information with other organizations such
as advertisers.
Company
Domain
LinkedIn
.linkedin.com
Meta (formerly Facebook)
.samsungdeveloperconference.com
Google Inc.
.samsungdeveloperconference.com
Preferences Submitted
You have successfully updated your cookie preferences.