UWP C# MVVM 时钟示例答案

【问题标题】：UWP C# MVVM clock exampleUWP C# MVVM 时钟示例
【发布时间】：2021-03-20 12:39:15
【问题描述】：

我试图从一个简单的时钟示例开始。我想知道如何将普通时钟转换为 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");
    }

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

【问题讨论】：

标签： c# mvvm uwp

【解决方案1】：

视图模型将是这样的：


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 实现。

【讨论】：

我能知道我应该把startclock放在哪里吗？当应用程序启动时，时钟将启动.. 因为我试图掌握这个概念。
@mylim: ClockViewModel 构造函数启动时钟。首先创建视图，然后创建视图模型实例，然后将后者分配给视图的DataContext。仅此而已 - 由于这是 MVVM，因此视图不包含任何 startClock、计时器等。
我测试了它加载正确 DateTime 的代码 .. 然而，tick 并不是每秒都发生更新秒数......它只是冻结在那里......
这段代码运行良好——事实上，我已经创建了简单的 WPF 应用程序来输入它。我怀疑，你测试了一些修改过的代码 :) 所以，最好展示一下。
@mylim，我在上面贴了 uwp 代码，它有效吗？

【解决方案2】：

UWP C# MVVM 时钟示例

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

例如：

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设计请参考data binding in depth文档。

【讨论】：

它有效.. 谢谢！现在它给了我一个更好的画面。我将研究 MVVM mediaplayer 并看看它是如何发挥作用的......谢谢。