CODEWITHSUNDEEP
windowsmaui
mimei
mimei

Reputation: 11

.NET MAUI, Flyout Menu is overlapping the Windows title bar

I have a .NET 8 MAUI Application (mainly for Windows and Mac) where the FlyoutBehavior is in locked mode. Unfortunately the flyout is overlapping everything, even the title bar (the one with the symbols for minimize, maximize and close) of the application.

I attached an example with multiple colors that you can see what I mean. I would like that the green area on top is just the title bar, not the Flyout Background Color like it is now Screenshot Windows

on Mac this works fine -> Screenshot Mac

AppShell.xaml:

<Shell x:Class="UPclient.AppShell"
   xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:local="clr-namespace:UPclient"
   Shell.FlyoutBehavior="Locked"
   Shell.FlyoutBackgroundColor="Green"
          
   >
<!--Shell.FlyoutBackgroundColor="#203864"-->
<Shell.FlyoutHeader>
    <ContentView 
                 HeightRequest="200">
        <Grid BackgroundColor="Black">
            <Image Aspect="AspectFill"
                   Source="store.jpg"
                   Opacity="0.6" />
            <Label Text="Header"
                   TextColor="White"
                   FontAttributes="Bold"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center" />
        </Grid>
    </ContentView>
</Shell.FlyoutHeader>

<Shell.FlyoutFooter>
    <ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:sys="clr-namespace:System;assembly=System.Runtime">
        <StackLayout>
            <Label Text="Footer"
                   TextColor="Black"
                   FontAttributes="Bold"
                   HorizontalOptions="Center" />
           
        </StackLayout>
    </ContentView>
</Shell.FlyoutFooter>

<Shell.TitleView>
    <Label Text="Title"
           TextColor="White"
           VerticalTextAlignment="Center"
           VerticalOptions="Center"
           HorizontalOptions="Start"
           Padding="5,0,0,0"
           HeightRequest="50"               
           FontSize="Small" />
</Shell.TitleView>


<ShellContent Title="......

Is there anything I can do against it? I cannot find any clue.

Thanks Michael

I mainly tried this: https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout?view=net-maui-8.0 I was able to set all the colors, but I did not find any overlapping settings.

Upvotes: 1

Views: 497

Answers (1)

AlexVDV116
AlexVDV116

Reputation: 1

I had the same problem in my MAUI app and after some debugging I got it to work. The problem with my app was that I programmatically set the App theme which messed up the rendering of the flyout and caused the overlapping.

I created a bug issue on the Maui Github page with a reproduction repository in order to get it fixed. https://github.com/dotnet/maui/issues/22672

Upvotes: 0

Related Questions