Xamarin Forms FlyoutMenu Text Colour

1
votes

I am currently going through the style aspects of a Xamarin Forms Shell Application, I am currently not able to find how to change the FlyoutMenu TextColor.

I have tried adding a style for Label TextColor with the BasedOn being the Base Style I am using, but the text colour still does not change, or it changes all label's 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>
2
xamarin.formsstylesxamarin.forms.shell

2 Answers

2
votes

I am currently not able to find how to change the FlyoutMenu TextColor.

From this document, Shell includes three style classes, which are automatically applied to FlyoutItem and MenuItem objects. The style class names are FlyoutItemLabelStyle, FlyoutItemImageStyle, and FlyoutItemLayoutStyle.

If you want to change FlyoutMenu Text color, you can create new style and use FlyoutItemLabelStyle to change FlyoutMenu text color.

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

From Flyout Items document, each ShellContent object can only be accessed through flyout items, and not through tabs. This is because by default, tabs will only be displayed if the flyout item contains more than one tab.

So you need to add Tab in FlyoutItem if you want o display 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>

enter image description here

0
votes

There is another way of doing it, you can set an ItemTemplate to your flyout as you did for the header, then you can set a colour for the text:

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

And then, to use it:

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

I am doing this technique in most of my project when I sure Shell.

Here's an example of a project I did: https://github.com/bricefriha/AresGaming/blob/master/AresNews/AresNews/AppShell.xaml

I hope this helped you 😉