Xamarin formx 5.0 上的 FlyoutPage

如何解决Xamarin formx 5.0 上的 FlyoutPage

Om Xamarin Forms 我们使用此代码创建母版页：

<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<STYLE>
body {
    background-color: #2C2F33
}
.form {
    font-family: Arial;
    color: #FFFFFF
}
.
</STYLE>
<SCRIPT>
function testResults (form) {
    var Name = form.Name.value;
     var Bio = form.Bio.value;
    document.write (Name);
     document.write("<br>");
     document.write (Bio);
}
</SCRIPT>
</HEAD>
<BODY>
<DIV CLASS="FORM">
<FORM NAME="myform" ACTION="" METHOD="GET" >What is your name? This can be your first name,or an alias your kNown by. <BR>
<INPUT TYPE="text" NAME="Name" VALUE="" STYLE="height: 50px; width: 400px;"><P>
<FORM NAME="myform" ACTION="" METHOD="GET">Who are you? What do you do? <BR>
<INPUT TYPE="text" NAME="Bio" VALUE="" STYLE="height: 200px; width: 400px;"><P>
<div class="">
<INPUT TYPE="button" NAME="button" Value="Submit" onClick="testResults(this.form)">
</div>
</FORM>
</DIV>
</BODY>
</HTML>

现在我将代码迁移到 5.0 版并像这样更改它 (from this link)：

 <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>

 <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>

和导航：

           containerRegistry.RegisterForNavigation<NavigationPage>("NavigationPage");
            containerRegistry.RegisterForNavigation<PrismMasterDetailPage,PrismMasterDetailPageviewmodel>("MasterPage");
            containerRegistry.RegisterForNavigation<MainPage,MainPageviewmodel>();

当我尝试运行应用程序时，出现此异常：使用 FlyoutPage 前必须设置 Flyout 和 Detail

我应该更改我的代码以使其正常工作（它应该显示在 MasterPage 的右侧和屏幕 MainPage 的中心）？

编辑：我通过添加登录页面来更改我的代码。它在 App.xaml.cs 上运行，如下所示：

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

在 LoginPageviewmodel 上，我已将命令绑定到按钮，我在其中运行导航到 MainPage 的方法。在 Xamarin.Forms 4.8 中，我们使用该命令：

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

但是现在当我使用它时导航不起作用（没有任何例外或类似的想法）:(

当我从名称中删除 /MasterPage 时，我导航到 MainPage 但我没有我的 MasterPage

编辑2：我将代码表单使用 FlyoutPage 更改为 MasterDetailPage 并开始工作，但 MasterDetailPage 在 xamarin 表单中已过时 5

解决方法

Prism 8 不支持 FlyoutPage。您可以阅读有关它的更多信息 here 和 here。

因为错误显示 Flyout and Detail must be set before using a FlyoutPage .

尝试在 FlyoutPage xaml 中也设置 FlyoutPage.Detail。

 <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>

参考https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage#create-a-flyoutpage。

实际上 Prism 8 不支持 FlyoutPage，所以当我回到：

 <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>

它开始工作，但我有警告，因为 MasterDetailPage 已过时但工作:) 我需要等待 Prism 8.1 并将 MasterDetailPage 迁移到 FlyoutPage