0

我正在编写一个针对 Android、iOS 和 UWP 的 xamarin 应用程序。

我们使用 shell 堆栈进行路由，并有一个带有一些弹出项的底栏。

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:d="http://xamarin.com/schemas/2014/forms/design"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       xmlns:views="clr-namespace:CADLearning.App.Views"
       xmlns:user="clr-namespace:CADLearning.App.Views.User"
       xmlns:controls="clr-namespace:CADLearning.App.Controls"
       xmlns:services="clr-namespace:CADLearning.App.Services"
       BackgroundColor="{DynamicResource HeaderBackgroundColor}"
       FlyoutBackgroundColor="{DynamicResource HeaderBackgroundColor}"  
       x:Name="this"
       x:Class="CADLearning.App.AppShell">

    <!-- 
        Styles and Resources 
    -->
    <Shell.Resources>
        <ResourceDictionary>
            <Color x:Key="NavigationPrimary">#2196F3</Color>
            <Style x:Key="BaseStyle" TargetType="Element">
                <Setter Property="Shell.BackgroundColor" Value="{DynamicResource BackgroundColor}" />
                <Setter Property="Shell.ForegroundColor" Value="{DynamicResource ForegroundColor}" />
                <Setter Property="Shell.TitleColor" Value="{DynamicResource ForegroundColor}" />
                <Setter Property="Shell.DisabledColor" Value="{DynamicResource DisabledForegroundColor}" />
                <Setter Property="Shell.UnselectedColor" Value="{DynamicResource UnselectedForegroundColor}" />
                <Setter Property="Shell.TabBarBackgroundColor" Value="{DynamicResource HeaderBackgroundColor}" />
                <Setter Property="Shell.TabBarForegroundColor" Value="{DynamicResource OrangeColor}"/>
                <Setter Property="Shell.TabBarUnselectedColor" Value="{DynamicResource UnselectedForegroundColor}"/>
                <Setter Property="Shell.TabBarTitleColor" Value="{DynamicResource OrangeColor}"/>
            </Style>
            <Style TargetType="Tab" BasedOn="{StaticResource BaseStyle}" />
            <Style x:Key="FlyoutItemLabelStyle" TargetType="Label">
                <Setter Property="FontSize" Value="16"/>
                <Setter Property="TextColor" Value="{DynamicResource ForegroundColor}"/>
                <Setter Property="VerticalOptions" Value="Center"/>
            </Style>
        </ResourceDictionary>
    </Shell.Resources>
    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>
    <Shell.ItemTemplate>
        <DataTemplate>
            <StackLayout Padding="5,15,5,0" Orientation="Horizontal">
                <Image Source="{Binding FlyoutIcon}" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
                <Label Grid.Column="1" Text="{Binding Title}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
            </StackLayout>
        </DataTemplate>
    </Shell.ItemTemplate>
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <StackLayout Padding="5,15,5,0" Orientation="Horizontal">
                <Image Source="{Binding FlyoutIcon}" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
                <Label Grid.Column="1" Text="{Binding Title}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
            </StackLayout>
        </DataTemplate>
    </Shell.MenuItemTemplate>

    <!--Actual Items-->
    <FlyoutItem Title="Home" Icon="home.png" Route="home">
        <Tab Title="Dashboard" Icon="workflow.png" Route="dashboard">
            <ShellContent ContentTemplate="{DataTemplate views:DashboardPage}"/>
        </Tab>
        <Tab Title="Roles &amp; Goals" Icon="goal.png" Route="goals">
            <ShellContent ContentTemplate="{DataTemplate views:GoalsPage}"/>
        </Tab>
        <Tab Title="Library" Icon="library.png" Route="library">
            <ShellContent ContentTemplate="{DataTemplate views:LibraryPage}"/>
        </Tab>
        <Tab Title="Playlists" Icon="playlist.png" Route="playlists">
            <ShellContent ContentTemplate="{DataTemplate views:PlaylistsPage}"/>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Support" Icon="Q.png" Route="support">
        <ShellContent ContentTemplate="{DataTemplate views:QPage}"/>
    </FlyoutItem>
    <FlyoutItem Title="Settings" Icon="settings.png" Route="user">
        <Tab Title="Settings" Icon="settings.png" Route="settings">
            <ShellContent ContentTemplate="{DataTemplate user:SettingsPage}"/>
        </Tab>
        <Tab Title="Transcript" Icon="transcript.png" Route="transcript">
            <ShellContent ContentTemplate="{DataTemplate user:TranscriptPage}"/>
        </Tab>
    </FlyoutItem>
    <MenuItem Text="Logout" Icon="login.png" x:Name="miLogout" Clicked="miLogout_Clicked"/>
</Shell>

在 Android 和 iOS 上，这可以正常工作，并且显示底部的选项卡式项目。

安卓外壳

但是在 UWP 中，除非您将鼠标悬停在它们上方，否则它们不会显示

在此处输入图像描述

谁能指出我在 UWP 中的正确方向？

4

0 回答 0