Why don’t separators show in the flyout when using a ShellSection in Xamarin.Forms Shell?

Question

In my Xamarin.Forms Shell application, I define the flyout items in the AppShell.xaml.cs file and not in the AppShell.xaml one since I need to define them programmatically. Here, I read I can use the FlyoutDisplayOptions.AsMultipleItems value to get separators. So, I don’t understand why Xamarin doesn’t show separators when I use the ShellSection elements and set their FlyoutDisplayOptions as FlyoutDisplayOptions.AsMultipleItems. The code through which I define the flyout items is the following:

var nli = new FlyoutItem   { FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems };
var nc  = new ShellSection { FlyoutDisplayOptions = FlyoutDisplayOptions.AsMultipleItems };

foreach (var kind in kinds) { // "kinds" is retrieved from a service
   var csc = new ShellContent { /* ... */ };
   nc.Items.Add(csc);
}

nli.Items.Add(nc);
ShellItems.Items.Add(nli);

The red area is the one populated by the foreach statement. The FlyoutItem and ShellSection parents have the FlyoutDisplayOptions correctly set, but the separators are not shown between the ShellContent elements. Why?

Answer 1

To add a separator between FlyoutItems or MenuItems, you can add a MenuItem with a DataTemplate as below:

<MenuItem>
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <Label HeightRequest="1" BackgroundColor="LightGray"></Label>
        </DataTemplate>
    </Shell.MenuItemTemplate>
</MenuItem>

You can perhaps convert this into code-behind. Here is how it looks:

Answer 2

It should be a default phenomenon in shell, there is no separators between the items in FlyoutItem.

You could have a look at the official document: