Disabling click for ShellContent inside FlyoutItem in .net MAUI

Question

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>```

score 0 · Accepted Answer · answered Jun 11 '23 at 14:32

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.

Disabling click for ShellContent inside FlyoutItem in .net MAUI

1 Answers1