Development (Advanced)
Step 1: Adding the assets
-
Download and unpack the extended assets file.
The basic assets pack consists of one folder...
... which contains one additional image:
-
charging image file (res/charging.png)
-
-
Select the unpacked folder, that is res, 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.
- Confirm the following pop-up to replace the content of the res folder of the project.
- Make sure that there are required files copied into the project folders.
Learn more by watching the video
Step 2: Updating the view
- Go to Solution Explorer window and open the
TextWatchApplication.xaml
file.
-
Add a Label element responsible for displaying a percentage value of the battery level and an Image element responsible for displaying a charging indicator.
<?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="26" TextColor="#FFFFFF" Text="{Binding Time, StringFormat='{}{0:HH:mm}'}" /> <Label AbsoluteLayout.LayoutBounds="150, 269, 60, 25" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="6" TextColor="#C0D5F4" Text="50%" /> <Image AbsoluteLayout.LayoutBounds="142, 275, 10, 13" Source="charging.png" IsVisible="True" /> </AbsoluteLayout> </ContentPage> </Application.MainPage> </Application>
At this point, you should have a watchface, which displays not only time and seconds' indicator, but also charging icon and fixed battery level percent. On the next steps, we are going to read actual data from Tizen Battery API.
Learn more by watching the video
Step 3: Updating the view model
- Go to Solution Explorer window and open the
ClockViewModel.cs
file.
-
Add two properties responsible for storing information about battery percentage level (
BatteryPercent
) and charging state (IsCharging
).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(); SecondsRotation = _time.Second * 6; OnPropertyChanged(nameof(SecondsRotation)); } } public int SecondsRotation { get; private set; } public bool IsCharging { get; private set; } public int BatteryPercent { get; private set; } public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged([CallerMemberName] string propertyName = "") { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } }
-
Add a
using
statement forTizen.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;
-
Create a class constructor and set initial values to created properties.
using System; using System.ComponentModel; using System.Runtime.CompilerServices; using System.Collections.Generic; using System.Linq; using System.Text; using System.Tizen; namespace WatchFace { public class ClockViewModel : INotifyPropertyChanged { DateTime _time; public DateTime Time { get => _time; set { if (_time == value) return; _time = value; OnPropertyChanged(); SecondsRotation = _time.Second * 6; OnPropertyChanged(nameof(SecondsRotation)); } } public int SecondsRotation { get; private set; } public bool IsCharging { get; private set; } public int BatteryPercent { get; private set; } public ClockViewModel() { IsCharging = Battery.IsCharging; BatteryPercent = Battery.Percent; } public event PropertyChangedEventHandler PropertyChanged; protected void OnPropertyChanged([CallerMemberName] string propertyName = "") { PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName)); } } }
-
Extend the class constructor by defining handlers of
ChargingStateChanged
andPercentChanged
events.public ClockViewModel() { IsCharging = Battery.IsCharging; BatteryPercent = Battery.Percent; Battery.ChargingStateChanged += OnChargingStateChanged; Battery.PercentChanged += OnPercentChanged; }
-
Implement defined event handlers.
public ClockViewModel() { IsCharging = Battery.IsCharging; BatteryPercent = Battery.Percent; Battery.ChargingStateChanged += OnChargingStateChanged; Battery.PercentChanged += OnPercentChanged; } private void OnPercentChanged(object sender, BatteryPercentChangedEventArgs e) { BatteryPercent = e.Percent; OnPropertyChanged(nameof(BatteryPercent)); } private void OnChargingStateChanged(object sender, BatteryChargingStateChangedEventArgs e) { IsCharging = e.IsCharging; OnPropertyChanged(nameof(IsCharging)); }
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.
Learn more by watching the video
Step 4: Creating bindings to the view model
- Go to Solution Explorer window and open the
TextWatchApplication.xaml
file.
-
Create bindings to previously created view model properties.
<?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="26" TextColor="#FFFFFF" Text="{Binding Time, StringFormat='{}{0:HH:mm}'}" /> <Label AbsoluteLayout.LayoutBounds="150, 269, 60, 25" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontSize="6" TextColor="#C0D5F4" Text="{Binding BatteryPercent, StringFormat='{0}%'}" /> <Image AbsoluteLayout.LayoutBounds="142, 275, 10, 13" Source="charging.png" IsVisible="{Binding IsCharging}" /> </AbsoluteLayout> </ContentPage> </Application.MainPage> </Application>
Learn more by watching the video
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.
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.
You're done!
Congratulations! You have successfully achieved the goal of this Code Lab activity. Now, you can develop your own Digital Watch Face by yourself! But, if you're having trouble, you may check out the link below.