No background color on Flyout navigation bar

[vsfeedback]

This issue has been moved from a ticket on Developer Community.

---

I created a simple proyect with a flyout, using prism library too...

We put the code to color the navigation bar in red and yellow but no way to have it in Ios simulator... or android app... In android it appears in blue, and iphone in white...

How can we do it?

thanks

---

Original Comments

Feedback Bot on 11/6/2024, 05:52 PM:

We have directed your feedback to the appropriate engineering team for further evaluation. The team will review the feedback and notify you about the next steps.

[AngeloLazzari]

Here is the repro project... TestPrism.zip

[jfversluis]

Can you maybe explain a bit more about what you have tried and what you think it should do but doesn't work?

Looking at your code the only reference to doing this seems to be in MenuIniziale and it sets the background color of the page? So I'm not 100% sure if I understand what you mean :)

Also, it would really help if you could provide a reproduction project as a public GitHub repo next time, thanks!

[AngeloLazzari]

Hi, my aim is to put a color to the navigationbar background.

I set all the properties I think I need but in android it appears in blue and in IOS in white......

Here is a repro project https://github.com/AngeloLazzari/NavigationBarColorTest

thanks

[mattleibow]

I think you should be using the Shell.BackgroundColor:

• https://learn.microsoft.com/dotnet/maui/fundamentals/shell/pages?view=net-maui-8.0#set-page-colors
• https://dev.to/dotnet/exploring-colors-in-xamarin-forms-shell-16g3

[AngeloLazzari]

Hi, I don't use shell, I use FLyout page and prism navigation.

[mattleibow]

I am not sure I understand what should be having a color... Maybe attach a screenshot and circle/color the part you think should have color.

I see NavigationPage has a BarBackgroundColor... But not sure what should be colored as you don't have any navigation properties set, just the page background.

[AngeloLazzari]

Hello, as you can see, the same app built in Android looks like this

and the IOS one like this...

but I put the code BackgroundColor="Red" Background="Yellow" ... no the purple one showed...

`<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="TestPrism.Views.MenuIniziale" xmlns:prism="http://prismlibrary.com" prism:ViewModelLocator.AutowireViewModel="Automatic" Title="MenuIniziale" NavigationPage.HasNavigationBar="False" BackgroundColor="Red" Background="Yellow"

<FlyoutPage.Flyout>
    <ContentPage Title="Menu">
        <VerticalStackLayout>
            <Label 
        Text="Menu"
        VerticalOptions="Center" 
        HorizontalOptions="Center" />

            <Button Text="Pagina Iniziale" Command="{Binding ApriPaginaInizizale}" />
            <Button Text="Pagina 2" Command="{Binding ApriPagina2}" />
            <Button Text="Pagina 3" Command="{Binding ApriPagina3}" />

        </VerticalStackLayout>
    </ContentPage>
</FlyoutPage.Flyout>

`

thank you very much

[mattleibow]

The page background is just setting the background of the page, and not of the nav bar.

Now, how to set the nav bar, let me see if @PureWeen knows...

[mattleibow]

I think Prism is hiding the navigation page for you, but you can still get to it via a style:

    <FlyoutPage.Resources>
        <ResourceDictionary>
            <Style TargetType="NavigationPage" ApplyToDerivedTypes="True">
                <Setter Property="BarBackgroundColor" Value="Yellow" />
            </Style>
        </ResourceDictionary>
    </FlyoutPage.Resources>

[mattleibow]

Let me know if that helps.

[AngeloLazzari]

Yes, it worked like a charm!!!! thank you very much.

One more think, now I have to change the title, menu and icones that appear on the navigation bar, i tryed with TextColor, color, titleColor, but no way, can you help me a bit more?