当前位置:   article > 正文

WPF实时时间显示demo(MVVM)

WPF实时时间显示demo(MVVM)

        跟着b站的视频学习做一个界面,它里面的时间不能实时刷新,因此自己研究写一个,同时加深一下自己对MVVM的理解.

        运行结果:

         实现步骤:

        1.界面

        界面设计就是放置了一个TextBlock,它的text绑定了ViewModel层里面的公告属性CurrentTime.

  1. <Grid>
  2. <TextBlock Text="{Binding CurrentTime}" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="24"></TextBlock>
  3. </Grid>

        2.ViewModel层构建

        新建了一个TimeViewModel.cs的文件

        在这个文件中,我首先让文件继承了INotifyPropertyChanged类,随机实现接口用于发放改变通知.然后我定义私有字段_currentTime和公有属性CurrtTime(与前端界面绑定的属性),在其set中设置监听,当属性改变时触发 PropertyChanged 事件,通知界面进行改变.之后,进行定时器的配置,在构造函数之中进行配置,设置为1s一变,并且将Time_Tick添加为Tric时间处理程序,Time_Trick里面绑定的是时间更新函数,至此实现整个流程成功.

  1. /// <summary>
  2. /// 管理时间和通知UI更新
  3. /// </summary>
  4. class TimeViewModel : INotifyPropertyChanged
  5. {
  6. public event PropertyChangedEventHandler PropertyChanged;
  7. private string _currentTime;
  8. private DispatcherTimer _timer;
  9. //构造函数
  10. public TimeViewModel()
  11. {
  12. _timer = new DispatcherTimer();
  13. _timer.Interval = TimeSpan.FromSeconds(1);//更新频率设为每秒
  14. _timer.Tick += Time_Tick;
  15. _timer.Start();
  16. /*
  17. *从这一刻开始,_timer 开始计数。
  18. *每当 _timer 的时间间隔(1秒)到达时,它都会触发 Tick 事件。
  19. *由于 Timer_Tick 方法被添加为 Tick 事件的事件处理程序,因此每次 Tick 事件被触发时,Timer_Tick 方法都会被调用。
  20. *在 Timer_Tick 方法内部,调用了 UpdateTime 方法来更新 _currentTime 字段,
  21. *并由于 _currentTime 字段的 set 访问器内部调用了 OnPropertyChanged 方法,
  22. *这会导致 PropertyChanged 事件被触发,
  23. *通知任何监听这个事件的UI组件或其他对象,CurrentTime 属性的值已经改变。
  24. */
  25. updateTime();//初始化
  26. }
  27. private void Time_Tick(object sender, EventArgs e)
  28. {
  29. updateTime();
  30. }
  31. private void updateTime()
  32. {
  33. CurrentTime = DateTime.Now.ToString("HH:mm:ss");
  34. }
  35. public string CurrentTime
  36. {
  37. get { return _currentTime; }
  38. set {
  39. _currentTime = value;
  40. OnPropertyChanged(nameof(CurrentTime));
  41. }
  42. }
  43. private void OnPropertyChanged(string v)
  44. {
  45. if (PropertyChanged != null)
  46. {
  47. PropertyChanged(this,new PropertyChangedEventArgs(v));
  48. }
  49. }
  50. }

        3.实例化TimeViewModel,并且设计数据上下文,让界面和ViewModel层完成最后的绑定

  1. public partial class MainWindow : Window
  2. {
  3. private TimeViewModel _viewModel;
  4. public MainWindow()
  5. {
  6. InitializeComponent();
  7. _viewModel = new TimeViewModel();
  8. this.DataContext = _viewModel;
  9. }
  10. }

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号