Development (Basic)

Step 1: Preparing the area

Open Visual Studio IDE to create a new Tizen Wearable 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 platform.

    b. Select Tizen Watchface App project type.

    c. Specify the project Name.

    d. Set the project Location.

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

  1. Project structure should look like below (Solution Explorer window):

Step 2: Adding assets

  1. Download and unpack the basic assets for the basic version of the application. The basic assets pack consists of two folders ...

    ... which contain the following set of images:

    • face image file (res/face.png)

    • hour hand image file (res/hour_hand.png)

    • minute hand image file (res/minute_hand.png)

    • second hand image file (res/second_hand.png)

    • nut image file (res/nut.png)

    • custom application icon - existing file should be replaced (shared/res/WatchFaceSDC.png). Note that the application icon file name will be different if you choose own name for the project.

  2. Select and copy the unpacked folders and paste them directly to the WatchFaceSDC project.

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

Step 3: Creating the view

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

  2. Remove the StackLayout element, which has been prepared by default, and add an empty AbsoluteLayout element. All other view elements will be placed in the AbsoluteLayout element to be positioned absolutely.

    <?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="WatchFaceSDC.TextWatchApplication">
        <Application.MainPage>
            <ContentPage>
                <AbsoluteLayout>
    
                </AbsoluteLayout>
            </ContentPage>
        </Application.MainPage>
    </Application>
    
  3. Add image elements responsible for displaying a watch face, all the watch hands, as well as a nut that connects all hands of the watch.

    <AbsoluteLayout>
        <Image AbsoluteLayout.LayoutFlags="All"
               AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
               Source="face.png" />
    
        <Image AbsoluteLayout.LayoutBounds="177, 90, 6, 180"
               Source="hour_hand.png" />
    
        <Image AbsoluteLayout.LayoutBounds="178, 65, 4, 230"
               Source="minute_hand.png" />
    
        <Image AbsoluteLayout.LayoutBounds="179, 40, 2, 280"
               Source="second_hand.png" />
    
        <Image AbsoluteLayout.LayoutFlags="PositionProportional"
               AbsoluteLayout.LayoutBounds=".5, .5, 17, 17"
               Source="nut.png" />
    </AbsoluteLayout>
    

    Right now the application can be run on the target device. To do this, follow the steps below:

    • Press Ctrl+Shift+B keys to build the project.
    • Press Ctrl+F5 keys to start installing the application.

    The application displays all UI layers but nothing more happens. In the next steps of the tutorial we will implement application's logic making the watch work.

Step 4: Creating the view model

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

  2. Define three properties responsible for storing information about rotation value of each watch hand.

    DateTime _time;
    
    public double HourHandRotation { get; private set; }
    public double MinuteHandRotation { get; private set; }
    public double SecondHandRotation { get; private set; }
    
    public DateTime Time
    {
        get => _time;
        set
        {
            if (_time == value) return;
            _time = value;
            OnPropertyChanged();
        }
    }
    
  3. Calculate new rotation value for each watch hand, whenever the Time property setter is executed.

    public DateTime Time
    {
        get => _time;
        set
        {
            if (_time == value) return;
            _time = value;
    
            var hourHandRotation = (_time.Hour + (double)_time.Minute / 60) * 30;
    
            var minuteHandRotation = (_time.Minute + (double)_time.Second / 60) * 6;
    
            var secondHandRotation = _time.Second * 6;
    
            OnPropertyChanged();
        }
    }
    
  4. Update created properties and notify the application about changes.

    public DateTime Time
    {
        get => _time;
        set
        {
            if (_time == value) return;
            _time = value;
    
            var hourHandRotation = (_time.Hour + (double)_time.Minute / 60) * 30;
            if (hourHandRotation != HourHandRotation)
            {
                HourHandRotation = hourHandRotation;
                OnPropertyChanged(nameof(HourHandRotation));
            }
    
            var minuteHandRotation = (_time.Minute + (double)_time.Second / 60) * 6;
            if (minuteHandRotation != MinuteHandRotation)
            {
                MinuteHandRotation = minuteHandRotation;
                OnPropertyChanged(nameof(MinuteHandRotation));
            }
    
            var secondHandRotation = _time.Second * 6;
            if (secondHandRotation != SecondHandRotation)
            {
                SecondHandRotation = secondHandRotation;
                OnPropertyChanged(nameof(SecondHandRotation));
            }
    
            OnPropertyChanged();
        }
    }
    

    So we already have all important rotation data which values are updated when it is necessary. All that is left is to bind them to the user interface.

Step 5: Creating bindings to the view model

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

  2. Create bindings to previously created view model properties.

    <AbsoluteLayout>
        <Image AbsoluteLayout.LayoutFlags="All"
               AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
               Source="face.png" />
    
        <Image AbsoluteLayout.LayoutBounds="177, 90, 6, 180"
               Source="hour_hand.png"
               Rotation="{Binding HourHandRotation}" />
    
        <Image AbsoluteLayout.LayoutBounds="178, 65, 4, 230"
               Source="minute_hand.png"
               Rotation="{Binding MinuteHandRotation}" />
    
        <Image AbsoluteLayout.LayoutBounds="179, 40, 2, 280"
               Source="second_hand.png"
               Rotation="{Binding SecondHandRotation}" />
    
        <Image AbsoluteLayout.LayoutFlags="PositionProportional"
               AbsoluteLayout.LayoutBounds=".5, .5, 17, 17"
               Source="nut.png" />
    </AbsoluteLayout>
    

    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. But launched application does not show the current time. Besides, the watch hands do not move.

    This is not a mistake. In order to allow the application to work, you should set it as a watch face. Go to the next step to find out how to do it.

Step 6: Setting an application as the watch face

  1. Press the Back button to close the WatchFaceSDC application if it is launched.

  2. If necessary, use the Home button to switch the device screen to the default watch face.

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

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


The application sets the watch face and shows the correct time. Enjoy using your new watch face!

The next steps of this tutorial are optional. But if you want to know how to display the battery information on the watch face, go to Development (Advance).