UWP Development, Modify UserListViewModel ViewModel

UWP (Universal Windows Platform) is a platform that allows the development of apps that can run on various Windows devices. UWP apps typically use the MVVM (Model-View-ViewModel) design pattern to separate the UI and business logic. In this article, we will explore how to modify the UserListViewModel of a UWP app to add functionality. This example demonstrates how to manage a user list using basic data binding and command patterns.

Understanding the MVVM Pattern

The MVVM pattern is very important in UWP app development. This pattern consists of three main components:

• Model: Contains the data and business logic of the application.
• View: Composes the user interface (UI) and is the part that the user sees.
• ViewModel: Acts as an intermediary between the View and Model, providing the necessary data and commands to the View.

UserListViewModel is a ViewModel that represents and manages the user list. This ViewModel manages the user list data with ObservableCollection, automatically reflecting changes in this collection to the View.

Understanding the Structure of UserListViewModel

By default, UserListViewModel can perform the functions of retrieving and filtering the list of users. Below is the basic structure of UserListViewModel:

csharp
public class UserListViewModel : INotifyPropertyChanged
{
    private ObservableCollection _users;
    public ObservableCollection Users
    {
        get { return _users; }
        set
        {
            _users = value;
            OnPropertyChanged(nameof(Users));
        }
    }
    
    public UserListViewModel()
    {
        Users = new ObservableCollection();
        LoadUsers();
    }

    private void LoadUsers()
    {
        // Load users here.
    }

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

Adding Functionality to UserListViewModel

Let’s add search and filtering functionality to this user list ViewModel. This will allow users to search the list by user names. To do this, we can add the following properties and methods.

csharp
private string _searchTerm;
public string SearchTerm
{
    get { return _searchTerm; }
    set
    {
        _searchTerm = value;
        OnPropertyChanged(nameof(SearchTerm));
        FilterUsers();
    }
}

private void FilterUsers()
{
    // Add the logic to filter the user list here.
}

Now we can implement the logic to filter the Users collection based on the user’s name in the FilterUsers() method.

csharp
private void FilterUsers()
{
    var filteredUsers = Users.Where(user => user.Name.Contains(SearchTerm, StringComparison.OrdinalIgnoreCase)).ToList();
    
    Users.Clear();
    foreach (var user in filteredUsers)
    {
        Users.Add(user);
    }
}

Data Binding with the UI

Now let’s connect UserListViewModel to the UI. In UWP’s XAML, you can easily bind ViewModel properties to the UI through data binding. First, you need to set the data context in the XAML file.

xml

    
    
        
    

    
        
        
            
                
                    
                
            
        
    

Data and Custom Objects

The User class should contain user information. Below is the basic structure of the User class.

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

Complete Example

Let’s put all the code together to complete the example. Below is a complete implementation of UserListViewModel and an example of a XAML page.

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

public class UserListViewModel : INotifyPropertyChanged
{
    private ObservableCollection _users;
    public ObservableCollection Users
    {
        get { return _users; }
        set
        {
            _users = value;
            OnPropertyChanged(nameof(Users));
        }
    }
    
    private string _searchTerm;
    public string SearchTerm
    {
        get { return _searchTerm; }
        set
        {
            _searchTerm = value;
            OnPropertyChanged(nameof(SearchTerm));
            FilterUsers();
        }
    }

    public UserListViewModel()
    {
        Users = new ObservableCollection();
        LoadUsers();
    }

    private void LoadUsers()
    {
        // Add sample data for the user list
        Users.Add(new User { Name = "Alice" });
        Users.Add(new User { Name = "Bob" });
        Users.Add(new User { Name = "Charlie" });
    }

    private void FilterUsers()
    {
        var filteredUsers = Users.Where(user => user.Name.Contains(SearchTerm, StringComparison.OrdinalIgnoreCase)).ToList();
        
        Users.Clear();
        foreach (var user in filteredUsers)
        {
            Users.Add(user);
        }
    }

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

xml

    
    
        
    

    
        
        
            
                
                    
                
            
        
    

Conclusion

In this article, we discussed how to modify UserListViewModel in UWP development to add filtering functionality. We demonstrated how to efficiently manage a user list using data binding with the MVVM pattern. This structural approach greatly helps enhance code reusability and maintainability in UWP app development.

As you continue UWP development, I encourage you to learn more patterns and techniques and apply them to develop better apps.