Over lapping shell Header and Shellcontent in MAUI .net 8.0

Question

I have

Below is my code

<Shell
x:Class="inSisMobileApp.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:inSisMobileApp.Views"
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
x:Name="myshell"
Shell.FlyoutBehavior="Flyout">
<Shell.FlyoutHeader >
    <StackLayout x:Name="LoginUserDetails" Padding="15,5,0,5" >
                    <StackLayout Spacing="5" >
                    <StackLayout.GestureRecognizers>
                        <TapGestureRecognizer Tapped="Profile_Cliked" />
                    </StackLayout.GestureRecognizers>
                    <Image x:Name="Fly_img" Source="ic_user" HeightRequest="100" WidthRequest="100" HorizontalOptions="Start" VerticalOptions="Center" ></Image>
                        <Label x:Name="Fly_Name"></Label>
                        <Label Text="Email" x:Name="Fly_Emil"></Label>
                    </StackLayout>
                </StackLayout>
</Shell.FlyoutHeader>

<Shell.FlyoutContent>
    <StackLayout BackgroundColor="{AppThemeBinding Light={StaticResource inSisBackgroundLight}}" Margin="0,5">
        <ListView x:Name="MenuItemsListView"  ItemsSource="{Binding MenuItems}" ItemTapped="MenuItemTapped" Margin="0,5" VerticalScrollBarVisibility="Never" SeparatorVisibility="Default">
            
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="15,10" HorizontalOptions="FillAndExpand">
                            <Label VerticalOptions="FillAndExpand" VerticalTextAlignment="Center" Text="{Binding Title}" TextColor="{AppThemeBinding Dark=White,Light=Black}" FontSize="18"/>                               
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </StackLayout>
</Shell.FlyoutContent>
<Shell.FlyoutFooter>
    <StackLayout HeightRequest="80">
        <telerik:RadButton  Text="Sign Out" Margin="10" x:Name="SignOut" Clicked="SignOut_Clicked" />
        <Label Text="version 1.6.0.6" HorizontalOptions="Center"></Label>
    </StackLayout>
</Shell.FlyoutFooter>

<ShellContent x:Name="Home" Shell.FlyoutItemIsVisible="False"
        ContentTemplate="{DataTemplate local:HomePageDetail}"
        Route="HomePageDetail" />   

It is overlapping. any mistake in my code?

Answer 1

You may try setting a HeightRequest on the StackLayout in FlyoutHeader, like below

<Shell.FlyoutHeader >
    <StackLayout x:Name="LoginUserDetails" Padding="15,5,0,5" HeightRequest="200">
          ......
    </StackLayout>
</Shell.FlyoutHeader>

Then they don't overlap.

For more info, you may refer to .NET MAUI Shell flyout