Xamarin 窗体 FlyoutMenu 文本颜色

Question

我目前正在研究 Xamarin Forms Shell 应用程序的样式方面，我目前无法找到如何更改 FlyoutMenu TextColor。

我尝试为 Label TextColor 添加一个样式，并使用 BasedOn 作为我正在使用的基本样式，但文本颜色仍然没有改变，或者它改变了所有标签的 TextColor。

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   x:Class="MainShellPage"
   xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"      
   NavigationPage.HasBackButton="False" 
   FlyoutBackgroundColor="{StaticResource Grey}"
   BackgroundColor="{StaticResource Grey}"
   IsBusy="{Binding IsBusy}"
   BindingContext="{Binding MainShell, Source={StaticResource ViewModelLocator}}"
   Navigated="MainShellPage_OnNavigated">
<Shell.Resources>
    <Style x:Key="BaseStyle"
           TargetType="Element">
        <Setter Property="Shell.BackgroundColor"
                Value="{StaticResource Grey}" />
        <Setter Property="Shell.ForegroundColor"
                Value="{StaticResource White}" />
        <Setter Property="Shell.TitleColor"
                Value="{StaticResource White}" />
        <Setter Property="Shell.DisabledColor"
                Value="#B4FFFFFF" />
        <Setter Property="Shell.UnselectedColor"
                Value="#95FFFFFF" />
    </Style>
</Shell.Resources>
<Shell.FlyoutHeaderTemplate>
    <DataTemplate>
        <StackLayout BackgroundColor="{StaticResource Grey}" HeightRequest="180"
                     Orientation="Vertical">
            <Image Source="mobile_logo" HorizontalOptions="Center" VerticalOptions="Start"
                   WidthRequest="160"/>
            <Label Text="{Binding TeamName}" TextColor="{StaticResource White}" FontAttributes="Bold"
                   HorizontalOptions="Center" />
            <Label Text="{Binding UserFullName}" TextColor="{StaticResource White}"
                   HorizontalOptions="Center" />
            <Label Text="{Binding UserEmail}" TextColor="{StaticResource White}"
                   HorizontalOptions="Center" />
            <Label Text="{Binding Version}" TextColor="{StaticResource White}" VerticalOptions="End"
                   HorizontalOptions="End" Margin="0, 10, 0, 0" FontSize="10" />
        </StackLayout>
    </DataTemplate>
</Shell.FlyoutHeaderTemplate>

<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
    <Tab Title="TabOne" Style="{StaticResource BaseStyle}"
         Route="tabone">
        <Tab.Icon>
            <FontImageSource
                Glyph="{Binding TabOneGlyph, Source={StaticResource MainShellGlyphHelper}}"
                FontFamily="{StaticResource FontAwesome}" Color="{StaticResource White}" />
        </Tab.Icon>
        <ShellContent Title="TabOne"  ContentTemplate="{DataTemplate pages:TabOnePage}" />
    </Tab>
    <Tab Title="TabTwo" Style="{StaticResource BaseStyle}"
         Route="tabtwo">
        <Tab.Icon>
            <FontImageSource
                Glyph="{Binding TabTwoGlyph, Source={StaticResource MainShellGlyphHelper}}"
                FontFamily="{StaticResource FontAwesome}" Color="{StaticResource White}" />
        </Tab.Icon>
        <ShellContent ContentTemplate="{DataTemplate pages:TabTwoPage}" />
    </Tab>        
</FlyoutItem>


<MenuItem />
<MenuItem />
<MenuItem />
<MenuItem
    Text="MenuItemOne"
    Command="{Binding MenuItemOneCommand}">
    <MenuItem.IconImageSource>
        <FontImageSource Glyph="{Binding MenuItemOneGlyph, Source={StaticResource MainShellGlyphHelper}}"
                         FontFamily="{StaticResource FontAwesome}" Color="{StaticResource White}" />
    </MenuItem.IconImageSource>
</MenuItem> 

Answer 1

还有另一种方法，您可以像设置标题一样将 ItemTemplate 设置为弹出窗口，然后您可以为文本设置颜色：

<Shell.ItemTemplate>
    <DataTemplate>
        <Grid Grid.Row="0">
                <Grid.ColumnDefinitions>
                    <!-- Icon -->
                    <ColumnDefinition Width="*"/>
                    <!-- Title-->
                    <ColumnDefinition Width="2*"/>
                </Grid.ColumnDefinitions>
                <!-- Icon -->
                 <Label  Grid.Column="0"
                         Margin="20,0,0,0"
                         VerticalOptions="Center"
                         HorizontalTextAlignment="Center"
                         HorizontalOptions="Center"
                         Text="{Binding Icon}" 
                         FontFamily="{StaticResource FontAwesome}" 
                         FontSize="26"
                         TextColor="{StaticResource White}"/>
                <!-- Label -->
                <Label Grid.Column="1" 
                       Text="{Binding Title}" 
                       FontSize="23" 
                       VerticalOptions="Center"
                       VerticalTextAlignment="Center"
                       TextColor="[ Here you can insert the colour you want]"
                       HorizontalOptions="Start"  />
            </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

然后，使用它：

<FlyoutItem Title="TabOne"
            Icon="{Binding TabOneGlyph, Source={StaticResource 
                   MainShellGlyphHelper}}">
    <ShellContent ContentTemplate="{DataTemplate pages:TabOnePage}"/>
</FlyoutItem>

当我确定 Shell 时，我在我的大部分项目中都在使用这种技术。

这是我做的一个项目的例子：https://github.com/bricefriha/AresGaming/blob/master/AresNews/AresNews/AppShell.xaml

希望对你有帮助?

Answer 2

我目前无法找到如何更改 FlyoutMenu TextColor。

从this document 开始，Shell 包括三个样式类，它们会自动应用于FlyoutItem 和MenuItem 对象。样式类名称为FlyoutItemLabelStyle、FlyoutItemImageStyle 和FlyoutItemLayoutStyle。

如果你想改变 FlyoutMenu 文本颜色，你可以创建新的样式并使用 FlyoutItemLabelStyle 来改变 FlyoutMenu 文本颜色。

  <Style Class="FlyoutItemLabelStyle" TargetType="Label">
            <Setter Property="TextColor" Value="Red" />
        </Style>

从Flyout Items document 开始，每个 ShellContent 对象只能通过弹出项访问，不能通过选项卡访问。这是因为默认情况下，只有在弹出项包含多个选项卡时才会显示选项卡。

所以你需要在 FlyoutItem 中添加 Tab 才能显示 FlyoutMenu。

<FlyoutItem Title="About" Icon="icon_about.png">
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate local:AboutPage}" Route="AboutPage" />
    </Tab>
</FlyoutItem>
<FlyoutItem Title="Browse" Icon="icon_feed.png">
    <Tab>
        <ShellContent ContentTemplate="{DataTemplate local:ItemsPage}" Route="ItemsPage" />
    </Tab>
</FlyoutItem>