CODEWITHSUNDEEP
xamarin.formsprism
Newer
Newer

Reputation: 79

FlyoutPage on Xamarin formx 5.0

Om Xamarin Forms we use this code to create Master Page:

 <MasterDetailPage.ToolbarItems>
        <ToolbarItem Priority="0" Order="Secondary" Text="{x:DynamicResource MasterPageControls}" Command="{Binding ControlsCommand}" />
        <ToolbarItem Priority="1" Order="Secondary" Text="{x:DynamicResource Refresh}" Command="{Binding RefreshCommand}" />
        <ToolbarItem Priority="2" Order="Secondary" Text="{x:DynamicResource About}" Command="{Binding AboutCommand}" />
        <ToolbarItem Priority="4" Order="Secondary" Text="{x:DynamicResource Logout}" Command="{Binding LogoutCommand}"/>
    </MasterDetailPage.ToolbarItems>
    <MasterDetailPage.Master>
        <NavigationPage Title="Title" IconImageSource="hamburger.png">
            <x:Arguments>
                <ContentPage Title="Menu" 
                             BackgroundColor="White"
                             NavigationPage.HasNavigationBar="False">
 ....
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Master>

Now i migrate my code to version 5.0 and i change it like this (from this link):

 <FlyoutPage.ToolbarItems>
        <ToolbarItem Priority="0" Order="Secondary" Text="{x:DynamicResource MasterPageControls}" />
        <ToolbarItem Priority="1" Order="Secondary" Text="{x:DynamicResource Refresh}" />
        <ToolbarItem Priority="2" Order="Secondary" Text="{x:DynamicResource About}" />
        <ToolbarItem Priority="4" Order="Secondary" Text="{x:DynamicResource Logout}"/>
    </FlyoutPage.ToolbarItems>
    <FlyoutPage.Flyout>
        <NavigationPage Title="Title" IconImageSource="hamburger.png">
            <x:Arguments>
                <ContentPage Title="Menu" 
                             BackgroundColor="White"
                             NavigationPage.HasNavigationBar="False">
               ...
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Flyout>

Register:

           containerRegistry.RegisterForNavigation<NavigationPage>("NavigationPage");
            containerRegistry.RegisterForNavigation<PrismMasterDetailPage, PrismMasterDetailPageViewModel>("MasterPage");
            containerRegistry.RegisterForNavigation<MainPage, MainPageViewModel>();

And navigation:

 await NavigationService.NavigateAsync("/MasterPage/NavigationPage/MainPage");

When i try run application i got this exception: Flyout and Detail must be set before using a FlyoutPage

What should i change in my code to work it correctly (it should show on right side MasterPage and on center of the screen MainPage) ?

EDIT: I change my code by adding a login page. It run on App.xaml.cs likt this:

 await NavigationService.NavigateAsync($"/NavigationPage/{nameof(LoginPage)}");

On LoginPageViewModel i have binded command to button where i run a method to navigate to MainPage. In Xamarin.Forms 4.8 we use that command:

await NavigationService.NavigateAsync("/MasterPage/NavigationPage/MainPage",
                    new NavigationParameters {{nameof(LoginPageViewModel), string.Empty}});

But now when i use it Navigation didn't work (not have any exception or somethink like that):(

When i remove /MasterPage from name i'm navigate to MainPage but i not have my MasterPage

Edit 2: I change code form use FlyoutPage to MasterDetailPage and it start work, but MasterDetailPage is obsolete in xamarin forms 5

Upvotes: 0

Views: 3414

Answers (3)

Newer
Newer

Reputation: 79

Actually Prism 8 didn't support FlyoutPage, so when i back to:

 <MasterDetailPage.ToolbarItems>
        <ToolbarItem Priority="0" Order="Secondary" Text="{x:DynamicResource MasterPageControls}" Command="{Binding ControlsCommand}" />
        <ToolbarItem Priority="1" Order="Secondary" Text="{x:DynamicResource Refresh}" Command="{Binding RefreshCommand}" />
        <ToolbarItem Priority="2" Order="Secondary" Text="{x:DynamicResource About}" Command="{Binding AboutCommand}" />
        <ToolbarItem Priority="4" Order="Secondary" Text="{x:DynamicResource Logout}" Command="{Binding LogoutCommand}"/>
    </MasterDetailPage.ToolbarItems>
    <MasterDetailPage.Master>
        <NavigationPage Title="Title" IconImageSource="hamburger.png">
            <x:Arguments>
                <ContentPage Title="Menu" 
                             BackgroundColor="White"
                             NavigationPage.HasNavigationBar="False">
 ....
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    </MasterDetailPage.Master>

It start work, but i have warning becouse MasterDetailPage is obsolete but work :) I need to wait for Prism 8.1 and migrate MasterDetailPage to FlyoutPage

Upvotes: 0

ColeX
ColeX

Reputation: 14475

AS the error shows Flyout and Detail must be set before using a FlyoutPage .

Try to set FlyoutPage.Detail as well in FlyoutPage xaml .

 <FlyoutPage.Flyout>
        <NavigationPage Title="Title" IconImageSource="hamburger.png">
            <x:Arguments>
                <ContentPage Title="Menu" 
                             BackgroundColor="White"
                             NavigationPage.HasNavigationBar="False">
               ...
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Flyout>

<FlyoutPage.Detail>
    <NavigationPage>
      <x:Arguments>
        <pages:FlyoutPage1Detail />
      </x:Arguments>
    </NavigationPage>
  </FlyoutPage.Detail>

Refr to https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage#create-a-flyoutpage.

Upvotes: 0

adamm
adamm

Reputation: 919

FlyoutPage is not supported by Prism 8. You can read more about it here and here.

Upvotes: 1

Related Questions