在prism中使用masterdetailview实现UWP弹出拆分视图？答案

【问题标题】：Implementing UWP flyout splitview using masterdetailview in prism?在prism中使用masterdetailview实现UWP弹出拆分视图？
【发布时间】：2016-07-03 18:52:51
【问题描述】：

我完全是 xamarin 的菜鸟 :)

所以想知道是否有人可以为我指出正确的资源。

简而言之，我想使用 Xamarin MasterDetailPage 在棱镜中实现类似this 的东西。

使用主从示例here，汉堡菜单不会作为飞出菜单。

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
              prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="HelloWorld.Views.MyMasterDetail">

  <MasterDetailPage.Master>
    <ContentPage Title="Default">
      <StackLayout>
        <Button Text="ViewA" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewA?id=A" />
        <Button Text="ViewB" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewB?id=B" />
        <Button Text="ViewC" Command="{Binding NavigateCommand}" CommandParameter="MyNavigationPage/ViewC?id=C" />
      </StackLayout>
    </ContentPage>
  </MasterDetailPage.Master>

</MasterDetailPage>

现在，虽然有足够的空间，但它显示类似

（仅作为示例，我根本没有使用 SplitViewMenu）

我最初需要显示图标/一些小文本，单击汉堡包时，它应该会展开（就像第一个链接/groove 音乐应用程序行为一样）。

提示？

【问题讨论】：

标签： xamarin.forms uwp prism master-detail splitview

【解决方案1】：

现在，虽然有足够的空间，但它显示类似

根据我的经验，如果您为 SimpleNavMenuItem 分配了 Symbol 属性，可能的原因是您没有在 Themes 文件夹下导入主题文件 Generic.xaml

此文件包含自定义控件的模板、样式。例如，对于 NavMenuItem 的模板，这里需要正确分配 FontIcon 的 Glyph 属性：

<DataTemplate x:Key="NavMenuItemTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="48" />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <FontIcon FontSize="16" Glyph="{Binding Path=SymbolAsChar}" VerticalAlignment="Center"
                      HorizontalAlignment="Center" ToolTipService.ToolTip="{Binding Path=Label}" />
            <TextBlock Grid.Column="1" Text="{Binding Path=Label}" VerticalAlignment="Center" />
        </Grid>
    </DataTemplate>

虽然SimpleNavMenuItem 类的SymbolAsChar 属性基于Symbol 的值：

public sealed class SimpleNavMenuItem : INavigationMenuItem
{
        ......
        public Symbol Symbol { get; set; }
        public char SymbolAsChar => (char) Symbol;
        ......
}

如果你仍然可以让它工作，请分享一个演示:)

【讨论】：

抱歉，我好像不太清楚？我没有使用 SplitViewMenu，我正在尝试使用 prism 和那里提供的示例，我包含 splitviewmenu 的唯一原因是为了演示，我将编辑问题以使其更清晰。
您能否提供一个示例，说明如何使用使用本机 SplitView 的自定义 MasterDetailPageRenderer 示例？如果没有，希望 Xamarin 将在下一个版本中释放此控件。

【解决方案2】：

我自己一直在寻找类似的东西，因为当我在 Windows 10 移动设备上运行 MasterDetailPage 的主页面中显示的 NavigationBar 时，我无法隐藏它（虽然我可以为 PC 隐藏）。所以基本上，我正在考虑最终构建我自己的 MasterDetailPage 版本。

由于我还没有构建它，我无法确切地告诉你如何实现你的要求，但我知道它需要你：

为 MasterDetailView 编写您自己的自定义渲染器，或者，
编写新控件及其渲染器

在这两种情况下，您的渲染器都将涉及创建和操作一个新的 SplitView（这是您的 SplitViewMenu 示例扩展的本机 UWP 控件）。有一个创建实际 UWP 控件here 的教程。如果您还没有了解 Xamarin 的渲染器，它们是 Xamarin.Forms 控件和给定平台的本机控件之间的“翻译器”和“解释器”。我怀疑 Xamarin 最终会为 UWP 重写他们的 MastDetailPage 渲染器，以使用 SplitView 作为基础，但谁知道那会是什么时候。 Xamarin 在 GitHub 上还有一个适用于 Xamarin.Forms（以及其他）的开源 SDK，因此您可以研究 UWP 的 MasterDetailPageRenderer。

【讨论】：