在 Windows 10 移动应用程序中创建秒表计数器控件 [英] Create a Stopwatch Counter Control in Windows 10 Mobile App

问题描述

我目前正在开发 Windows 10 移动应用

我想做一个这样的秒表:

我遵循了本教程:

当然，它仍然需要做更多的工作才能让它变得更好，满足您的需求，但是有很多关于圆形/径向控件的博客/帖子.你可以看看这篇文章，此博客 和默认 ProgressBar 的样式.有了这些，您可以使用合适的 VisualStates 和过渡设计自己的控件，看起来就像您想要的那样.

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.

解决方案

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.

这篇关于在 Windows 10 移动应用程序中创建秒表计数器控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！