1

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.

enter image description here

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.

Pine Code
  • 2,466
  • 3
  • 18
  • 43

1 Answers1

2

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:

enter image description here

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

nevermore
  • 15,432
  • 1
  • 12
  • 30
  • This method is for styling the items: I need to customize the flyout itself. – Pine Code Dec 11 '20 at 08:46
  • 1
    What do you mean `customize the flyout itself`? Can you please to add a picture to make it clear? You can customize the flyout in the ItemTemplate and add element there which you want. – nevermore Dec 11 '20 at 08:52
  • @Pine Code wants to center the flyout items vertically, not horizontally: "I need to center them vertically in the middle of the flyout itself." – netadictos Jan 10 '21 at 18:39
  • @JackHua-MSFT yes, vertically. – Pine Code Jan 10 '21 at 19:38