如何在AvaloniaUI中通过子UserControl按钮实现页面导航

问题描述 #

熟悉WPF，刚接触AvaloniaUI/ReactiveUI，正评估将WPF项目迁移至AvaloniaUI。目前遇到的问题是：能找到大量控件与自身ViewModel绑定命令的示例，但找不到子UserControl绑定父ViewModel命令的相关内容。

已基于AvaloniaUI基础示例编写了MainWindowViewModel.cs，其中包含页面导航命令NavigateNextCommand和NavigatePreviousCommand，且已在MainWindow.axaml中成功绑定导航按钮。现在希望在子页面（UserControl）的按钮上绑定这些父级导航命令，询问可行方法，或是否需通过事件处理通知主窗口执行导航，并请求基础示例。此前尝试过多个路由示例，但均未涉及父子控件关系。

附相关代码 #

MainWindowViewModel.cs

public class MainWindowViewModel : ViewModelBase
{
    public MainWindowViewModel()
    {
        // Set current page to first on start up
        _CurrentPage = Pages[0];

        // Create Observables which will activate to deactivate our commands based on CurrentPage state
        var canNavNext = this.WhenAnyValue(x => x.CurrentPage.CanNavigateNext);
        var canNavPrev = this.WhenAnyValue(x => x.CurrentPage.CanNavigatePrevious);

        NavigateNextCommand = ReactiveCommand.Create(NavigateNext, canNavNext);
        NavigatePreviousCommand = ReactiveCommand.Create(NavigatePrevious, canNavPrev);
    }

    // A read.only array of possible pages
    private readonly PageViewModelBase[] Pages = 
    { 
        new FirstPageViewModel(),
        new SecondPageViewModel(),
        new ThirdPageViewModel()
    };

    // The default is the first page
    private PageViewModelBase _CurrentPage;

    /// <summary>
    /// Gets the current page. The property is read-only
    /// </summary>
    public PageViewModelBase CurrentPage
    {
        get { return _CurrentPage; }
        private set { this.RaiseAndSetIfChanged(ref _CurrentPage, value); }
    }

    /// <summary>
    /// Gets a command that navigates to the next page
    /// </summary>
    public ICommand NavigateNextCommand { get; }

    private void NavigateNext()
    {
        // get the current index and add 1
        var index = Pages.IndexOf(CurrentPage) + 1;

        //  /!\ Be aware that we have no check if the index is valid. You may want to add it on your own. /!\
        CurrentPage = Pages[index];
    }

    /// <summary>
    /// Gets a command that navigates to the previous page
    /// </summary>
    public ICommand NavigatePreviousCommand { get; }

    private void NavigatePrevious()
    {
        // get the current index and subtract 1
        var index = Pages.IndexOf(CurrentPage) - 1;

        //  /!\ Be aware that we have no check if the index is valid. You may want to add it on your own. /!\
        CurrentPage = Pages[index];
    }
}  

MainWindow.axaml

<TransitioningContentControl Content="{Binding CurrentPage}" />

 <StackPanel Grid.Row="1" Orientation="Horizontal" Spacing="5"
        HorizontalAlignment="Right">
     <Button Command="{Binding NavigatePreviousCommand}" Content="Back" />
     <Button Command="{Binding NavigateNextCommand}" Content="Next" />
</StackPanel>

解决方案 #

方法1：直接绑定父级DataContext #

在子UserControl的XAML中，通过RelativeSource定位到父窗口，直接绑定父ViewModel的命令。这种方式简单快速，适合简单场景。

示例（FirstPage.axaml）：

<!-- 子页面中的导航按钮 -->
<Button 
    Content="从子页跳转下一页"
    Command="{Binding DataContext.NavigateNextCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />

<Button 
    Content="从子页返回上一页"
    Command="{Binding DataContext.NavigatePreviousCommand, RelativeSource={RelativeSource AncestorType={x:Type Window}}}" />

注意：这种方式依赖UI层级结构，如果后续窗口布局变更，可能需要调整绑定的AncestorType或路径。

