question

PatrickRyder avatar image
2 Votes"
PatrickRyder asked AlexeyGr-1797 edited

How Do I Set Shell Background Colour in Code?

I am just beginning to switch my application over to use Shell navigation. I prefer to do everything in C# and avoid XAML.

As an experiment, I have just attempted to set the background colour for the Shell in the application constructor but the code doesn't seem to do anything.

 public partial class App : Application
 {
     public App()
     {
         InitializeComponent();
         Shell appShell = new AppShell();
         appShell.BackgroundColor = Color.Red;
         MainPage = appShell; 
     }
 }

Does anyone know why this doesn't work?

I know this is a trivial example but I am hoping the answer to this will allow me to see the 'way in' for applying shell styles in code, so any help would be fantastic.

  • Patrick



dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

JarvanZhang-MSFT avatar image
2 Votes"
JarvanZhang-MSFT answered PatrickRyder commented

Hello,​

Welcome to our Microsoft Q&A platform!

Xamarin.Forms.Shell redefine the BackgroundColorProperty property. It's usage seems to be different with the property of VisualElement. Shell provides Shell.SetBackgroundColor method to set the backgroud color. Please remember to remove the line code if you've set a value for Shell.BackgroundColo property in AppShell.xaml.

public partial class App : Application
{
    public App()
    {
        InitializeComponent();

        AppShell appShell = new AppShell();
        Shell.SetBackgroundColor(appShell, Color.Red);
        MainPage = appShell;
    }
}

Check the links:
https://github.com/xamarin/Xamarin.Forms/blob/d7d5e01a7435f2fd055485959df8708c03911f67/Xamarin.Forms.Core/Shell/Shell.cs#L132
https://github.com/xamarin/Xamarin.Forms/blob/d7d5e01a7435f2fd055485959df8708c03911f67/Xamarin.Forms.Core/Shell/Shell.cs#L185

Best Regards,

Jarvan Zhang


If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.


· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

@JarvanZhang-MSFT

Sorry - I had managed to solve this already (see below) but forgot to hit the 'Submit' button on my answer.

Thank you for your help, though.

-Kind wishes - Patrick

0 Votes 0 ·
PatrickRyder avatar image
1 Vote"
PatrickRyder answered

I think the problem was that my XAML was fighting my code. Now that I have deleted the XAML file and applied a style to the shell in code, the background colour works as expected, like this:

 public App()
 {
     Style shellStyle = new Style( typeof(Shell) )
     {
         Setters = { new Setter { Property = Shell.BackgroundColorProperty, Value = Color.Orange } }
     };
    
     InitializeComponent();
     Shell appShell = new AppShell();
     appShell.Style = shellStyle;
     MainPage = appShell; 
 }





5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

AlexeyGr-1797 avatar image
0 Votes"
AlexeyGr-1797 answered AlexeyGr-1797 edited

My (the most convenient for me, maybe it will be useful for you too):

 Shell.SetBackgroundColor(Shell.Current, Color.FromHex("#BA68C8"));
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.