问小白 wenxiaobai
资讯
历史
科技
环境与自然
成长
游戏
财经
文学与艺术
美食
健康
家居
文化
情感
汽车
三农
军事
旅行
运动
教育
生活
星座命理

WPF基础学习&MVVM例子讲解

创作时间:
作者:
@小白创作中心

WPF基础学习&MVVM例子讲解

引用
CSDN
1.
https://m.blog.csdn.net/qq_41714549/article/details/145574047

本文是一篇关于WPF(Windows Presentation Foundation)基础学习和MVVM(Model-View-ViewModel)模式讲解的技术文章。文章详细介绍了NotificationObject、DelegateCommand等核心概念,并通过一个具体的加法计算器案例展示了View与ViewModel的交互过程。文章结构清晰,内容完整,包含代码示例和运行效果,适合有一定C#基础的开发者阅读。

前言

参考文章:
参考视频:《深入浅出WPF》系列高清视频教程 | 讲师:刘铁猛
自己的感想

一、NotificationObject与数据属性

创建个类,声明NotificationObject

用于双向的数据绑定

  
internal class NotificationObject : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;
    public void RaisePropertyChange(string propertyName)
    {
        if(this.PropertyChanged != null)
        {
            this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}
  

PropertyChanged 事件:订阅者(如 UI 控件)通过监听此事件感知属性变化。
RaisePropertyChange 方法:手动触发事件,传递发生变更的属性名。
上面的RaisePropertyChange()方法可以优化:

  
public void RaisePropertyChange(string propertyName)
{
    PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
  

二、DelegateCommand与命令属性

做操作传输的命令属性命名为DelegateCommand
CanExecute
决定命令是否可用
Execute
执行命令的实际逻辑
CanExecuteChanged
在命令的可执行状态变化时通知UI更新。

  
    internal class DelegateCommand : ICommand
    {
        public event EventHandler CanExecuteChanged;
        public bool CanExecute(object parameter)
        {
            if (this.CanExecuteFunc == null)
            {
                return true;
            }
            return this.CanExecuteFunc(parameter); 
        }
        public void Execute(object parameter)
        {
            if (this.ExecuteAction == null)
            {
                return;
            }
            this.ExecuteAction(parameter);
        }
        public Action<object> ExecuteAction { get;set; }
        public Func<object,bool> CanExecuteFunc { get; set; }
    }
  

三、View与ViewModel的交互(难点)

NotificaitonObject.cs是ViewModel文件夹中类的基类。里面的其他类都要继承NotificationObject.cs类。

在ViewModel文件下创建MainWindowViewModel

  
   internal class MainWindowViewModel : NotificationObject
   {
       //三个数据属性
       private double input1;
       public double Input1
       {
           get { return input1; }
           set { input1 = value; this.RaisePropertyChange("Input1"); }
       }
       private double input2;
       public double Input2
       {
           get { return input2; }
           set { input2 = value; this.RaisePropertyChange("Input2"); }
       }
       private double result;
       public double Result
       {
           get { return result; }
           set { result = value; this.RaisePropertyChange("Result"); }
       }
       
       //1个方法
       public DelegateCommand AddCommand {  get; set; }
       private void Add(Object parameter)
       {
           this.Result = this.Input1 + this.Input2;
       }
       public MainWindowViewModel()
       {
           this.AddCommand = new DelegateCommand();
           this.AddCommand.ExecuteAction = new Action<object>(this.Add);
       }
   }
  

数据和方法绑定

  
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Button x:Name="btnSave" Content="Save"/>
        <Grid Grid.Row="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <TextBox x:Name="slider1" Grid.Row="0" FontSize="24" Margin="4" 
                     Background="LightBlue"
                     Text="{Binding Input1}"/>
            <TextBox x:Name="slider2" Grid.Row="1" FontSize="24" Margin="4"
                     Background="LightBlue"
                     Text="{Binding Input2}"/>
            <TextBox x:Name="slider3" Grid.Row="2" FontSize="24" Margin="4"
                     Background="LightBlue"
                     Text="{Binding Result}"/>
            <Button Name="addBtn" Grid.Row="3" Content="Add" Width="120" Height="80" Command="{Binding AddCommand}" />
        </Grid>
    </Grid>
  

资源指定

  
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainWindowViewModel();
        }
  

四、优势体现

这种框架的优势体现在:逻辑功能不变的情况下,前端怎么改都可以很快实现功能,只要映射回原来的方法和属性即可。
下面就是直接将前端UI代码拷贝进来,后端不变,效果依旧是result = input1+input2.

© 2023 北京元石科技有限公司 ◎ 京公网安备 11010802042949号