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

1.绑定

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

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

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

<TextBlock Text="{Binding UserName}" />

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

<TextBox Text="{Binding UserName, Mode=TwoWay}" />

单这几种绑定方式都不利于解耦，因此有了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，定义文本组件实现该变量的接收：

    <Grid>
        <StackPanel>
            <TextBlock Text="{Binding Name}" FontSize="60"/>
            <TextBlock Text="{Binding Name}" FontSize="60"/>
            <TextBlock Text="{Binding Name}" FontSize="60"/>
            <TextBlock Text="{Binding Name}" FontSize="60"/>
        </StackPanel>
    </Grid>

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

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

    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; }
    }

前端代码：

<Grid>
        <StackPanel>
            <TextBlock Text="{Binding Name}" FontSize="60"/>
            <Button Command="{Binding SaveCommand }" Height="40"/>

        </StackPanel>

    </Grid>

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

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