How can I center the the flyout items of a Xamarin Shell application?

Question

I’d like to customize the look of the flyout of my Xamarin Shell application to vertically center its items. The Microsoft docs shows how to customize some aspects of the flyout itself, but these settings can’t manipulate its look so that I can rearrange how the items are displayed.

Without a flyout header, the items are stacked on top of the flyout, but I need to center them vertically in the middle of the flyout itself.

My ShellItemRenderer.cs is currently empty because I don’t understand what I need to do. I currently have these classes:

internal class CustomShellRenderer : ShellRenderer {
   public CustomShellRenderer(Context context) : base(context) { }

   protected override IShellTabLayoutAppearanceTracker CreateTabLayoutAppearanceTracker(ShellSection shellSection) {
      return new TabLayoutAppearanceTracker(this);                
   }

   protected override IShellItemRenderer CreateShellItemRenderer(ShellItem shellItem) {
      return new CustomShellItemRenderer(this);
   }
}

public class CustomShellItemRenderer :ShellItemRenderer {
   public CustomShellItemRenderer(IShellContext shellContext) : base(shellContext) { }
}

As you can see they are empty since I can’t figure out the needed modifications to make.

Answer 1

You can use Shell.ItemTemplate to customize the flyout items:

<Shell.ItemTemplate>
    <DataTemplate>
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="0.2*" />
                <ColumnDefinition Width="0.8*" />
            </Grid.ColumnDefinitions>
            <Image Source="{Binding Icon}"
                   Margin="5"
                   HeightRequest="45" />
            <Label Grid.Column="1"
                   Text="{Binding Title}"
                   FontAttributes="Italic"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center" /> 
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>

Here is the result:

You can also use Shell.MenuItemTemplate to customize the MenuItem appearance.