CODEWITHSUNDEEP
.netxamlmaui
Damian Ubowski
Damian Ubowski

Reputation: 407

.NET MAUI flyout as a regular sidebar

By default .NET MAUI shows its flyout as a hamburger menu. Is there a way to show it as a regular sidebar that is always open and doesn't overlap the content?

Upvotes: 2

Views: 4083

Answers (3)

Bas H
Bas H

Reputation: 2216

@Slapout answer is wright , see the docs

https://learn.microsoft.com/en-us/dotnet/maui/fundamentals/shell/flyout#flyout-behavior

Locked – indicates that the flyout can't be closed by the user, and that it doesn't overlap content.

Set it in your AppShell.xaml

  Shell.FlyoutBehavior="Locked"

Upvotes: 1

Guangyu Bai - MSFT
Guangyu Bai - MSFT

Reputation: 4486

You can put the following code into your AppShell.xaml and it will work.

<Shell.Resources>
        <ResourceDictionary>
            <Style x:Key="BaseStyle" TargetType="Element">   
                <Setter Property="Shell.FlyoutBehavior" Value="Locked"></Setter>
                <Setter Property="Shell.FlyoutWidth" Value="55"></Setter>              
            </Style>

            <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
            <Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />
            
        </ResourceDictionary>
</Shell.Resources>

Here is the sample:

enter image description here

Upvotes: 1

Slapout
Slapout

Reputation: 3809

On Windows you can say

Shell.FlyoutBehavior="Locked"

I don't know what that does on mobile, though.

Upvotes: 5

Related Questions