Category: WPF Programming

WPF Course, Event Handling Using the Command Pattern

Windows Presentation Foundation (WPF) is a powerful UI framework based on the .NET Framework, allowing for the creation of complex user interfaces. WPF supports the MVVM (Model-View-ViewModel) pattern, which effectively separates the UI from the business logic. Among its features, the Command pattern is an important technique that makes event handling clearer and more manageable. In this article, we will explore how to use the Command pattern in WPF to handle events.

1. Overview of the Command Pattern

The Command pattern is one of the behavioral design patterns that encapsulates a request as an object, separating the request sender from the receiver. This pattern allows requests to be stored in a queue and adds the ability to log or replay requests. In WPF, commands can be used to implement event handling logic for actions like button clicks and menu selections.

2. The Necessity of the Command Pattern in WPF

Directly handling events in WPF can increase the coupling between UI components and business logic. This can lead to reduced maintainability of the code and make testing difficult. By using the Command pattern, UI and business logic can be completely separated, making development and maintenance easier.

3. Understanding the Command System in WPF

In WPF, commands are implemented through the ICommand interface. This interface includes the Execute and CanExecute methods. The Execute method performs the actual logic of the command, while CanExecute determines whether the command can be executed.

3.1 ICommand Interface

public interface ICommand
{
    event EventHandler CanExecuteChanged;
    bool CanExecute(object parameter);
    void Execute(object parameter);
}

3.1.1 CanExecute Method

This method defines the logic that determines whether a command can be executed under certain conditions. A return value of true indicates that the command is executable.

3.1.2 Execute Method

This is the method called when the command is executed, implementing the actual business logic. This method defines the tasks that the command will perform.

4. Implementing a Command

Now, let’s implement a command in a real WPF application. Below is a simple example of defining a command.

4.1 Writing a Command Class

public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Func _canExecute;

    public RelayCommand(Action execute, Func canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public event EventHandler CanExecuteChanged;

    public bool CanExecute(object parameter)
    {
        return _canExecute == null || _canExecute(parameter);
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }

    public void RaiseCanExecuteChanged()
    {
        CanExecuteChanged?.Invoke(this, EventArgs.Empty);
    }
}


4.2 Using Commands in ViewModel


You can use the RelayCommand class defined above in the ViewModel. The example below shows how to set up a command to handle a button click event.


public class MainViewModel
{
    public ICommand MyCommand { get; }

    public MainViewModel()
    {
        MyCommand = new RelayCommand(ExecuteMyCommand, CanExecuteMyCommand);
    }

    private void ExecuteMyCommand(object parameter)
    {
        // Perform business logic
    }

    private bool CanExecuteMyCommand(object parameter)
    {
        // Determine executability
        return true;
    }
}



5. Connecting WPF UI and Commands


To connect a command to the View, you use the Command property in XAML. Below is an example of binding a button’s Command property to the ViewModel’s command.


<Button Content="Click Me" Command="{Binding MyCommand}" />


With this setup, the MyCommand command will execute when the button is clicked.


6. Advantages of the Command Pattern


    

  • Structural Separation: Separating the UI and business logic enhances code maintainability.
    • 

  • Reusability: Commands can be reused, reducing code duplication.
    • 

  • Testability: The encapsulation of business logic within commands makes unit testing easier.
    • 



7. Conclusion


In this lecture, we learned about handling events in WPF using the Command pattern. The Command pattern is a very useful tool for creating complex user interfaces. It helps improve code structure and enhances maintainability. Moving forward, consider applying the Command pattern in various projects using WPF.


8. Additional Resources


If you wish to learn more deeply, refer to the following materials:



	

	




	

		
		
WPF Tutorial, Designing WPF Applications Using MVVM
	


	
	
	

		
Windows Presentation Foundation (WPF) is a framework provided by Microsoft for developing desktop applications. WPF offers powerful features that allow for the creation of excellent user interfaces, and we will explore in detail how to effectively design applications using the MVVM (Model-View-ViewModel) pattern.


1. Overview of MVVM Pattern


