在 Windows 10 移动应用程序中创建秒表计数器控件

Question

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

我想制作这样的秒表：

我遵循了这个教程：Create a StopWatch Counter control in WPF(XAML)

但是我正在研究 Windows 10，所以我不能使用 IMultiValueConverter

任何帮助我解决这个问题的建议..非常感谢。

Answer 1

这是您可以开始的东西 - 可以像这样使用：

<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>

隐藏代码：

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();
    }
}

结果：

当然，它还需要做更多的工作才能让它变得更好，满足您的需求，但是有很多 blogs/posts 关于 circular/radial 控件。你可以看看at this post, this blog和默认ProgressBar的样式。通过这些，您可以使用合适的 VisualStates 和过渡设计您自己的控件，看起来就像您想要的那样。

在 Windows 10 移动应用程序中创建秒表计数器控件

Create a Stopwatch Counter Control in Windows 10 Mobile App

c#

xaml

stopwatch

windows-store-apps

windows-10-mobile