带有子菜单的 Xamarin Forms 选项卡式页面答案

【问题标题】：Xamarin Forms tabbed page with childmenu带有子菜单的 Xamarin Forms 选项卡式页面
【发布时间】：2017-10-11 09:20:09
【问题描述】：

我目前正在开发一个具有主要主题和子主题/视图的复杂业务应用程序。

我想要实现的是在该应用程序中对所有页面进行高性能导航。

不能使用汉堡菜单。

现在我已经拥有了我的自定义标签页导航。

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        x:Class="Company.Core.Views.MainView"
        xmlns:views="clr-namespace:Company.Core.Views"
        xmlns:viewModelBase="clr-namespace:Company.Core.ViewModels.Base"
        xmlns:controls="clr-namespace:Company.Core.Controls"
        BarBackgroundColor="{StaticResource DarkGreenColor}"
        BackgroundColor="{StaticResource BackgroundColor}"
        BarTextColor="{StaticResource WhiteColor}"
        viewModelBase:ViewModelLocator.AutoWireViewModel="true">
<TabbedPage.Title>
    <OnPlatform      
        x:TypeArguments="x:String"
        iOS="App Name"
        WinPhone="App Name"/>
</TabbedPage.Title>
<ContentPage.ToolbarItems>
    <ToolbarItem 
        Command="{Binding SettingsCommand}"
        Text="Settings">
        <ToolbarItem.Icon>
            <OnPlatform 
                x:TypeArguments="FileImageSource"
                WinPhone="Assets\app_settings.png"
                Android="app_settings"
                iOS="app_settings"/>
        </ToolbarItem.Icon>
    </ToolbarItem>
</ContentPage.ToolbarItems>
<views:HomePageView  
    x:Name="HomeView">
    <views:HomePageView.Icon>
        <OnPlatform        
            x:TypeArguments="FileImageSource"
            Android="menu_filter"
            iOS="menu_filter"
            WinPhone="Assets/test.png"/>
    </views:HomePageView.Icon>
</views:HomePageView>
<views:EmployeesView  
    x:Name="EmployeesView">
    <views:EmployeesView.Icon>
        <OnPlatform        
            x:TypeArguments="FileImageSource"
            Android="menu_filter"
            iOS="menu_filter"
            WinPhone="Assets/personalliste.png"/>
    </views:EmployeesView.Icon>
</views:EmployeesView>
<views:MonthlySalaryView  
    x:Name="MonthlySalaryView">
    <views:MonthlySalaryView.Icon>
        <OnPlatform        
            x:TypeArguments="FileImageSource"
            Android="bvg"
            iOS="bvg"
            WinPhone="Assets/bvg.png"/>
    </views:MonthlySalaryView.Icon>
</views:MonthlySalaryView>    
<views:CompanyDataView  
    x:Name="CompanyDataView">
    <views:CompanyDataView.Icon>
        <OnPlatform        
            x:TypeArguments="FileImageSource"
            Android="DTA"
            iOS="DTA"
            WinPhone="Assets/DTA.png"/>
    </views:CompanyDataView.Icon>
</views:CompanyDataView>

有了这个和像这样的自定义渲染（使用 UWP 作为示例）：

<UserControl
x:Name="Control"
x:Class="Company.Core.UWP.Controls.TabItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Company.Core.UWP.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="600">
<UserControl.Resources>
    <ResourceDictionary>

        <Style x:Key="TabMainPanelStyle" TargetType="StackPanel">
            <Setter Property="Height" Value="48" />
            <Setter Property="Width" Value="150" />
        </Style>

        <Style x:Key="TabIconStyle" TargetType="Image">
            <Setter Property="Height" Value="20" />
            <Setter Property="Width" Value="20" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Margin" Value="0, 4" />
        </Style>

        <Style x:Key="TabTextStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontFamily" Value="Segoe UI" />
            <Setter Property="FontSize" Value="12" />
            <Setter Property="LineStackingStrategy" Value="BlockLineHeight" />
            <Setter Property="LineHeight" Value="14" />
            <Setter Property="MaxLines" Value="2" />
            <Setter Property="TextAlignment" Value="Center" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="Margin" Value="2,5,2,7" />
        </Style>

        <Style x:Key="TabBadgeStyle" TargetType="Grid">
            <Setter Property="Height" Value="16" />
            <Setter Property="Width" Value="16" />
            <Setter Property="CornerRadius" Value="24" />
            <Setter Property="HorizontalAlignment" Value="Right" />
            <Setter Property="VerticalAlignment" Value="Top" />
            <Setter Property="Margin" Value="6, 2, 0, 6" />
        </Style>

        <Style x:Key="BadgeTextStyle" TargetType="TextBlock">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="10" />
            <Setter Property="HorizontalAlignment" Value="Center" />
            <Setter Property="VerticalAlignment" Value="Center" />
        </Style>

    </ResourceDictionary>
</UserControl.Resources>
<Grid>
    <StackPanel
        Style="{StaticResource TabMainPanelStyle}">
        <!-- TAB ICON -->
        <Image       
            Source="{Binding ElementName=Control, Path=Icon}"
            Style="{StaticResource TabIconStyle}"/>
        <!-- TAB TEXT -->
        <TextBlock  
            Text="{Binding ElementName=Control, Path=Label}"
            Style="{StaticResource TabTextStyle}" />

占位符

    </StackPanel>
    <!-- TAB BADGE -->
    <Grid
        Background="{Binding ElementName=Control, Path=BadgeColor}"
        Style="{StaticResource TabBadgeStyle}">
        <TextBlock
            Text="{Binding ElementName=Control, Path=BadgeText}"
            Style="{StaticResource BadgeTextStyle}"/>
    </Grid>
</Grid>

然后我把这段代码放在“PLACEHOLDER”中

<ListView>
    <ListView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Border Background="LightGray" Height="200" Width="200">
                    <TextBlock Text="{Binding}" 
                           FontSize="48" Foreground="Green"/>
                </Border>
            </Grid>
        </DataTemplate>
   </ListView.ItemTemplate>
   <ListView.Items>
        <x:String>One</x:String>
        <ListViewItem>Two</ListViewItem>
   </ListView.Items>
</ListView>

现在我要实现的是一些菜单，当我点击我的标签时，我有一个下拉菜单。

我怎样才能做到这一点？

【问题讨论】：

标签： c# xaml navigation xamarin.forms cross-platform

【解决方案1】：

我知道 Xamarin.Forms 中没有可用的下拉菜单，但相当于 Xamarin.Forms 中的下拉菜单是一个选择器。您可以使用它来显示您希望用户从中选择的选项列表。如果不告诉我，我希望我能正确理解您的问题

【讨论】：