Xamarin.forms Xamarin表单弹出菜单底部选项卡样式

Xamarin.forms Xamarin表单弹出菜单底部选项卡样式,xamarin.forms,xamarin.shell,Xamarin.forms,Xamarin.shell,我的应用程序中有以下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:views="clr-namespace:UniversalCheckInApp.Views" x:Class="

我的应用程序中有以下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:views="clr-namespace:UniversalCheckInApp.Views"
   x:Class="UniversalCheckInApp.AppShell">

<Shell.FlyoutHeader>
    <StackLayout BackgroundColor="#1E1F26" Padding="4,4,4,4">
        <Label Text="Navigation" TextColor="#D0E1F9" FontAttributes="Bold" HorizontalTextAlignment="Start"
               VerticalTextAlignment="Center" FontSize="Large" Margin="4,4,4,4" />
    </StackLayout>
</Shell.FlyoutHeader>


<Shell.ItemTemplate>
    <DataTemplate>
        <StackLayout HorizontalOptions="StartAndExpand" Padding="16,0,4,0" >
            <Label Text="{Binding Title}" TextColor="#1E1F26" VerticalOptions="Center" 
                   HorizontalOptions="Start" Margin="0,0,0,0" FontSize="Medium" FontAttributes="Bold" 
                   TextDecorations="Underline"/>
        </StackLayout>
    </DataTemplate>
</Shell.ItemTemplate>

<FlyoutItem Title="Configuration" >
    <ShellContent x:Name="scNetworkConfiguration" Title="Network Configuration" >
        <views:NetworkConfiguration />
    </ShellContent>

    <ShellContent x:Name="scDataConfiguration" Title="Data Configuration">
        <views:FormFieldConfiguration />
    </ShellContent>
</FlyoutItem>

<FlyoutItem Title="Collect Data">
    <ShellContent x:Name="scCollectData" Title="Collect Data">
        <views:DataCollection />
    </ShellContent>
</FlyoutItem>


<FlyoutItem Title="About">
    <ShellContent x:Name="scAbout" Title="About">
        <views:About />
    </ShellContent>
</FlyoutItem>
其内容如下:

我试图找出如何更改显示在每个配置页面底部的两个菜单选项的样式

使现代化 根据下面的评论,我可以得到底部的弹出式菜单选项,如下所示:

使用这个XAML

<?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:views="clr-namespace:UniversalCheckInApp.Views"
   x:Class="UniversalCheckInApp.AppShell"
   FlyoutBackgroundColor="#D0E1F9"
   BackgroundColor="#1E1F26"
   Shell.TabBarBackgroundColor="#1E1F26"
   Shell.TabBarTitleColor="#D0E1F9"
   Shell.TabBarUnselectedColor="White">


<Shell.FlyoutHeader>
    <StackLayout BackgroundColor="#1E1F26" Padding="4,4,4,4">
        <Label Text="Navigation" TextColor="#D0E1F9" FontAttributes="Bold" HorizontalTextAlignment="Start"
           VerticalTextAlignment="Center" FontSize="Large" Margin="4,4,4,4" />
    </StackLayout>
</Shell.FlyoutHeader>


<Shell.ItemTemplate>
    <DataTemplate>
        <StackLayout HorizontalOptions="StartAndExpand" Padding="16,0,4,0" >
            <Label Text="{Binding Title}" TextColor="#1E1F26" VerticalOptions="Center" 
               HorizontalOptions="Start" Margin="0,0,0,0" FontSize="Medium" FontAttributes="Bold" 
               TextDecorations="Underline"/>
        </StackLayout>
    </DataTemplate>
</Shell.ItemTemplate>

<FlyoutItem Title="Configuration" >
    <ShellContent x:Name="scNetworkConfiguration" Title="Network Configuration" >
        <views:NetworkConfiguration />
    </ShellContent>

    <ShellContent x:Name="scDataConfiguration" Title="Data Configuration">
        <views:FormFieldConfiguration />
    </ShellContent>
</FlyoutItem>

<FlyoutItem Title="Collect Data">
    <ShellContent x:Name="scCollectData" Title="Collect Data">
        <views:DataCollection />
    </ShellContent>
</FlyoutItem>


<FlyoutItem Title="About">
    <ShellContent x:Name="scAbout" Title="About">
        <views:About />
    </ShellContent>
</FlyoutItem>
现在的挑战是,我想调整选项卡栏中选中和未选中项目的FontSize、FontAttributes和TextDecorations属性。你知道怎么做吗?

你可以用风格来实现这一点。 您可以参考以下代码:

<ShellContent Route="elephants"
                  Style="{StaticResource ElephantsShell}"
                  Title="Elephants"
                  Icon="elephant.png"
                   />  
       <Setter Property="Shell.TabBarBackgroundColor"
        Value="#3498DB" />
       <Setter Property="Shell.TabBarTitleColor"
              Value="White" />
       <Setter Property="Shell.TabBarUnselectedColor"
              Value="#90EE90" />
    <Setter Property="Shell.BackgroundColor" 
            Value="#455A64" />
    <Setter Property="Shell.ForegroundColor" 
            Value="White" />
有关更多详细信息,请参考官方样本

更新:

如果要调整选项卡栏“选定项”和“未选定项”的文本属性se.g。普通文本颜色和未选择的文本颜色,可以使用以下代码:

<ShellContent Route="elephants"
                  Style="{StaticResource ElephantsShell}"
                  Title="Elephants"
                  Icon="elephant.png"
                   />  
       <Setter Property="Shell.TabBarBackgroundColor"
        Value="#3498DB" />
       <Setter Property="Shell.TabBarTitleColor"
              Value="White" />
       <Setter Property="Shell.TabBarUnselectedColor"
              Value="#90EE90" />
    <Setter Property="Shell.BackgroundColor" 
            Value="#455A64" />
    <Setter Property="Shell.ForegroundColor" 
            Value="White" />
所以BaseStyle是这样的:

      <Style x:Key="BaseStyle" 
           TargetType="Element">
        <Setter Property="Shell.TitleColor" 
                Value="Red" />
        <Setter Property="Shell.DisabledColor" 
                Value="#B4FFFFFF" />
        <Setter Property="Shell.UnselectedColor" 
                Value="Green" />
       <Setter Property="Shell.TabBarBackgroundColor"
        Value="#3498DB" />
       <Setter Property="Shell.TabBarTitleColor"
              Value="White" />
       <Setter Property="Shell.TabBarUnselectedColor"
              Value="#90EE90" />
     </Style>

好的,当我为我想要的Shell项目设置样式时,它也会改变整个Shell stlye,即,顶部保存汉堡菜单的条的背景/前景颜色。我会在上面贴一张带有代码的图片。你的回答帮我完成了50%的任务。我已经更新了问题,以显示我仍在尝试如何设置的项目。Jessie Zhang是的,我已经有了该部分。我想知道如何在选项卡栏中更改选定和未选定项目的FontSize、FontAttributes和TextEditions。从Shell.cs的源代码中,我们找不到FontSize、FontAttributes和TextEditions的相关属性。