WPF(C#)学习日志3:绑定与MVVM

1.绑定

在WPF中,数据绑定是一种重要的技术,它允许将数据源与UI元素进行关联,以实现数据的自动更新和同步。数据绑定使得在UI元素和后台数据之间实现双向交互变得更加简单和灵活。

在WPF中,可以使用以下几种方式进行数据绑定:

单项绑定(One-Way Binding):将数据源的值绑定到UI元素,一般在构造函数中初始化,只允许从数据源向UI元素传递数据,不会自动更新数据源。

双向绑定(Two-Way Binding):将数据源的值绑定到UI元素,并实现数据的双向同步,可以在UI元素上进行修改并自动更新到数据源。

单这几种绑定方式都不利于解耦,因此有了MVVM的思想。

2.MVVM

MVVM(Model-View-ViewModel)是一种用于软件设计的架构模式,特别适用于构建用户界面(UI)的应用程序。它在C#开发中广泛应用,并被许多框架和工具支持,如WPF(Windows Presentation Foundation)。

MVVM模式将应用程序分为三个主要组件:

Model(模型):模型表示应用程序的数据和业务逻辑。它包含数据模型、服务、数据访问逻辑等。模型通常是独立于UI的,可以在多个UI平台上共享。

View(视图):视图是用户界面的可视化部分,它负责展示数据给用户,并接收用户的输入。在WPF中,视图通常使用XAML(可扩展应用程序标记语言)来定义,而在其他平台中,可以使用相应的UI定义语言。

ViewModel(视图模型):视图模型是连接模型和视图之间的中间层。它负责将模型中的数据转换成视图可用的形式,并提供与视图交互所需的命令和操作。视图模型通常实现了INotifyPropertyChanged接口,用于通知视图数据的变化。

MVVM的核心思想是通过数据绑定实现模型和视图之间的解耦,使得数据的变化能够自动地反映在视图上,而不需要手动更新视图。这样可以简化UI开发和维护,并支持测试驱动开发(TDD)和单元测试。

在MVVM中,视图通过数据绑定和命令绑定与视图模型进行交互,视图模型通过调用模型的方法和访问模型的数据来获取或更新数据。同时,视图模型可以通过事件或其他机制通知视图数据的变化,以便视图更新相应的UI。

3.MVVM下的绑定实现

MVVM中要求以接口的方式实现数据的获取,这里我们不实现接口而是直接用现成的包。如下图所示:

 该包目前已经被停用,但是并不妨碍我们使用。导入该包之后,我们需要以该类库派生基类,并调用函数实现变化的通知,业务代码如下所示:

public class MainVieModel:ViewModelBase
    {
        public  MainVieModel()
        {
            Name ="Hello";
            //建立一个线程用于延时
            Task.Run(async() =>
            {
                await Task.Delay(3000);
                Name = "ByeBye";
            });
        }
        private string name;
        public string Name 
        { 
            get { return name; }
            set 
            { 
                name = value;
                //通知变化函数
                RaisePropertyChanged();
            }
        }
    }

同时我们在XAML,定义文本组件实现该变量的接收:

    
        
            
            
            
            
        
    

运行工程效果如下图所示,我们在VM层代码中新建了一个线程延时了3 s,因此三秒后绑定变量的文字便会发生变化。

WPF(C#)学习日志3:绑定与MVVM_第1张图片

 当然我们也可以让按键绑定变量,通过按键控制文本的变化,业务代码如下图所示:

    public class MainVieModel:ViewModelBase
    {
        public  MainVieModel()
        {
            Name ="Hello";
            SaveCommand = new RelayCommand(() =>
            {
                Name = "ByeBye";
            });

        }
        private string name;
        public string Name 
        { 
            get { return name; }
            set 
            { 
                name = value;
                //通知变化函数
                RaisePropertyChanged();
            }
        }
        public RelayCommand SaveCommand{ get; set; }
    }

前端代码:


        
            
            

效果如下图所示,当点击按钮时,内容会发生变化。

WPF(C#)学习日志3:绑定与MVVM_第2张图片

其中,RelayCommand 是一种常见的命令实现,它是实现 ICommand 接口的自定义类。RelayCommand 允许您将方法绑定到 WPF 中的控件,以响应用户的交互操作。

你可能感兴趣的:(WPF框架学习与实战,wpf,c#,学习)