c# - 자식 메뉴가있는 Xamarin Forms 탭 페이지

현재 주요 주제와 하위 주제/조회가있는 복잡한 비즈니스 응용 프로그램을 개발 중입니다.

내가 이루고 싶은 것은 모든 페이지에서 해당 응용 프로그램 내에서 성능이 뛰어난 탐색입니다.

햄버거 메뉴를 사용하는 것은 옵션이 아닙니다.

이제 사용자 정의 탭 페이지 탐색입니다.

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

이것과 커스텀 렌더링은 다음과 같습니다 (UPP를 샘플로 사용) :

<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}" />

와이즈 비즈

 
PLACEHOLDER

그런 다음이 코드를 "PLACEHOLDER"에 넣었습니다

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

이제 구현하려는 것은 탭을 클릭 할 때 드롭 다운이있는 메뉴입니다.

어떻게하면 되나요?

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