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