正文

掌握C# WPF框架MVVM模式，实战教程助你轻松入门

/0 浏览量
0320

引言

WPF（Windows Presentation Foundation）是微软开发的一个用于构建Windows客户端应用程序的UI框架。MVVM（Model-View-ViewModel）是一种流行的设计模式，它将UI（View）和业务逻辑（ViewModel）分离，使得代码更加模块化和可维护。本文将带你深入了解C# WPF框架中的MVVM模式，并提供实战教程，帮助你轻松入门。

第一章：WPF与MVVM简介

1.1 WPF简介

WPF是微软在.NET Framework 3.0中引入的一个UI框架，它提供了丰富的UI元素和布局控件，使得开发者可以轻松地创建出具有良好用户体验的桌面应用程序。

1.2 MVVM简介

MVVM模式是一种设计模式，它将应用程序分为三个主要部分：

  • Model：表示业务数据和逻辑。
  • View：表示用户界面。
  • ViewModel：作为Model和View之间的桥梁，负责处理用户输入和更新视图。

第二章：创建WPF项目

2.1 安装Visual Studio

首先，确保你的开发环境中安装了Visual Studio。Visual Studio是开发WPF应用程序的主要IDE。

2.2 创建WPF项目

  1. 打开Visual Studio，选择“创建新项目”。
  2. 在“创建新项目”对话框中，选择“WPF应用程序”模板。
  3. 输入项目名称和存储位置，然后点击“创建”。

第三章：实现MVVM模式

3.1 创建Model

在项目中创建一个名为Model的文件夹，并在该文件夹中创建一个类Person.cs，用于表示一个简单的用户模型。

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
}

3.2 创建ViewModel

在项目中创建一个名为ViewModel的文件夹，并在该文件夹中创建一个类PersonViewModel.cs。

using System;
using System.Windows.Input;
using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Command;

public class PersonViewModel : ViewModelBase
{
    private Person _person;

    public PersonViewModel()
    {
        _person = new Person
        {
            Name = "张三",
            Age = 25
        };
    }

    public Person Person
    {
        get { return _person; }
        set { Set(() => Person, ref _person, value); }
    }

    public ICommand SaveCommand => new RelayCommand(Save);
    
    private void Save()
    {
        // 保存数据到Model
    }
}

3.3 创建View

在项目中创建一个名为View的文件夹，并在该文件夹中创建一个名为MainWindow.xaml的XAML文件。

<Window x:Class="WpfMvvmExample.View.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <TextBlock Text="姓名：" />
            <TextBox Text="{Binding Person.Name, UpdateSourceTrigger=PropertyChanged}" />
            <TextBlock Text="年龄：" />
            <TextBox Text="{Binding Person.Age, UpdateSourceTrigger=PropertyChanged}" />
            <Button Content="保存" Command="{Binding SaveCommand}" />
        </StackPanel>
    </Grid>
</Window>

3.4 主程序入口

在App.xaml文件中，设置主窗口的ViewModel。

<Application x:Class="WpfMvvmExample.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             StartupUri="View\MainWindow.xaml">
    <Application.Resources>
        <local:ViewModelLocator x:Key="Locator"/>
    </Application.Resources>
</Application>

在App.xaml.cs文件中，实现ViewModelLocator。

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Ioc;
using System.Windows;

namespace WpfMvvmExample
{
    public partial class App : Application
    {
        public static ViewModelLocator Locator { get; set; }

        public App()
        {
            Locator = new ViewModelLocator();
            InitializeComponent();
        }
    }
}

public class ViewModelLocator : ViewModelBase
{
    public PersonViewModel PersonViewModel { get; set; }

    public ViewModelLocator()
    {
        PersonViewModel = new PersonViewModel();
    }
}

第四章：运行程序

  1. 打开Visual Studio，运行项目。
  2. 在主窗口中输入姓名和年龄，然后点击“保存”按钮。

第五章：总结

通过本文的实战教程，你已成功掌握了C# WPF框架中的MVVM模式。在实际开发中，你可以根据需求进一步完善和优化你的应用程序。祝你编程愉快！

-- 展开阅读全文 --