Development (Basic)

Step 1: Creating a new project

Open Visual Studio IDE to create a new Tizen Watch Face App.

  1. Go to File > New > Project to open the New Project window.

  2. In the New Project window do the following steps:

    a. Select Installed > Visual C# > Tizen 4.0.

    b. Select Tizen Watchface App project type.

    c. Specify the project Name (Watchface).

    d. Set the project Location.

    e. Click the OK button to start creating a new project.

  3. Project structure should look like the following (Solution Explorer window).


Step 2: Adding assets

  1. Download and unpack the basic assets file.

    The basic assets pack consists of two folders...

    ... which contain the following set of images:

    • Background image file (res/background.png)

    • Image with a satellite icon for displaying seconds (res/satellite.png)

    • Custom application icon - existing file should be replaced (shared/res/WatchFace.png). Please notice that application icon filename will be different if you choose your own name for the project. In such case, make sure you update icon tag in tizen-manifest.xml file.

  2. Select the unpacked folders, that is res and shared, and copy them with context menu or press Control + C. Next, make a left mouse click on the project name WatchFace in Solution Explorer and press Control + V to paste copied folders directly to the WatchFace project.

  1. Confirm the following pop-ups to replace the content of the res and shared folders of the project.

  1. Make sure that there are required files copied into the project folders.


Step 3: Creating the view

  1. Go to Solution Explorer window and open the TextWatchApplication.xaml file.

  1. Remove the StackLayout element, which has been prepared by default, and add an empty AbsoluteLayout element.

    <?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="WatchFace.TextWatchApplication">
       <Application.MainPage>
           <ContentPage>
               <AbsoluteLayout>
    
               </AbsoluteLayout>
           </ContentPage>
       </Application.MainPage>
    </Application>
    
  2. Add an Image as children of previously created AbsoluteLayout, which will be the background. AbsoluteLayout.LayoutBounds is using bounds that are set as a comma-separated list of values, X, Y, Width, and Height.

    <?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="WatchFace.TextWatchApplication">
       <Application.MainPage>
           <ContentPage>
               <AbsoluteLayout>
                   <Image AbsoluteLayout.LayoutBounds="0, 0, 360, 360"
                          Source="background.png" />
               </AbsoluteLayout>
           </ContentPage>
       </Application.MainPage>
    </Application>
    

Notice that Source attribute was set to background.png and it's a file that we have added to application resources in previous step.

  1. Add an Image displaying satellite, which will be rotated around the watchface to indicate the current second.

    <?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="WatchFace.TextWatchApplication">
       <Application.MainPage>
           <ContentPage>
               <AbsoluteLayout>
                   <Image AbsoluteLayout.LayoutBounds="0, 0, 360, 360"
                          Source="background.png" />
    
                   <Image AbsoluteLayout.LayoutBounds="0, 0, 360, 360"
                          Source="satellite.png"
                          Rotation="0" />
               </AbsoluteLayout>
           </ContentPage>
       </Application.MainPage>
    </Application>
    
  2. Add a Label, which will display current time.

    <?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="WatchFace.TextWatchApplication">
       <Application.MainPage>
           <ContentPage>
               <AbsoluteLayout>
                   <Image AbsoluteLayout.LayoutBounds="0, 0, 360, 360"
                          Source="background.png" />
    
                   <Image AbsoluteLayout.LayoutBounds="0, 0, 360, 360"
                          Source="satellite.png"
                          Rotation="0" />
    
                   <Label AbsoluteLayout.LayoutBounds="0, 0, 360, 360"
                          HorizontalTextAlignment="Center"
                          VerticalTextAlignment="Center"
                          FontAttributes="Bold"
                          FontSize="24"
                          TextColor="#FFFFFF"
                          Text="00:00" />
               </AbsoluteLayout>
           </ContentPage>
       </Application.MainPage>
    </Application>
    

To build and run this application on the device, follow the steps below:

  • Press Ctrl+Shift+B keys to build the project.

  • Press Ctrl+F5 keys to start installing the application.


After these changes, our application should look like this:

Step 4: Edit the view model

  1. Go to Solution Explorer window and open the ClockViewModel.cs file

  1. Add SecondsRotation property, which will store rotation value in degrees, based on current second.

    using System;
    using System.ComponentModel;
    using System.Runtime.CompilerServices;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    
    namespace WatchFace
    {
       public class ClockViewModel : INotifyPropertyChanged
       {
           DateTime _time;
    
           public DateTime Time
           {
               get => _time;
               set
               {
                   if (_time == value) return;
                   _time = value;
                   OnPropertyChanged();
               }
           }
    
           public int SecondsRotation { get; private set; }
    
           public event PropertyChangedEventHandler PropertyChanged;
    
           protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
           {
               PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
           }
       }
    }
    
  2. Whenever the Time property setter is executed, calculate new value for SecondsRotation based on current second and notify the view about the change by calling OnPropertyChanged method with correct parameter.

    public DateTime Time
    {
       get => _time;
       set
       {
           if (_time == value) return;
           _time = value;
           OnPropertyChanged();
    
           SecondsRotation = _time.Second * 6;
           OnPropertyChanged(nameof(SecondsRotation));
       }
    } 
    

At this point, SecondsRotation have been calculated and the view has been informed. Next, we have to create a binding for that property, so the user interface can be updated.


Step 5: Creating bindings to the view model

  1. Go to Solution Explorer window and open the TextWatchApplication.xaml file.

  1. Add Bindings to the previously created properties in the view model.

    <?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="WatchFace.TextWatchApplication">
       <Application.MainPage>
           <ContentPage>
               <AbsoluteLayout>
                   <Image AbsoluteLayout.LayoutBounds="0, 0, 360, 360"
                          Source="background.png" />
    
                   <Image AbsoluteLayout.LayoutBounds="0, 0, 360, 360"
                          Source="satellite.png"
                          Rotation="{Binding SecondsRotation}" />
    
                   <Label AbsoluteLayout.LayoutBounds="0, 0, 360, 360"
                          HorizontalTextAlignment="Center"
                          VerticalTextAlignment="Center"
                          FontAttributes="Bold"
                          FontSize="24"
                          TextColor="#FFFFFF"
                          Text="{Binding Time, StringFormat='{}{0:HH:mm}'}" />
               </AbsoluteLayout>
           </ContentPage>
       </Application.MainPage>
    </Application>
    

Notice that we have created binding to the Time property, which is type of DateTime at the ClockViewModel.cs file. We used StringFormat to display the time in a required format.


Great!

We have just completed the implementation of the basic functionality of the watch. Right now the application can be run on the target device or emulator. To build and run this application on the device, follow the steps below:

  • Press Ctrl+Shift+B keys to build the project.

  • Press Ctrl+F5 keys to start installing the application.

If you are using the target device, then launched application does not show the current time and the watch digits do not change. This is not a mistake. In order to allow the application to work, you should set it as a watch face.

Step 6: Setting an application as the default watch face

  1. Press the Back button (Upper button on the right side) to close the WatchFace application if it is launched.

  2. If necessary, use the Home button (Bottom button on the right side) to switch the device screen to the default watch face.

  1. Tap and hold the device screen, and then rotate the Bezel to find your watch face on the list of available watch faces.

  1. Tap a desired watch face. The watch face you selected should be applied on the device screen.

The application sets as the watch face and shows the correct time. Now, you can enjoy using your new watch face!

If you want to know how to display the battery information on the watch face, it is highly recommended to follow the next steps in Development (Advanced).