UWP C# MVVM 时钟示例

Question

我试图从一个简单的时钟示例开始。 我想知道如何将普通时钟转换为 MVVM。 有人可以帮忙吗？ 谢谢。

private void startClock()
    {
        currentTime = DateTime.Now;
        DispatcherTimer clocktimer = new DispatcherTimer();
        clocktimer.Interval = TimeSpan.FromSeconds(1);
        clocktimer.Tick += Clocktimer_Tick;
        clocktimer.Start();
    }

    private void Clocktimer_Tick(object sender, object e)
    {
        currentTime = DateTime.Now;
        updateTimeDisplay(currentTime);
    }

    private void updateTimeDisplay(DateTime time)
    {
        Time.Text = time.ToString(@"HH\:mm");
        Sec.Text = time.ToString(@"ss");
        Date.Text = time.ToString(@"ddd  dd-MM-yyyy");
    }

更新我无法发布更多代码，因为系统已标记且无法发布。

Answer 1

查看 model 会是这样的：

public class ClockViewModel : ViewModelBase
{
    public ClockViewModel()
    {
        var _ = UpdateCurrentDateTimeAsync();
    }

    public DateTime? CurrentDateTime { get; private set; }

    private async Task UpdateCurrentDateTimeAsync()
    {
        while (true)
        {
            CurrentDateTime = DateTime.Now;
            OnPropertyChanged(nameof(CurrentDateTime));

            await Task.Delay(1000);
        }
    }
}

只需将其设置为视图的DataContext并将一些视觉对象（例如TextBox ）绑定到CurrentDateTime属性。 ViewModelBase是一个非常基本的INotifyPropertyChanged实现。

Answer 2

UWP C# MVVM 时钟示例

您可以在视图模式中创建字符串属性并将其与 xaml 中的文本块绑定。 当你更新这个属性时，它会通知 ui 更新。

例如：

public class ViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public ViewModel()
    {
        startClock();
    }

    private DateTime _currentTime;
    private void startClock()
    {
        _currentTime = DateTime.Now;
        DispatcherTimer clocktimer = new DispatcherTimer();
        clocktimer.Interval = TimeSpan.FromSeconds(1);
        clocktimer.Tick += Clocktimer_Tick;
        clocktimer.Start();
    }

    private void Clocktimer_Tick(object sender, object e)
    {
        _currentTime = DateTime.Now;
        updateTimeDisplay(_currentTime);
    }

    private void updateTimeDisplay(DateTime time)
    {
        Time = time.ToString(@"HH:mm:ss");
    }
    public void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        // Raise the PropertyChanged event, passing the name of the property whose value has changed.
        this.PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
    private string _time;
    public string Time
    {
        get
        {
            return _time;
        }
        set
        {
            _time = value;
            this.OnPropertyChanged();

        }
    }
}

Xaml代码

<Page.DataContext>
    <local:ViewModel />
</Page.DataContext>
<Grid>
    <TextBlock
        x:Name="Time"
        HorizontalAlignment="Center"
        VerticalAlignment="Center"
        FontSize="25"
        Text="{Binding Time}"
        TextAlignment="Center" />
</Grid>

详细的 mvvm 设计请参考数据绑定深度文档。