.netxamarinmaui.net-maui.shell

Disabling click for ShellContent inside FlyoutItem in .net MAUI


I have a problem, I can't disable click for ShellContent inside FlyoutItem. More specifically I put a lot of ShellContent inside FlyoutItem and chose to display it as multiple items.

    <FlyoutItem Title="Title" FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="馃攣      小ontinuous" ContentTemplate="{DataTemplate views:MainPage}" IsEnabled="True"/>
        <ShellContent Title="馃敂      Jingle Bells" ContentTemplate="{DataTemplate views:JingleBellsPage}" />
        <ShellContent Title="馃挀      Heartbeat " ContentTemplate="{DataTemplate views:heartbeatPage}" />
        <ShellContent Title="鉂わ笍      Love" ContentTemplate="{DataTemplate views:LovePage}" IsEnabled="False"/>
    </FlyoutItem>

My FlyoutItem

I'm trying to disable clickability for ShellContent that is inside FlyoutItem with IsEnable="false" as shown in the code above, but when I click, it still goes to the page. It shouldn't go to the page. If I do it like this, it will work, but there will be an annoying animation.

Working variant

How do I do this for my FlyoutItem with many ShellContent's?

<FlyoutItem Title="Main Page">
        <Tab IsEnabled="False">
            <ShellContent ContentTemplate="{DataTemplate views:MainPage}"></ShellContent>
        </Tab>
    </FlyoutItem>

    <FlyoutItem Title="Disco Page" IsEnabled="False">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate views:DiscoPage}"></ShellContent>
        </Tab>
    </FlyoutItem>

    <FlyoutItem Title="Love Page">
        <Tab>
            <ShellContent ContentTemplate="{DataTemplate views:LovePage}"></ShellContent>
        </Tab>
    </FlyoutItem>```

Solution

  • Yes, set IsEnable for ShellContent is useless. So you could intercept the navigate event in code behind. Consider the following way:

    First, give a route for each shellContent,

    <FlyoutItem Title="Title" FlyoutDisplayOptions="AsMultipleItems">
        <ShellContent Title="馃攣      小ontinuous"    Route="小ontinuous" ContentTemplate="{DataTemplate local:MainPage}" IsEnabled="True"/>
        <ShellContent Title="馃敂      Jingle Bells"  Route="Jingle Bells"   ContentTemplate="{DataTemplate local:JingleBellsPage}" />
        <ShellContent Title="馃挀      Heartbeat "    Route="Heartbeat"  ContentTemplate="{DataTemplate local:heartbeatPage}" />
        <ShellContent Title="鉂わ笍      Love"          Route="Love"  ContentTemplate="{DataTemplate local:LovePage}" IsEnabled="False"/>
    
    </FlyoutItem>
    

    Then in AppShell.cs

    protected override void OnNavigating(ShellNavigatingEventArgs args)
    {
        base.OnNavigating(args);
        
        //If the route is "Heartbeat", then won't navigate
        if (args.Target.Location.OriginalString.Contains("Heartbeat"))
        {
            this.FlyoutBehavior = FlyoutBehavior.Locked; // this can let the flyout stay there after click the ShellContent
            args.Cancel();
            this.FlyoutBehavior = FlyoutBehavior.Flyout;
        }
    }
    

    Hope it works.