如何通过ViewModel点击按钮切换FlyoutPage.Detail页面

• 我有一个基础的FlyoutPage，包含带菜单按钮的侧边栏和作为详情页的主页面

<FlyoutPage ...>
    <FlyoutPage.Flyout>
        <generalModule:MenuFlyout x:Name="flyoutPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:MainPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

• FlyoutPage.Flyout中的按钮会触发一个命令

<ContentPage ...>
<Grid WidthRequest="320" RowDefinitions="Auto,Auto" ColumnDefinitions="*" Margin="5">
    <toolkit:Expander Grid.Row="0">
        <toolkit:Expander.Header>
            <Label Text="MyPages" Style="{StaticResource MenuHeadline}"/>
        </toolkit:Expander.Header>
        <Grid RowDefinitions="Auto,Auto,Auto,Auto" ColumnDefinitions="*" RowSpacing="1">
            <Button Text="Page1" Command="{Binding NavigateToPageCommand}" CommandParameter="Page1" Grid.Row="0" Style="{StaticResource MenuButton}"/>
            <Button Text="Page2" Command="{Binding NavigateToPageCommand}" CommandParameter="Page2" Grid.Row="1" Style="{StaticResource MenuButton}"/>
        </Grid>
    </toolkit:Expander>
</Grid>
</ContentPage>

• 该命令会调用ViewModel中的方法：

public class ViewModelCommands : ViewModel
{
    public ViewModelCommands() : base() { }
    public ICommand NavigateToPageCommand { get; private set; }

    public override void Init()
    {
        base.Init();
        NavigateToPageCommand = new Command((page) => NavigateToPage((string)page), (page) => true);
    }
}

• ViewModel中的方法需要替换FlyoutPage.Detail

上述绑定均正常工作，现需了解如何切换FlyoutPage.Detail页面？当前方案是否可行，或需采用其他方式？

ViewModel本身无法直接访问View中的Detail，因此无法直接更新/替换它。

可以通过方法(4)更新XAML/代码后置中绑定的某个属性，但不清楚如何绑定到以下内容：

<FlyoutPage.Detail>
    <NavigationPage>
        <x:Arguments>
            <local:MainPage />
        </x:Arguments>
    </NavigationPage>
</FlyoutPage.Detail>

另外，在ViewModel中创建NavigationPage并绑定似乎并非良策。

若使用Clicked方法需写在FlyoutPage.Flyout的代码后置中，还要更新FlyoutPage的Details，这种方式并不理想，且我希望尽量避免使用代码后置。

我希望采用符合MVVM规范的方案，但也接受任何可行的解决办法。

• 需实现点击按钮切换FlyoutPage.Detail页面
• 优先使用命令并严格遵循MVVM规范
• 考虑过通过XAML或代码后置绑定实现
• 也可考虑代码后置直接修改，但涉及跨页面修改属性
• 或许可通过命令返回对应页面进行替换

方案1：利用MessagingCenter实现跨组件通信 #

这是MVVM中常用的解耦方式，ViewModel无需直接引用View，通过消息通知View完成页面切换。

1. 在ViewModel的NavigateToPage方法中发送消息

private void NavigateToPage(string pageName)
{
    // 发送携带目标页面名称的消息
    MessagingCenter.Send(this, "SwitchDetailPage", pageName);
}

2. 在FlyoutPage的代码后置中订阅消息

public partial class MainFlyoutPage : FlyoutPage
{
    public MainFlyoutPage()
    {
        InitializeComponent();
        // 订阅消息并处理页面切换
        MessagingCenter.Subscribe<ViewModelCommands, string>(this, "SwitchDetailPage", (sender, pageName) =>
        {
            Page targetPage = pageName switch
            {
                "Page1" => new Page1(),
                "Page2" => new Page2(),
                _ => new MainPage()
            };
            // 替换Detail为包含目标页面的NavigationPage
            Detail = new NavigationPage(targetPage);
            // 切换后自动关闭侧边栏
            IsPresented = false;
        });
    }

    protected override void OnDisappearing()
    {
        base.OnDisappearing();
        // 页面销毁时取消订阅，避免内存泄漏
        MessagingCenter.Unsubscribe<ViewModelCommands, string>(this, "SwitchDetailPage");
    }
}

方案2：绑定FlyoutPage的Detail属性到ViewModel（推荐） #

通过ViewModel的属性绑定实现页面切换，完全符合MVVM规范。

1. ViewModel中添加可绑定属性

public class ViewModelCommands : ViewModel, INotifyPropertyChanged
{
    private Page _currentDetailPage;
    public Page CurrentDetailPage
    {
        get => _currentDetailPage;
        set
        {
            _currentDetailPage = value;
            OnPropertyChanged();
        }
    }

    private void NavigateToPage(string pageName)
    {
        Page targetPage = pageName switch
        {
            "Page1" => new Page1(),
            "Page2" => new Page2(),
            _ => new MainPage()
        };
        CurrentDetailPage = new NavigationPage(targetPage);
    }

    // 确保基类ViewModel已实现INotifyPropertyChanged的OnPropertyChanged方法
}

2. FlyoutPage的XAML中绑定Detail属性

<FlyoutPage ...
            Detail="{Binding CurrentDetailPage}">
    <FlyoutPage.Flyout>
        <generalModule:MenuFlyout x:Name="flyoutPage" />
    </FlyoutPage.Flyout>
    <!-- 不再硬编码Detail内容，完全通过绑定控制 -->
</FlyoutPage>

注意：需要确保FlyoutPage的BindingContext已设置为ViewModelCommands实例。

方案3：使用导航服务实现完全解耦 #

适合中大型项目，通过封装导航服务接口，彻底分离View和ViewModel的依赖。

1. 定义导航服务接口

public interface INavigationService
{
    void SwitchFlyoutDetailPage(string pageName);
}

2. 实现导航服务

public class NavigationService : INavigationService
{
    private readonly FlyoutPage _mainFlyoutPage;

    public NavigationService(FlyoutPage mainFlyoutPage)
    {
        _mainFlyoutPage = mainFlyoutPage;
    }

    public void SwitchFlyoutDetailPage(string pageName)
    {
        Page targetPage = pageName switch
        {
            "Page1" => new Page1(),
            "Page2" => new Page2(),
            _ => new MainPage()
        };
        _mainFlyoutPage.Detail = new NavigationPage(targetPage);
        _mainFlyoutPage.IsPresented = false;
    }
}

3. ViewModel中注入并使用服务

public class ViewModelCommands : ViewModel
{
    private readonly INavigationService _navigationService;

    public ViewModelCommands(INavigationService navigationService)
    {
        _navigationService = navigationService;
    }

    public override void Init()
    {
        base.Init();
        NavigateToPageCommand = new Command((page) => _navigationService.SwitchFlyoutDetailPage((string)page));
    }
}

方案对比 #

• 消息中心：实现简单，适合小型项目，但消息字符串易出错，维护性一般。
• 属性绑定：符合MVVM规范，代码直观，维护性强，是中小型项目的首选。
• 导航服务：解耦程度最高，便于扩展和测试，适合中大型项目。

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