MVVM stands for Model-View-ViewModel, a design pattern created to separate user interface and business logic. This pattern consists of three main components:


    

  • Model: Responsible for the application’s data and business logic. The model includes interactions with the database, data validation, and business rules.
    • 

  • View: Responsible for the visual elements shown to the user. In WPF, XAML (Extensible Application Markup Language) is used to define the view, displaying the UI elements with which users can interact.
    • 

  • ViewModel: Acts as an intermediary between the view and model. It includes business logic, handling events that occur in the view, and reflecting changes in model data to the view.
    • 



2. Advantages of the MVVM Pattern


Using the MVVM pattern provides the following benefits:


    

  • Maintainability: The code is clearly separated, making it easier to maintain and extend.
    • 

  • Testability: The ViewModel can be tested independently, allowing for the validation of business logic without tying it to the UI.
    • 

  • Reusability: ViewModel and Model can be reused in different views, improving productivity.
    • 

  • Data Binding: Taking advantage of WPF’s powerful data binding capabilities, synchronization between UI elements and the data model can be implemented easily.
    • 



3. Designing the Structure of WPF Applications


When designing a WPF application using the MVVM pattern, the basic project structure is organized as follows:


- MyApplication
    - Models
    - Views
    - ViewModels
    - Resources
    - App.xaml
    - MainWindow.xaml



Each folder contains classes for the respective components, allowing for clear separation of each element.


4. Defining the Model


The model part contains the data and business logic of the application. For example, let’s define a model for storing user information:


public class User
{
    public string Name { get; set; }
    public string Email { get; set; }
}



This model includes fields for the user’s name and email address, with potential methods for interacting with the database.


5. Defining the View


The view consists of the UI elements displayed to the user. In WPF, views are defined using XAML. Below is XAML code defining a simple UI:



    
        
        
        
    




This example includes text boxes for entering the user’s name and email, along with a submit button.


6. Defining the ViewModel


The ViewModel serves as the linking mechanism between the view and model. It includes methods for storing user input in the model and updating model data when specific events (e.g., button clicks) occur:


public class UserViewModel : INotifyPropertyChanged
{
    private User _user;
    
    public UserViewModel()
    {
        _user = new User();
    }
    
    public string Name
    {
        get { return _user.Name; }
        set
        {
            _user.Name = value;
            OnPropertyChanged(nameof(Name));
        }
    }
    
    public string Email
    {
        get { return _user.Email; }
        set
        {
            _user.Email = value;
            OnPropertyChanged(nameof(Email));
        }
    }
    
    public void Submit()
    {
        // Logic for saving user data
    }
    
    public event PropertyChangedEventHandler PropertyChanged;
    
    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}



The ViewModel above includes properties for the user’s name and email, as well as a Submit method for submitting the data.


7. Setting Up Data Binding


We implement interaction between the view and ViewModel using WPF’s data binding feature. Binding can be set up in XAML as follows:



    




Then, the Text properties of the TextBox can be bound as follows:







Now, the values entered by the user in the text boxes automatically update the ViewModel’s Name and Email properties.


8. Handling Events


We implement handling the button click event to call the ViewModel’s Submit method:






The above code configures the Command pattern so that the ViewModel’s Submit method is called upon button click.


9. Implementing Commands


We implement commands in the application to handle user interactions.


public ICommand SubmitCommand => new RelayCommand(Submit);



Here, RelayCommand is a simple class that implements the ICommand interface.


10. Defining the Command Class


We define the RelayCommand class to implement commands:


public class RelayCommand : ICommand
{
    private readonly Action _execute;
    private readonly Predicate _canExecute;

    public RelayCommand(Action execute, Predicate canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }

    public bool CanExecute(object parameter)
    {
        return _canExecute == null || _canExecute(parameter);
    }

    public void Execute(object parameter)
    {
        _execute(parameter);
    }
}


This RelayCommand class allows for easy implementation of various commands.


11. Linking View and ViewModel


We ensure that the View and ViewModel are well connected, checking that data binding and commands work properly to reflect changes in the user interface in real-time.


12. Dependency Injection and MVVM


To implement MVVM efficiently, it is advisable to use the Dependency Injection pattern to inject necessary dependencies into the ViewModel.


This approach enhances testability and flexibility of the code.


Conclusion


