.NET MAUI: remove space for Flyout Icon-CodePudding

Using Flyouts in .NET MAUI, for each item there is a space next to it for the icon, but I don't want to use an icon. So how do I remove this space?

Here is the AppShell.xaml:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="TestApp.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:TestApp"
    Shell.FlyoutBehavior="{OnPlatform Android=Flyout, iOS=Flyout, MacCatalyst=Locked, Default=Locked}"
    Shell.FlyoutBackdrop="{AppThemeBinding Light=AliceBlue, Dark=DarkGray}"
    Shell.BackgroundColor="{AppThemeBinding Light=PaleTurquoise, Dark=#1f9e1c}"
    FlyoutBackgroundColor="{AppThemeBinding Dark=#0b1f0b}"
    Shell.FlyoutWidth="250">

    <FlyoutItem Title="Number 1">
        <ShellContent ContentTemplate="{DataTemplate local:Number1}" />
    </FlyoutItem>

    <FlyoutItem Title="Number2">
        <ShellContent ContentTemplate="{DataTemplate local:Number2}" />
    </FlyoutItem>

</Shell>

Here is an image.

CodePudding user response：

Customize the flyout template

Using grid

<Shell.ItemTemplate>
    <DataTemplate>
        <Grid Margin="10,5" ColumnDefinitions="*" RowSpacing="20">
            <Label Text="{Binding Title}" FontAttributes="Bold"
                       FontSize="Medium" VerticalTextAlignment="Center"/>
        </Grid>
    </DataTemplate>
</Shell.ItemTemplate>