Avalonia Community Toolkit中如何实现页面切换？

以下是基于Avalonia Community Toolkit的基础页面切换实现，完全不依赖ReactiveUI：

1. 准备基础视图模型类 #

继承Toolkit自带的ObservableObject，它已实现INotifyPropertyChanged，省去手动实现属性变更通知的麻烦：

using CommunityToolkit.Mvvm.ComponentModel;

public class ViewModelBase : ObservableObject
{
}

2. 实现主视图模型 #

维护当前活跃的视图模型实例，并用RelayCommand定义页面切换命令：

using CommunityToolkit.Mvvm.Input;

public class MainViewModel : ViewModelBase
{
    private ViewModelBase _currentViewModel;

    public ViewModelBase CurrentViewModel
    {
        get => _currentViewModel;
        set => SetProperty(ref _currentViewModel, value);
    }

    public RelayCommand GoToHomeCommand { get; }
    public RelayCommand GoToSettingsCommand { get; }

    public MainViewModel()
    {
        // 默认加载首页视图模型
        CurrentViewModel = new HomeViewModel();
        
        GoToHomeCommand = new RelayCommand(() => CurrentViewModel = new HomeViewModel());
        GoToSettingsCommand = new RelayCommand(() => CurrentViewModel = new SettingsViewModel());
    }
}

3. 创建页面视图模型 #

为每个页面定义对应的视图模型，继承ViewModelBase：

// 首页视图模型
public class HomeViewModel : ViewModelBase
{
    public string Greeting => "欢迎来到首页";
}

// 设置页视图模型
public class SettingsViewModel : ViewModelBase
{
    public string SettingsText => "设置页面";
}

4. 编写视图XAML #

主窗口（MainWindow.axaml） #

通过ContentControl绑定当前视图模型，并用DataTemplate关联视图与视图模型：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:YourAppNamespace.ViewModels"
        xmlns:views="clr-namespace:YourAppNamespace.Views"
        x:Class="YourAppNamespace.Views.MainWindow"
        Title="Page Navigation Demo">

    <Window.DataContext>
        <vm:MainViewModel />
    </Window.DataContext>

    <DockPanel>
        <!-- 导航按钮栏 -->
        <StackPanel DockPanel.Dock="Top" Orientation="Horizontal" Spacing="12" Margin="16">
            <Button Content="首页" Command="{Binding GoToHomeCommand}" />
            <Button Content="设置" Command="{Binding GoToSettingsCommand}" />
        </StackPanel>

        <!-- 页面内容区域 -->
        <ContentControl Content="{Binding CurrentViewModel}">
            <ContentControl.DataTemplates>
                <DataTemplate DataType="{x:Type vm:HomeViewModel}">
                    <views:HomeView />
                </DataTemplate>
                <DataTemplate DataType="{x:Type vm:SettingsViewModel}">
                    <views:SettingsView />
                </DataTemplate>
            </ContentControl.DataTemplates>
        </ContentControl>
    </DockPanel>
</Window>

页面视图（以HomeView为例） #

<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="YourAppNamespace.Views.HomeView">
    <TextBlock Text="{Binding Greeting}" FontSize="24" HorizontalAlignment="Center" VerticalAlignment="Center" />
</UserControl>

核心逻辑说明 #

• 利用ObservableObject的SetProperty方法，在CurrentViewModel变更时自动通知UI更新
• RelayCommand简化了命令绑定的实现，无需手动实现ICommand接口
• DataTemplate会根据当前视图模型的类型，自动渲染对应的页面视图

内容的提问来源于stack exchange，提问作者Ali-Muhammad Zakaryaev