By designing WPF applications in the MVVM pattern, we can enhance code readability and reusability while improving maintainability. The separation of business logic and UI through the MVVM pattern is a crucial aspect when crafting complex applications.


Now we have effectively learned how to design and implement WPF applications using MVVM, allowing us to actively apply the MVVM pattern in real application development. We hope this article aids you in your WPF application development.

	

	




	

		
		
WPF Course, Differences Between WPF and WinForms
	


	
	
	

		
Windows Presentation Foundation (WPF) and Windows Forms (WinForms) are both UI technologies provided by Microsoft’s .NET technology stack. These two technologies each have their own advantages and disadvantages, and can be selected according to the needs of the developers. Here, we will introduce the basic concepts of WPF and WinForms and detail their main differences.


1. Basic Concepts


1.1 Windows Forms (WinForms)


WinForms is a technology available in the early versions of the Microsoft .NET Framework, used for developing desktop applications for the Windows operating system. WinForms comes with a very intuitive drag-and-drop design environment, optimized for control and event-based programming. However, WinForms lacks flexibility in UI design and user experience (UI/UX), which imposes many limitations in implementing complex applications.


1.2 Windows Presentation Foundation (WPF)


WPF is a more advanced technology compared to WinForms, offering a more powerful and flexible framework. WPF uses vector-based graphics to create more vibrant and responsive UIs and defines UI elements using a markup language called XAML (Extensible Application Markup Language). WPF allows the construction of very complex UIs through features like data binding, styling, animation, and custom controls.


2. Key Differences between WPF and WinForms


2.1 Graphics Handling


WPF uses vector-based graphics instead of bitmap, providing better resolution and quality across various display scales. In contrast, WinForms is centered around bitmap-based forms and controls, making it less adaptable to changes in DPI (resolution). In fact, WPF applications offer a clearer and more consistent UI across various screen sizes and resolutions.


2.2 UI Design and Layout


WinForms provides a classic form-based interface, where the programmer must directly specify the position and size of controls. This can impose significant constraints when collaborating between designers and developers. In contrast, WPF allows for smooth layouts and UI design using XAML, enabling designers to work separately from the code. XAML allows UI elements to be defined declaratively, making it easily understandable and modifiable even for non-experts.


2.3 Data Binding


WPF provides robust data binding capabilities. This feature makes it easy to manage complex relationships between UI elements and data sources. With WPF, the MVVM (Model-View-ViewModel) pattern separates UI and business logic, automatically reflecting data changes in the UI. However, WinForms has limited data binding, requiring manual event handling, which increases complexity in large applications.


2.4 Animation and Effects


WPF offers strong support for animations and transitions. Developers can easily apply various animations to UI elements, greatly enhancing the user experience. In contrast, implementing animations in WinForms requires more complex code and manual work, resulting in limited basic effects.


2.5 Styles and Templates


WPF’s complex customization of styles and templates allows for different appearances even from the same base control. In WPF, Styles and ControlTemplates enable easy modification and customization of UI elements. Conversely, WinForms has restricted capabilities in this area, often making customization difficult.


2.6 Resource Management


WPF uses resource dictionaries to create and manage various reusable resources (e.g., styles, brushes, shapes, etc.). This enhances code reusability and makes maintenance easier. In comparison, WinForms requires direct management of resources through code, which can reduce efficiency.


2.7 Platform Support


WPF has evolved to support cross-platform capabilities in .NET Core and .NET 5 and above, considering the possibility of running on platforms other than Windows. In contrast, WinForms primarily operates optimized for Windows, making its platform compatibility more limited than WPF.


3. Criteria for Choosing between WPF and WinForms


The choice between WPF and WinForms depends on the goals and needs of the project. WinForms is suitable for simple and intuitive projects or when integration with existing systems is required. On the other hand, WPF is appropriate when complex UIs or user experience is important. It is crucial to understand the characteristics of each technology well and clarify the requirements to make the appropriate choice.


4. Conclusion


WPF and WinForms are technologies with their own characteristics and advantages. While WinForms allows rapid application development due to its simplicity, WPF offers a higher level of UI and user experience, enabling the creation of more advanced applications. It is important for developers to choose each technology appropriately according to the project’s requirements to achieve optimal results.


