一、MVVM的基本概念
MVVM的基本概念:Model、View、ViewModel
组件 | 职责 | 示例内容 |
Model | 封装业务数据 | User 类,包含姓名、年龄属性 |
View | 负责UI呈现 | XAML界面,包含数据绑定 |
ViewModel | 连接View和Model,处理视图逻辑 | MainViewModel 包含命令和绑定属性 |
二、例子:
2.1.Model
// Models/User.cspublic class User : INotifyPropertyChanged{private string _name;private int _age;public string Name{get => _name;set{_name = value;OnPropertyChanged(nameof(Name));}}public int Age{get => _age;set{_age = value;OnPropertyChanged(nameof(Age));}}public event PropertyChangedEventHandler PropertyChanged;protected virtual void OnPropertyChanged( string propertyName ){PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}}
2.2 ViewModel
// ViewModels/MainViewModel.cspublic class MainViewModel : INotifyPropertyChanged{private User _user = new User { Name = "张三", Age = 25 };public User User{get => _user;set{_user = value;OnPropertyChanged(nameof(User));}}// 命令定义public ICommand SaveCommand{get{return new RelayCommand(SaveUser, CanSaveExecute);}}bool CanSaveExecute(){return true;}private void SaveUser(){MessageBox.Show($"保存成功:{User.Name}, {User.Age}");}public event PropertyChangedEventHandler PropertyChanged;protected virtual void OnPropertyChanged(string propertyName ){PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));}}
2.3 ICommand (基本都是格式化的)
public class RelayCommand : ICommand{private readonly Action _execute;private readonly Func<bool> _canExecute;public RelayCommand(Action execute, Func<bool> canExecute = null){_execute = execute;_canExecute = canExecute;}public bool CanExecute(object parameter){if (_canExecute == null){return true;}elsereturn _canExecute();}public void Execute(object parameter) => _execute();public event EventHandler CanExecuteChanged{add{if(_canExecute!=null){CommandManager.RequerySuggested += value;} }remove{if (_canExecute != null){CommandManager.RequerySuggested -= value;}} }}
2.4 调用
public partial class Window1 : Window{// public PersonViewModel m_PersonViewModel = new PersonViewModel();public MainViewModel model = new MainViewModel();public Window1(){InitializeComponent();DataContext = model;}
}
<StackPanel Margin="15"><TextBox Text="{Binding User.Name,Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"Margin="0,0,0,10"/><TextBox Text="{Binding User.Age, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"Margin="0,0,0,10"/><Button Content="保存" Command="{Binding SaveCommand}"Padding="10,5"/></StackPanel>