WPF实时时间显示demo(MVVM)

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

运行结果:

实现步骤:

1.界面

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

复制代码

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

2.ViewModel层构建

新建了一个TimeViewModel.cs的文件

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

复制代码

 /// <summary>
    /// 管理时间和通知UI更新
    /// </summary>
    class TimeViewModel : INotifyPropertyChanged
    {
        public event PropertyChangedEventHandler PropertyChanged;

        private string _currentTime;
        private DispatcherTimer _timer;

        //构造函数
        public TimeViewModel()
        {
            _timer = new DispatcherTimer();
            _timer.Interval = TimeSpan.FromSeconds(1);//更新频率设为每秒
            _timer.Tick += Time_Tick;
            _timer.Start();
            /*
             *从这一刻开始，_timer 开始计数。
             *每当 _timer 的时间间隔（1秒）到达时，它都会触发 Tick 事件。
             *由于 Timer_Tick 方法被添加为 Tick 事件的事件处理程序，因此每次 Tick 事件被触发时，Timer_Tick 方法都会被调用。
             *在 Timer_Tick 方法内部，调用了 UpdateTime 方法来更新 _currentTime 字段，
             *并由于 _currentTime 字段的 set 访问器内部调用了 OnPropertyChanged 方法，
             *这会导致 PropertyChanged 事件被触发，
             *通知任何监听这个事件的UI组件或其他对象，CurrentTime 属性的值已经改变。
             */

            updateTime();//初始化
        }

        private void Time_Tick(object sender, EventArgs e)
        {
            updateTime();
        }

        private void updateTime()
        {
            CurrentTime = DateTime.Now.ToString("HH:mm:ss");
        }

        public string CurrentTime
        {
            get { return _currentTime; }
            set {
                _currentTime = value;
                OnPropertyChanged(nameof(CurrentTime));
            }
        }

        private void OnPropertyChanged(string v)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this,new PropertyChangedEventArgs(v));
            }
        }

       
    }

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

复制代码

    public partial class MainWindow : Window
    {
        private TimeViewModel _viewModel;
        public MainWindow()
        {
            InitializeComponent();
            _viewModel = new TimeViewModel();
            this.DataContext = _viewModel;
        }
    }