Learn C# Programming: Common Framework Learning (I) — Learn and Understand the Application of WPF

2024-07-12

Learning WPF (Windows Presentation Foundation) combined with the MVVM (Model-View-ViewModel) pattern may be a bit challenging for beginners, but it is a very powerful combination that can help you build maintainable, scalable and easy-to-test applications. The following is a simplified and easy-to-understand way to introduce how to learn the WPF MVVM pattern.

1. Understand the basic concepts

WPF: WPF is a framework for developing Windows client applications from Microsoft. It provides rich UI elements and styles, as well as powerful data binding and animation support.

MVVM: MVVM is an architectural pattern that divides an application into three main parts:

Model: Represents data and business logic.
View: User interface, used to display data.
ViewModel: Acts as a bridge between Model and View, responsible for handling the separation of UI logic and business logic.

2. Why choose MVVM?

Decoupling：The Model, View and ViewModel are highly decoupled, making the code easier to maintain and test.
Reusability: ViewModel can be reused independently of View.
Easy to test: Since ViewModel does not contain any UI related code, it can be tested independently of the UI.

3. Learning steps

3.1 Build the basic environment

Install Visual Studio and select a project template that supports WPF.
Create a new WPF project.

3.2 Understanding and Implementing Model

Create a simple Model class, such asPersonClass, containing properties such asNameandAge。


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

3.3 Create ViewModel
The ViewModel typically contains a reference to the Model, as well as properties and commands for UI operations.

useINotifyPropertyChangedInterface to notify UI of property changes.


using System.ComponentModel;  
  
public class PersonViewModel : INotifyPropertyChanged  
{  
    private Person _person;  
  
    public event PropertyChangedEventHandler PropertyChanged;  
  
    public string Name  
    {  
        get { return _person.Name; }  
        set  
        {  
            _person.Name = value;  
            OnPropertyChanged(nameof(Name));  
        }  
    }  
  
    // 实现INotifyPropertyChanged接口  
    protected virtual void OnPropertyChanged(string propertyName)  
    {  
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));  
    }  
  
    // 构造函数等  
}

3.4 Binding View to ViewModel

Use in XAMLDataContextAssociate the View with the ViewModel. Use data binding to display the data in the ViewModel.


<Window x:Class="YourNamespace.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>  
        <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" />  
    </Grid>  
</Window>

Set in the background codeDataContext：


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

3.5 Learning and Practice

Try to implement more complex ViewModel logic, such as data validation, command processing, etc.
Learn how to use MVVM frameworks such as Prism, Caliburn.Micro, etc. to simplify the development process.
Watch tutorials, read documentation, and code samples to deepen your understanding.

4. Conclusion

Learning the WPF MVVM pattern takes time and practice. It may seem a bit complicated at first, but as you gain a deeper understanding of the concepts, you will be able to build high-quality WPF applications more efficiently. Remember to practice more and consolidate your knowledge through real projects.

Technology Sharing