user3899407
user3899407

Reputation: 11

Xamarin.Forms FlyoutPage is not working with Prism

Please help me out. In order for you to understand my problem, I have replicated the scenario in sample application

As Xamarin.Forms introduced FlyoutPage page in 5.0 version, navigation is not working in one of the applications. I am opening main page from app.xaml.cs like this await NavigationService.NavigateAsync("Page3");

FlyoutPage:

    <FlyoutPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:views="clr-namespace:PrismNavigation.Views;assembly=PrismNavigation"
                xmlns:prism="http://prismlibrary.com"
                prism:ViewModelLocator.AutowireViewModel="True"
                x:Class="PrismNavigation.Views.Page3"
                Title="Master">
        <FlyoutPage.Flyout>
            <ContentPage Title="Menu">
                <StackLayout>
                <Button Text="Page2" HeightRequest="50" WidthRequest="100" Command="{Binding NavigateCommand}" CommandParameter="Page2"></Button>
                </StackLayout>
            </ContentPage>
        </FlyoutPage.Flyout>
        <FlyoutPage.Detail>
            <NavigationPage>
                <x:Arguments>
                    <views:Page1></views:Page1>
                </x:Arguments>
            </NavigationPage>
        </FlyoutPage.Detail>
    </FlyoutPage>

Page3ViewModel:

    using Prism.Commands;
    using Prism.Mvvm;
    using Prism.Navigation;
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    
    namespace PrismNavigation.ViewModels
    {
        public class Page3ViewModel : ViewModelBase
        {
            private readonly INavigationService navigationService;
    
            public Page3ViewModel(
                INavigationService navigationService)
                : base(navigationService)
            {
                this.navigationService = navigationService;
                this.NavigateCommand = new DelegateCommand<string>(this.NavigateCommandExecute);
            }
    
            public override void OnNavigatedTo(INavigationParameters parameters)
            {
                base.OnNavigatedTo(parameters);
            }
    
            private void NavigateCommandExecute(string obj)
            {
                this.navigationService.NavigateAsync($"NavigationPage/{obj}");
            }
    
            public DelegateCommand<string> NavigateCommand { get; set; }
        }
    }

App:

    using Prism;
    using Prism.Ioc;
    using PrismNavigation.ViewModels;
    using PrismNavigation.Views;
    using Xamarin.Essentials.Implementation;
    using Xamarin.Essentials.Interfaces;
    using Xamarin.Forms;
    
    namespace PrismNavigation
    {
        public partial class App
        {
            public App(IPlatformInitializer initializer)
                : base(initializer)
            {
            }
    
            protected override async void OnInitialized()
            {
                InitializeComponent();
                await NavigationService.NavigateAsync("Page3");
            }
    
            protected override void RegisterTypes(IContainerRegistry containerRegistry)
            {
                containerRegistry.RegisterSingleton<IAppInfo, AppInfoImplementation>();
    
                containerRegistry.RegisterForNavigation<NavigationPage>();              
                containerRegistry.RegisterForNavigation<Page1>();
                containerRegistry.RegisterForNavigation<Page2>();
                containerRegistry.RegisterForNavigation<Page3, Page3ViewModel>();
            }
        }
    }

When I am trying to navigate to Page2 from menu, i can not do that. When I click the button, navigate command is executed, but navigation is not happening.

Upvotes: 1

Views: 2029

Answers (1)

adamm
adamm

Reputation: 919

Update: In addition to my old answer, which you have fixed in the question, it seems that the FlyoutPage is not supported by Prism 8 according to this. It is planned for 8.1. So, you can either wait 8.1 or replace it with MasterDetailPage. I tried your example with MasterDetailPage and it worked fine for me:

<?xml version="1.0" encoding="utf-8" ?>
<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:prism="http://prismlibrary.com"
                  prism:ViewModelLocator.AutowireViewModel="True"
                  x:Class="PrismNavigation.Views.Page3">

    <MasterDetailPage.Master>
        <ContentPage Title="Menu">
            <StackLayout Padding="20">
                <Button Text="Page2" HeightRequest="50" WidthRequest="100" Command="{Binding NavigateCommand}" CommandParameter="Page2"></Button>
            </StackLayout>
        </ContentPage>
    </MasterDetailPage.Master>
    
    <MasterDetailPage.Detail>
      <NavigationPage>
        <x:Arguments>
            <ContentPage Title="This is Page1"></ContentPage>
        </x:Arguments>
      </NavigationPage>
    </MasterDetailPage.Detail>
    
</MasterDetailPage>

Old answer: Seems like you didn't pass any parameter to your NavigateCommand. Try this

<StackLayout>
    <Button Text="Page2" HeightRequest="50" WidthRequest="100" Command="{Binding NavigateCommand}" CommandParameter="Page2"></Button>
</StackLayout>

Upvotes: 2

Related Questions