How to Implement Page Navigation in WPF Using the MVVM Pattern?

Use MVVM pattern to implement page navigation in WPF

Page Navigation in WPF

Navigating between different pages or screens is a common need when developing WPF applications. This can be achieved through a variety of methods, including MVVM (Model-View-ViewModel).

MVVM method

MVVM is a design pattern that separates the logic of an application into different components: models, views, and view models. In this case, the view is responsible for displaying the UI, the model represents the underlying data, and the view model acts as an intermediary between the two, converting the model's data into a format suitable for the view.

Usage

To use MVVM to implement page navigation:

• MainWindow.xaml:

  • Use ContentControl to host the current page.
  • Load the page template into DataTemplates with the key corresponding to the page view model.
  • Bind the ContentControl's Content property to the SelectedPage property in the view model.

• Page model:

  • Create page models as user controls or DataTemplates.

• ViewModel:

  • Create a view model for each page that implements IPage and exposes page-specific properties (e.g., title).

• MainViewModel:

  • Implement MainViewModel, which manages pages and navigation.
    • Keeps a dictionary of page names and their corresponding view models.
    • Provides a command (SelectPageCommand) for selecting pages.

• SelectPageCommand:

  • This command takes a parameter representing the desired page.
  • When executed, it retrieves the view model of the specified page from the dictionary and sets it to SelectedPage, which triggers the view to display the corresponding template.

Achievement

<code class="language-xml"><ContentControl Content="{Binding SelectedPage}"></ContentControl></code>

<code class="language-csharp">public ICommand SelectPageCommand => new RelayCommand(SelectPage);

...

public void SelectPage(object param)
{
    if (param is PageName pageName && Pages.TryGetValue(pageName, out IPage selectedPage))
    {
        SelectedPage = selectedPage;
    }
}</code>

This approach provides a concise and flexible way to navigate pages, making it easy to add or remove pages and reducing code duplication.

The above is the detailed content of How to Implement Page Navigation in WPF Using the MVVM Pattern?. For more information, please follow other related articles on the PHP Chinese website!