How Do I Set Shell Background Colour in Code?

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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

Shell.SetBackgroundColor(Shell.Current, Color.FromHex("#BA68C8"));