方法2：父ViewModel传递命令给子ViewModel #

遵循MVVM原则，父ViewModel初始化子页面时将导航命令传递过去，子页面绑定自身ViewModel的命令属性，完全不依赖UI结构。

步骤1：修改子页面ViewModel

以FirstPageViewModel为例，添加命令属性：

public class FirstPageViewModel : PageViewModelBase
{
    public ICommand NavigateNextCommand { get; set; }
    public ICommand NavigatePreviousCommand { get; set; }

    // 子页面原有逻辑...
}

步骤2：调整父ViewModel的页面初始化

由于命令需要在构造函数中创建，需把Pages改为延迟初始化，确保命令已实例化：

public class MainWindowViewModel : ViewModelBase
{
    private PageViewModelBase[] _pages;
    private PageViewModelBase[] Pages
    {
        get
        {
            if (_pages == null)
            {
                _pages = new PageViewModelBase[]
                {
                    new FirstPageViewModel
                    {
                        NavigateNextCommand = this.NavigateNextCommand,
                        NavigatePreviousCommand = this.NavigatePreviousCommand
                    },
                    new SecondPageViewModel
                    {
                        NavigateNextCommand = this.NavigateNextCommand,
                        NavigatePreviousCommand = this.NavigatePreviousCommand
                    },
                    new ThirdPageViewModel
                    {
                        NavigateNextCommand = this.NavigateNextCommand,
                        NavigatePreviousCommand = this.NavigatePreviousCommand
                    }
                };
            }
            return _pages;
        }
    }

    // 原有构造函数和其他逻辑不变...
}

步骤3：子页面XAML绑定

直接绑定自身ViewModel的命令：

<Button Content="从子页跳转下一页" Command="{Binding NavigateNextCommand}" />
<Button Content="从子页返回上一页" Command="{Binding NavigatePreviousCommand}" />

方法3：ReactiveUI消息总线（解耦场景） #

如果父子组件耦合度低，或需要跨模块通信，用ReactiveUI的MessageBus发送导航消息，父ViewModel订阅消息并执行导航。

步骤1：定义导航消息类

public class NavigationMessage
{
    public NavigationDirection Direction { get; set; }
}

public enum NavigationDirection
{
    Next,
    Previous
}

步骤2：父ViewModel订阅消息

在MainWindowViewModel构造函数中添加订阅：

public MainWindowViewModel()
{
    // 原有初始化逻辑...

    // 订阅导航消息
    MessageBus.Current.Listen<NavigationMessage>()
        .Subscribe(msg =>
        {
            switch (msg.Direction)
            {
                case NavigationDirection.Next:
                    if (NavigateNextCommand.CanExecute(null))
                        NavigateNextCommand.Execute(null);
                    break;
                case NavigationDirection.Previous:
                    if (NavigatePreviousCommand.CanExecute(null))
                        NavigatePreviousCommand.Execute(null);
                    break;
            }
        });
}

步骤3：子ViewModel发送消息

修改子ViewModel，创建触发消息的命令：

public class FirstPageViewModel : PageViewModelBase
{
    public ICommand NavigateNextCommand { get; }
    public ICommand NavigatePreviousCommand { get; }

    public FirstPageViewModel()
    {
        NavigateNextCommand = ReactiveCommand.Create(() =>
        {
            MessageBus.Current.SendMessage(new NavigationMessage { Direction = NavigationDirection.Next });
        });

        NavigatePreviousCommand = ReactiveCommand.Create(() =>
        {
            MessageBus.Current.SendMessage(new NavigationMessage { Direction = NavigationDirection.Previous });
        });
    }
}

步骤4：子页面XAML绑定

和方法2一致，直接绑定自身ViewModel的命令：

<Button Content="从子页跳转下一页" Command="{Binding NavigateNextCommand}" />
<Button Content="从子页返回上一页" Command="{Binding NavigatePreviousCommand}" />

内容的提问来源于stack exchange，提问作者zeegoodz