Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change flyout background color in Xamarin Forms Shell?

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?

like image 866
G.E. Avatar asked Apr 19 '19 00:04

G.E.


People also ask

What is flyout page in xamarin forms?

A flyout page typically displays a list of items, as shown in the following screenshots: The location of the list of items is identical on each platform, and selecting one of the items will navigate to the corresponding detail page.

What is a flyout item?

A flyout is the optional root menu for a Shell application, and is fully customizable. It's accessible through an icon or by swiping from the side of the screen.

What is Shell in xamarin forms?

Xamarin. Forms Shell reduces the complexity of mobile application development by providing the fundamental features that most mobile applications require, including: A single place to describe the visual hierarchy of an application. A common navigation user experience.


1 Answers

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"

>
like image 107
nevermore Avatar answered Jan 02 '23 19:01

nevermore