5. References


	


	





	

		
		
WPF Course, Separation of Business Logic through Command and Data Binding
	


	
	
	

		
Windows Presentation Foundation (WPF) is part of the .NET framework and provides powerful tools for advanced user interface (UI) development. WPF supports various patterns that allow for a clear separation of UI and business logic. Among these, the MVVM (Model-View-ViewModel) pattern is the most widely used in WPF projects. One of the key elements of MVVM is Command and Data Binding. In this tutorial, we will explore how to separate business logic through commands and data binding in detail.


1. Understanding the Basic Concepts of WPF


WPF is designed to develop applications that can interact with users utilizing various UI elements. The structure of WPF is as follows:


    

  • Model: This part includes the application’s data and business logic. Here, interactions with the database or implementation of business rules take place.
    • 

  • View: This defines the UI elements presented to the user. XAML (Extensible Application Markup Language) is used to design the UI.
    • 

  • ViewModel: Acts as a mediator between Model and View, preparing the data to be displayed in the View and passing commands from the View to the Model.
    • 



2. Understanding the MVVM Pattern


MVVM is a design pattern that can be used in WPF, characterized by the following:


    

  • The separation of UI and business logic increases testability.
    • 

  • Data binding reduces dependencies between the UI and data model.
    • 

  • Commands are defined in the ViewModel to handle events occurring in the UI.
    • 



3. Separating UI and Business Logic through Data Binding


Data binding is one of the key features of WPF that allows UI elements to be connected to data sources. Using data binding brings the following advantages:


    

  • There’s no need to directly access UI elements in the code-behind file.
    • 

  • Changes in the Model are automatically reflected in the UI.
    • 

  • Data and UI synchronization can be easily managed from the ViewModel.
    • 



WPF supports various data binding methods. Basic binding can be done as follows:


<TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" />


Here, Name is a property of the ViewModel, and the content entered by the user in the TextBox is bound to this property. UpdateSourceTrigger is set to update the property every time user input occurs.


4. Handling Events through Commands


Commands are one of the primary ways to handle interactions between the user interface and business logic in WPF. Commands are typically defined through instances of classes that implement the ICommand interface. The ICommand interface includes the following two main methods:


    

  • Execute: This method is called when the command is executed.
    • 

  • CanExecute: This method determines whether the command can be executed.
    • 



The basic structure for using a command is as follows:


public class RelayCommand : ICommand
{
    private readonly Action<object> _execute;
    private readonly Predicate<object> _canExecute;

    public RelayCommand(Action<object> execute, Predicate<object> canExecute = null)
    {
        _execute = execute ?? throw new ArgumentNullException(nameof(execute));
        _canExecute = canExecute;
    }

    public bool CanExecute(object parameter) => _canExecute == null || _canExecute(parameter);

    public void Execute(object parameter) => _execute(parameter);

    public event EventHandler CanExecuteChanged
    {
        add { CommandManager.RequerySuggested += value; }
        remove { CommandManager.RequerySuggested -= value; }
    }
}


The above RelayCommand class defines the code to be executed when the user clicks a button and whether that code can be executed.


5. Combining Data Binding and Commands


Now, let’s create a simple example combining data binding and commands. Below is an example of a WPF application that receives a name from the user and displays a welcome message upon button click.


5.1 Creating the ViewModel Class


public class MainViewModel : INotifyPropertyChanged
{
    private string _name;
    public string Name
    {
        get { return _name; }
        set
        {
            _name = value;
            OnPropertyChanged(nameof(Name));
        }
    }

    public ICommand GreetCommand { get; }

    public MainViewModel()
    {
        GreetCommand = new RelayCommand(Greet);
    }

    private void Greet(object parameter)
    {
        MessageBox.Show($"Hello, {Name}!");
    }

    public event PropertyChangedEventHandler PropertyChanged;

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


5.2 Configuring the XAML UI


<Window x:Class="WpfApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF File" Height="200" Width="400">
    <Window.DataContext>
        <local:MainViewModel />
    </Window.DataContext>
    
