How to change flyout background color in Xamarin Forms Shell?

6
votes

Using Xamarin Forms Shell, I am trying to change the color of the background behind the Shell and Menu Items as can be seen in this tutorial image:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell-images/flyout-annotated.png

I can change the color behind individual items via templates, but the empty space below and the gap between Header and Items remains white. Is there a way to change this?

1
xamarin.forms

1 Answers

13
votes

There is a property called FlyoutBackgroundColor of shell for you to set background of flyout.

In TheShell.xaml:

<Shell x:Name="theShell"
  x:Class="TailwindTraders.Mobile.Features.Shell.TheShell"
  xmlns="http://xamarin.com/schemas/2014/forms"
  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  xmlns:home="clr-namespace:TailwindTraders.Mobile.Features.Home"
  xmlns:local="clr-namespace:TailwindTraders.Mobile.Features.Shell"
  xmlns:productcategory="clr-namespace:TailwindTraders.Mobile.Features.Product.Category"
  Title="Tailwind Traders"
  Route="tailwindtraders"
  RouteHost="www.microsoft.com"
  RouteScheme="http"

  FlyoutBackgroundColor="Red"

>