Implement Content Switching via Side Navigation Bar in WPF

┌─────────┬────────────────────────────┐
│  Title  │                            │
├─────────┤                            │
│  Title  │                            │
├─────────┤           Content          │
│         │                            │
│         │                            │
│         │                            │
│         │                            │
│         │                            │
└─────────┴────────────────────────────┘

<DockPanel>
    <!-- Navigation bar list box for page navigation switching, including three options: Home, Settings, About -->
    <ListBox x:Name="NavBar" SelectionChanged="NavBar_OnSelectionChanged">
        <ListBoxItem>Home</ListBoxItem>
        <ListBoxItem>Settings</ListBoxItem>
        <ListBoxItem>About</ListBoxItem>
    </ListBox>
    <!-- Content control for displaying page content corresponding to navigation options -->
    <ContentControl x:Name="ContCtrl"></ContentControl>
</DockPanel>

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();

        // Initialize the navigation bar, select the first item by default, and set the content control to display the home view
        NavBar.SelectedIndex = 0;
        ContCtrl.Content = new HomeView();
    }

    // Event handler triggered when the selected item of the navigation bar changes
    private void NavBar_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        // Get the currently selected list item
        var item = NavBar.SelectedItem as ListBoxItem;

        // Switch to the corresponding view page based on the content of the selected item
        ContCtrl.Content = item?.Content switch
        {
            "Home" => new HomeView(),
            "Settings" => new SettingView(),
            "About" => new AboutView(),
            _ => ContCtrl
        };
    }
}

<UserControl x:Class="TryDemo.HomeView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:local="clr-namespace:TryDemo"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    
    <Grid Background="LightBlue">
        <TextBlock Text="Home"
                   HorizontalAlignment="Center" 
                   VerticalAlignment="Center" 
                   FontSize="20"/>
    </Grid>
</UserControl>

<DockPanel>
    <!-- Navigation bar list box, bound to the NavItems collection and SelectedItem property of the ViewModel
         to achieve data-driven display of navigation items -->
    <ListBox x:Name="NavBar" ItemsSource="{Binding NavItems}"
             SelectedItem="{Binding SelectedItem}">
        <ListBox.ItemTemplate>
            <!-- Custom list item template, defining the display layout of each navigation item -->
            <DataTemplate>
                <DockPanel>
                    <!-- Display the icon of the navigation item -->
                    <TextBlock Text="{Binding Icon}"/>
                    <!-- Display the title text of the navigation item -->
                    <TextBlock Text="{Binding Title}"/>
                </DockPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>
    <!-- Content control, bound to the CurrentView property of the ViewModel to dynamically display the currently selected view -->
    <ContentControl Content="{Binding CurrentView}"></ContentControl>
</DockPanel>

public partial class MainWindowViewModel : ObservableObject
{
    // Property for the selected navigation item
    [ObservableProperty]
    private NavItem _selectedItem;
    
    // Property for the currently displayed view object
    [ObservableProperty]
    private object _currentView;
    
    // Array of navigation bar items, containing all available navigation options
    public NavItem[] NavItems { get; init; }
    
    public MainWindowViewModel()
    {
        // Initialize three navigation items: Home, Settings, About, each associated with the corresponding view type
        NavItems =
        [
            new NavItem("Home", "🏠️", typeof(HomeView)),
            new NavItem("Settings", "⚙️", typeof(SettingView)),
            new NavItem("About", "ℹ️", typeof(AboutView))
        ];
        // Select the first navigation item (Home) by default
        SelectedItem = NavItems[0];
    }

    /// <summary>
    /// Method implementation when the SelectedItem property changes, used to switch the currently displayed view
    /// </summary>
    /// <param name="value">The newly selected navigation item, containing type information of the target view</param>
    partial void OnSelectedItemChanged(NavItem value)
    {
        // Create an instance of the corresponding view type through reflection
        var view = Activator.CreateInstance(value.View);
        // Update the current view if creation is successful; otherwise, keep the original view
        CurrentView = view ?? CurrentView;
    }
}

/// <summary>
/// Navigation item record type, encapsulating display information of navigation bar items and associated view types
/// </summary>
/// <param name="Title">Display title text of the navigation item</param>
/// <param name="Icon">Icon character displayed by the navigation item</param>
/// <param name="View">View type associated with the navigation item, used to create the corresponding page</param>
public record NavItem(string Title, string Icon, Type View);