正文

WPF MVVM模式入门：实战实例代码解析与项目搭建指南

/0 浏览量
0818

引言

WPF（Windows Presentation Foundation）是微软推出的一种用于构建桌面应用程序的UI框架。MVVM（Model-View-ViewModel）是一种流行的设计模式，它将UI逻辑与业务逻辑分离，使得代码更加模块化和可维护。本文将带你从零开始，学习WPF MVVM模式，并通过实战实例代码解析和项目搭建指南，帮助你快速掌握这一技术。

一、WPF与MVVM简介

1.1 WPF简介

WPF是微软在.NET Framework 3.0中推出的一种UI框架，它提供了丰富的UI元素和布局方式，以及强大的数据绑定和动画功能。WPF应用程序通常由以下几个部分组成：

  • XAML：用于定义UI布局和外观的XML标记语言。
  • C#：用于编写应用程序的业务逻辑和事件处理。
  • BAML：是XAML的编译版本，由编译器生成。

1.2 MVVM简介

MVVM模式是一种将UI逻辑与业务逻辑分离的设计模式。它将应用程序分为三个部分：

  • Model：表示应用程序的数据模型。
  • View：表示用户界面。
  • ViewModel：作为Model和View之间的桥梁，负责处理业务逻辑和数据绑定。

二、WPF MVVM项目搭建

2.1 创建WPF项目

  1. 打开Visual Studio，创建一个新的WPF应用程序项目。
  2. 选择合适的命名空间和项目名称。
  3. 选择合适的UI模板，例如“带有主窗口的应用程序”。

2.2 添加ViewModel

  1. 在项目中创建一个新的C#类，例如MainViewModel.cs。
  2. 在类中定义属性和方法，用于处理业务逻辑和数据绑定。

2.3 定义View

  1. 在项目中创建一个新的XAML文件，例如MainWindow.xaml。
  2. 使用XAML定义UI布局和控件。
  3. 使用数据绑定将控件与ViewModel中的属性关联。

三、实战实例代码解析

3.1 Model

public class Product
{
    public string Name { get; set; }
    public decimal Price { get; set; }
}

3.2 ViewModel

public class MainViewModel : INotifyPropertyChanged
{
    private Product _selectedProduct;

    public Product SelectedProduct
    {
        get { return _selectedProduct; }
        set
        {
            _selectedProduct = value;
            OnPropertyChanged(nameof(SelectedProduct));
        }
    }

    public ObservableCollection<Product> Products { get; set; }

    public MainViewModel()
    {
        Products = new ObservableCollection<Product>
        {
            new Product { Name = "苹果", Price = 5.5M },
            new Product { Name = "香蕉", Price = 3.5M },
            new Product { Name = "橙子", Price = 4.5M }
        };
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

3.3 View

<Window x:Class="WpfMvvmDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF MVVM示例" Height="350" Width="525">
    <Grid>
        <DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Products}">
            <DataGrid.Columns>
                <DataGridTextColumn Header="名称" Binding="{Binding Name}" />
                <DataGridTextColumn Header="价格" Binding="{Binding Price}" />
            </DataGrid.Columns>
        </DataGrid>
        <TextBlock Text="{Binding SelectedProduct.Name}" HorizontalAlignment="Center" VerticalAlignment="Center" />
    </Grid>
</Window>

四、总结

通过本文的学习，你应该已经掌握了WPF MVVM模式的基本概念和项目搭建方法。在实际开发中，你可以根据需求调整Model、ViewModel和View的结构，使你的应用程序更加灵活和可维护。希望本文能对你有所帮助！

-- 展开阅读全文 --