WPF Development, Practice Display Products and Details

WPF (Windows Presentation Foundation) is a powerful UI framework based on the .NET Framework. It is particularly well-suited for developing desktop applications. In this course, we will learn how to display product lists and information details using WPF. Topics covered in this course include product data binding, implementing the MVVM (Model-View-ViewModel) pattern, and UI design using XAML.

1. Preparation Tasks

To create a WPF application, you must first install Visual Studio and create a new WPF application project. Let’s set up the new project by following the steps below.

1. Launch Visual Studio.
2. In the File menu, select New -> Project.
3. From the project templates, select WPF App (.NET Core) or WPF App (.NET Framework).
4. Specify the project name and storage path, then click Create.

2. Understanding the MVVM Pattern

The MVVM (Model-View-ViewModel) pattern is an architecture pattern primarily used in WPF that helps to separate the user interface (UI) from business logic. The three components of this pattern are as follows:

• Model: Business logic and data.
• View: User interface.
• ViewModel: Mediator between View and Model.

In this course, we will create a simple product information application while applying the MVVM pattern.

3. Creating Data Model

First, let’s create a Product class to hold product information. This class will have properties for the product’s name, price, and description.

using System.ComponentModel;

public class Product : INotifyPropertyChanged
{
    private string _name;
    private decimal _price;
    private string _description;

    public string Name
    {
        get => _name;
        set
        {
            _name = value;
            OnPropertyChanged(nameof(Name));
        }
    }

    public decimal Price
    {
        get => _price;
        set
        {
            _price = value;
            OnPropertyChanged(nameof(Price));
        }
    }

    public string Description
    {
        get => _description;
        set
        {
            _description = value;
            OnPropertyChanged(nameof(Description));
        }
    }

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

The above code implements the INotifyPropertyChanged interface to allow notifications when properties change. This is useful for data binding.

4. Creating ViewModel

Next, we will create a ProductViewModel class to implement the logic that manages the product list. This ViewModel includes a list of products and displays the details of the selected product.

using System.Collections.ObjectModel;
using System.Windows.Input;

public class ProductViewModel : INotifyPropertyChanged
{
    private Product _selectedProduct;

    public ObservableCollection<Product> Products { get; }

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

    public ProductViewModel()
    {
        Products = new ObservableCollection<Product>
        {
            new Product { Name = "Laptop", Price = 1200000, Description = "High-performance laptop." },
            new Product { Name = "Smartphone", Price = 800000, Description = "Latest smartphone." },
            new Product { Name = "Tablet", Price = 500000, Description = "Portable tablet." }
        };
    }

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

Here, we use ObservableCollection<Product> to manage the product list. ObservableCollection automatically reflects changes in the collection in the UI.

5. UI Design Using XAML

Now, let’s design the user interface using XAML. We will bind the UI with the ProductViewModel created earlier.

<Window x:Class="ProductApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Product List" Height="350" Width="525">
    <Window.DataContext>
        <local:ProductViewModel />
    </Window.DataContext>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="3*"/>
        </Grid.ColumnDefinitions>

        <ListBox ItemsSource="{Binding Products}" 
                 SelectedItem="{Binding SelectedProduct}" 
                 DisplayMemberPath="Name" 
                 Margin="10" />

        <StackPanel Grid.Column="1" Margin="10">
            <TextBlock Text="Product Name:" FontWeight="Bold"/>
            <TextBlock Text="{Binding SelectedProduct.Name}" />

            <TextBlock Text="Price:" FontWeight="Bold"/>
            <TextBlock Text="{Binding SelectedProduct.Price, StringFormat={}{0:C}}" />

            <TextBlock Text="Description:" FontWeight="Bold"/>
            <TextBlock Text="{Binding SelectedProduct.Description}" TextWrapping="Wrap" />
        </StackPanel>

    </Grid>
</Window>

The above XAML code sets up a basic layout and uses a ListBox to display the product list. When a user selects a product from the ListBox, the details of the selected product are displayed in the right area.

6. Running the Application and Checking Results

Now that all the code has been written, let’s run the application to check the results. By pressing the F5 key to run it in debug mode, you will see the UI as shown below.

7. Conclusion

In this course, we created a simple product list and details application using WPF. By applying the MVVM pattern, we separated Model, View, and ViewModel, enhancing code readability and maintainability. We were able to easily implement the connection between the user interface and business logic by utilizing WPF’s data binding capabilities.
I hope this course has enhanced your understanding of fundamental data binding and MVVM in WPF.

Moving forward, I encourage you to develop more complex and diverse WPF applications. Utilize the various features of WPF to create even more appealing user interfaces!