    <StackPanel Margin="20">
        <TextBox Text="{Binding Name, UpdateSourceTrigger=PropertyChanged}" />
        <Button Content="Greet" Command="{Binding GreetCommand}" />
    </StackPanel>
</Window>


The above XAML code defines a TextBox for the user to enter their name and a button to greet. The button is bound to the GreetCommand in the ViewModel, calling the Greet method when clicked.


6. Using the CanExecute Method in Commands


The CanExecute method in a command can control the command’s availability based on specific conditions. This allows you to control whether a user can perform a certain action. For instance, you can modify the GreetCommand so that the greet button is active only when the Name property is not empty:


public MainViewModel()
{
    GreetCommand = new RelayCommand(Greet, CanGreet);
}

private bool CanGreet(object parameter)
{
    return !string.IsNullOrWhiteSpace(Name); // Returns true only when the name is not empty
}


7. Separating Business Logic Using the MVVM Pattern


Through the explanations above, we can understand how to separate business logic using the MVVM pattern. Because all business logic is handled in the ViewModel, the coupling between the UI and business logic is reduced. This also increases testability and improves code maintainability.


8. Conclusion


In this tutorial, we explored how to separate business logic using commands and data binding in WPF. By using the MVVM pattern, UI and business logic can be effectively separated, allowing for cleaner and more maintainable code. Properly utilizing WPF’s data binding and ICommand interface enables more intuitive and flexible application development. Apply this knowledge in your future work to develop more advanced WPF applications.

	


	





	

		
		
WPF Course, Data Sorting and Filtering with CollectionView
	


	
	
	

		
Windows Presentation Foundation (WPF) is Microsoft’s UI framework widely used for developing desktop applications. WPF provides various data binding techniques. In this chapter, we will take a closer look at one of the key concepts in WPF, CollectionView, and explain how to sort and filter data.


1. What is CollectionView?


A CollectionView is an object used with WPF’s data binding functionality that provides a view of a data source. It manages the top-level collection and supports functionalities such as sorting, filtering, and grouping the contents of this collection. This allows the logical implementation of WPF’s MVVM pattern and enables more flexible handling of data in the UI.


2. Key Features of CollectionView


    

  • Sorting: A CollectionView can sort items in the collection based on specific properties.
    • 

  • Filtering: You can select only the items that meet certain conditions to display in the collection.
    • 

  • Grouping: Items can be grouped based on specific properties of the data.
    • 



3. Creating a CollectionView


Creating a CollectionView is very simple. First, define the data to be used with the CollectionView, and then create the CollectionView using CollectionViewSource. Below is a simple example.



using System.Collections.Generic;
using System.Windows;
using System.Windows.Data;

namespace WpfApp
{
    public partial class MainWindow : Window
    {
        public List<Person> People { get; set; }

        public MainWindow()
        {
            InitializeComponent();
            People = new List<Person>()
            {
                new Person { Name = "John", Age = 30 },
                new Person { Name = "Jane", Age = 25 },
                new Person { Name = "Mike", Age = 35 },
            };

            CollectionViewSource collectionViewSource = new CollectionViewSource();
            collectionViewSource.Source = People;
            this.DataContext = collectionViewSource.View;
        }
    }

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



In the example above, we created a CollectionViewSource.


4. Sorting Data


To sort data in a CollectionView, you must use the SortDescriptions property. Below is an example of sorting by age.



collectionViewSource.SortDescriptions.Add(new SortDescription("Age", ListSortDirection.Ascending);



This code sorts in ascending order based on the Age property. If you want to sort in descending order, use ListSortDirection.Descending.


5. Filtering Data


Filtering allows you to show only the items that meet specific conditions. To filter in the CollectionView, you need to define the Filter property. Below is an example of filtering to show only people aged 30 and over.



collectionViewSource.Filter += (s, e) => 
{
    if (e.Item is Person person)
    {
        e.Accepted = person.Age >= 30;
    }
};



6. Binding to the UI


After sorting or filtering the data, you can bind it to the UI for display. Below is how to set up the binding in XAML.




    
        
            
            
        
    




7. Conclusion


Utilizing CollectionView in WPF allows for flexible sorting, filtering, and grouping of data sources. This plays a very important role in the implementation of the MVVM pattern. When developing applications using WPF, effectively employing these techniques can lead to more elegant and functional UIs.


8. References