Development (Advanced)

Step 1: Adding the assets for the extended version

  1. Download and unpack the additional assets for the extended version of the application. The additional assets pack consists of one folder...

    It contains one additional image:

    • charging image file (res/charging.png)

  2. Select and copy the unpacked folder and paste it directly to the WatchFaceSDC project.

  3. Confirm following popup to replace the content of the res folder of the project.

Step 2: Updating the view

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

  2. Add an image element responsible for displaying a charging indicator and a label element responsible for displaying a percentage value of the battery level.

    <Image AbsoluteLayout.LayoutFlags="All"
           AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
           Source="face.png" />
    
    <Image AbsoluteLayout.LayoutFlags="XProportional"
           AbsoluteLayout.LayoutBounds=".5, 269, 15, 21"
           Source="charging.png" />
    
    <Label AbsoluteLayout.LayoutFlags="XProportional"
           AbsoluteLayout.LayoutBounds=".5, 300, 100, 19"
           Text="0"
           FontFamily="BreezeSans"
           FontSize="8.4"
           HorizontalTextAlignment="Center"
           TextColor="White" />
    
    <Image AbsoluteLayout.LayoutBounds="177, 90, 6, 180"
           Source="hour_hand.png"
           Rotation="{Binding HourHandRotation}" />
    

    Right now the application runs on the target device and sets as the device watch face.

    The application UI is now extended by two additional elements.

    But still we have something to do. The charger indicator is displayed permanently, regardless of the charging state. Moreover, the battery level value does not display proper value. Solving these problems will be the goal of the further part of the tutorial.

Step 3: Updating the view model

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

  2. Define two properties responsible for storing information about battery percentage value and charging state.

    public double HourHandRotation { get; private set; }
    public double MinuteHandRotation { get; private set; }
    public double SecondHandRotation { get; private set; }
    public int BatteryPercentage { get; private set; }
    public bool IsCharging { get; private set; }
    
    public DateTime Time
    {
    
  3. Create a class constructor and set initial values to created properties.

    public event PropertyChangedEventHandler PropertyChanged;
    
    public ClockViewModel()
    {
        BatteryPercentage = Battery.Percent;
        IsCharging = Battery.IsCharging;
    }
    
    protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    
  4. Add a using statement for Tizen.System to get access to the Tizen Battery API.

    using System;
    using System.ComponentModel;
    using System.Runtime.CompilerServices;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Tizen.System;
    
    namespace WatchFaceSDC
    {
    
  5. Extend the class constructor by defining handlers of PercentChanged and ChargingStateChanged events.

    
    public ClockViewModel()
    {
        BatteryPercentage = Battery.Percent;
        IsCharging = Battery.IsCharging;
    
        Battery.PercentChanged += OnBatteryPercentChanged;
        Battery.ChargingStateChanged += OnBatteryChargingStateChanged;
    }
    
  6. Implement defined event handlers.

    
    public ClockViewModel()
    {
        BatteryPercentage = Battery.Percent;
        IsCharging = Battery.IsCharging;
    
        Battery.PercentChanged += OnBatteryPercentChanged;
        Battery.ChargingStateChanged += OnBatteryChargingStateChanged;
    }
    
    private void OnBatteryPercentChanged(object sender, BatteryPercentChangedEventArgs e)
    {
        BatteryPercentage = e.Percent;
        OnPropertyChanged(nameof(BatteryPercentage));
    }
    
    private void OnBatteryChargingStateChanged(object sender, BatteryChargingStateChangedEventArgs e)
    {
        IsCharging = e.IsCharging;
        OnPropertyChanged(nameof(IsCharging));
    }
    
    protected void OnPropertyChanged([CallerMemberName] string propertyName = "")
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    

    So we already have all data needed to display battery properties on the watch face. All that is left is to bind them to the user interface.

Step 4: 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.

    <Image AbsoluteLayout.LayoutFlags="XProportional"
           AbsoluteLayout.LayoutBounds=".5, 269, 15, 21"
           Source="charging.png"
           IsVisible="{Binding IsCharging}" />
    
    <Label AbsoluteLayout.LayoutFlags="XProportional"
           AbsoluteLayout.LayoutBounds=".5, 300, 100, 19"
           Text="{Binding BatteryPercentage, StringFormat='{0}%'}"
           FontFamily="BreezeSans"
           FontSize="8.4"
           HorizontalTextAlignment="Center"
           TextColor="White" />
    

    Great! We have just completed the implementation of the extended functionality of the watch.

    Right now the application can be run on the target device and set as the device watch face. As you can see, the charging indicator is displayed only when the device is plugged in to the charger. Additionally, the current value of the battery level is displayed on the screen.


You're done!

Congratulations! You have successfully achieved the goal of this Code Lab activity. Now, you can develop your own analog watch face by yourself! But, if you're having trouble, you may check out the link below.

Analog Watch Face Complete Code1.67 MB