Create a Stopwatch Counter Control in Windows 10 Mobile App

Question

I'm currently working on Windows 10 Mobile App

And I want to make a stopwatch like this:

I followed this tutorial: Create a StopWatch Counter control in WPF(XAML)

But I'm working on Windows 10, so I can't use IMultiValueConverter

Any suggestion to help me go through this.. Thank you so much.

Answer 1

Here is something with what you can start - in this post Arek Kubiak liked source to his arc which can be used for example like this:

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" xmlns:arc="using:ArcControl">
    <Grid Width="80" Height="80">
        <arc:Arc Thickness="3" Fill="Blue"  PercentValue="{Binding Percent}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
        <TextBlock Text="{Binding Percent}" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>
</Grid>

code behind:

public sealed partial class MainPage : Page, INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public void RaiseProperty(string name) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));

    private int percent = 0;
    public int Percent
    {
        get { return percent; }
        set { percent = value; RaiseProperty(nameof(Percent)); }
    }

    private DispatcherTimer timer = new DispatcherTimer() { Interval = TimeSpan.FromSeconds(0.25) };

    public MainPage()
    {
        this.InitializeComponent();
        this.DataContext = this;
        timer.Tick += (s, e) => { Percent++; if (Percent > 99) Percent = 0; };
        timer.Start();
    }
}

The result:

Of course it still needs much more work to make it better, fit your needs, but there are lots of blogs/posts about circular/radial controls. You can take a look at this post, this blog and default ProgressBar's style. With those you can design your own control with suitable VisualStates and transition that will look like you just want it.