maui
maui copied to clipboard
dotnet
[regression/8.0.0-preview.3.8149] Header in flyout menu makes first menu item not clickable on IOS
Description
When you have a shell flyout menu and have no Shell.FlyoutHeader then all the menu items work correctly on both ios and android.
If you add a Shell.FlyoutHeader to the flyout menu then the first flyoutmenu item on IOS is not clickable (android works fine). NOTE: If you remove the Shell.FlyoutHeader then it works fine.
In the example shell.xaml below the first flyoutmenu item named 'Clicking Me Doesnt Work' wont work on IOS.
<Shell
x:Class="DEMO.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:pages="clr-namespace:DEMO.Pages"
Shell.FlyoutBehavior="Flyout">
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{StaticResource Primary}" />
<Setter Property="Shell.ForegroundColor" Value="White" />
<Setter Property="Shell.TitleColor" Value="White" />
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
<Setter Property="Shell.UnselectedColor" Value="{AppThemeBinding Dark=#95FFFFFF, Light=#95000000}" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{AppThemeBinding Dark={StaticResource DarkBackground}, Light={StaticResource LightBackground}}" />
<Setter Property="Shell.TabBarForegroundColor" Value="{AppThemeBinding Dark={StaticResource LightBackground}, Light={StaticResource DarkBackground}}" />
<Setter Property="Shell.TabBarUnselectedColor" Value="{AppThemeBinding Dark=#95FFFFFF, Light=#95000000}" />
<Setter Property="Shell.TabBarTitleColor" Value="{AppThemeBinding Dark={StaticResource LightBackground}, Light={StaticResource DarkBackground}}" />
</Style>
<Style BasedOn="{StaticResource BaseStyle}" TargetType="ShellItem" ApplyToDerivedTypes="True" />
</ResourceDictionary>
</Shell.Resources>
<Shell.FlyoutHeader>
<Grid HorizontalOptions="Fill" VerticalOptions="Start" HeightRequest="250" InputTransparent="True">
<Image InputTransparent="True"
Aspect="AspectFill"
Source="demoperson.jpg"/>
<Grid RowDefinitions="40"
ColumnDefinitions="*"
RowSpacing="8"
HorizontalOptions="Fill"
VerticalOptions="FillAndExpand"
Padding="15"
>
<VerticalStackLayout Grid.Row="0">
<Label Text="Demo" FontSize="60" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" TextColor="White"></Label>
<Label Text="Adding life to people" FontSize="20" FontAttributes="Bold" VerticalOptions="Center" HorizontalOptions="FillAndExpand" HorizontalTextAlignment="Center" TextColor="White"></Label>
</VerticalStackLayout>
</Grid>
</Grid>
</Shell.FlyoutHeader>
<FlyoutItem Title="Clicking Me Doesnt Work"
FlyoutIcon="{StaticResource IconBluetoothLE}">
<ShellContent ContentTemplate="{DataTemplate pages:HomePage}"
Route="HomePage" >
</ShellContent>
</FlyoutItem>
<FlyoutItem Title="Session"
FlyoutIcon="{StaticResource IconHeartRate}">
<ShellContent ContentTemplate="{DataTemplate pages:HeartRatePage}"
Route="HeartRatePage">
</ShellContent>
</FlyoutItem>
<FlyoutItem Title="User Management"
FlyoutIcon="{StaticResource IconUser}">
<ShellContent ContentTemplate="{DataTemplate pages:EndUserList}"
Route="EndUserList" >
</ShellContent>
</FlyoutItem>
<FlyoutItem Title="Settings"
FlyoutIcon="{StaticResource IconGears}">
<ShellContent ContentTemplate="{DataTemplate pages:SettingsPage}"
Route="SettingsPage">
</ShellContent>
</FlyoutItem>
<Shell.FlyoutFooter>
<VerticalStackLayout>
<Label Text="© DEMO 2023" FontSize="Small" VerticalOptions="Center" HorizontalOptions="Center" HorizontalTextAlignment="Center" TextColor="Black"></Label>
</VerticalStackLayout>
</Shell.FlyoutFooter>
</Shell>
Steps to Reproduce
- create new maui app
- use the Appshell.xaml from above to simulate issue)
- Run the app and on IOS the first menu item is not clickable
Link to public reproduction project repository
No response
Version with bug
Is this a regression from previous behavior?
Yes, this used to work in .NET MAUI
Last version that worked well
Affected platforms
iOS
Affected platform versions
16.6
Did you find any workaround?
https://github.com/dotnet/maui/issues/17965#issuecomment-1763354239
Relevant log output
No response
Is this something that worked in 7.0 and is failing since updating to 8.0? Thanks!
Hi @michaelonz. We have added the "s/needs-info" label to this issue, which indicates that we have an open question for you before we can take further action. This issue will be closed automatically in 7 days if we do not hear back from you by then - please feel free to re-open it if you come back to this issue after that time.
Can confirm that this is an issue in .Net 8 and not .Net 7. Will update if I find any causes/workarounds.
I just tested every .Net 8 preview until I found one with a different behavior...
In 8.0.0-preview.1.7762 and 8.0.0-preview.2.7871 there was a spacing issue between the header and the flyout menu items (ref #11679). There was a large gap between the header and the items but the items were all able to be interacted with. That visual spacing issue was fixed by PureWeen in #12480 and merged into 8.0.0-preview.3.8149.
Since 8.0.0-preview.3.8149 this issue has existed where the items are placed properly but the area that we can tap/interact with still seems to be blocked. I am not sure if related to #12480 but I think it's likely. Furthermore, It's not always the first item that can't be tapped, it can be the first and second based on device screen size and item size.
Thanks @JCSNIDER for narrowing it down - will this be resolved in the next release?
I'm not part of the team myself, and although I hope this is fixed in the next release I am proceeding as if it won't be and looking to work around it. Provided that this has been an issue for many months and not more popular I feel like it's due to something we are doing differently from the majority of users.
If I find any more info or workarounds I'll continue to update here. I'm also going to tag #17432 because I think these issues are related or the same.
Not sure if it helps but my Flyout header is very similar to yours with a grid that has a static height request with a background image? and a stack layout inside...
<Shell.FlyoutHeader>
<Grid
x:Name="FlyoutHeaderGrid"
BackgroundColor="Black"
HeightRequest="200">
<Image
x:Name="FlyoutHeaderImage"
Aspect="AspectFill"
Opacity="1" />
<VerticalStackLayout
Margin="0,-20,0,0"
HeightRequest="120"
HorizontalOptions="Center"
VerticalOptions="Center"
WidthRequest="120">
<Frame
x:Name="ProfileBackground"
Padding="0"
BackgroundColor="DarkGray"
CornerRadius="60"
HasShadow="False"
HeightRequest="120"
IsClippedToBounds="True"
WidthRequest="120">
<Image
x:Name="ProfilePicture"
HorizontalOptions="Center"
VerticalOptions="Center">
<Image.Source>
<FontImageSource
FontAutoScalingEnabled="False"
FontFamily="Font Awesome v6.3.0 Solid"
Glyph=""
Size="75"
Color="White" />
</Image.Source>
</Image>
</Frame>
</VerticalStackLayout>
<Label
x:Name="NameLabel"
Margin="0,150,0,0"
FontAttributes="Bold"
FontAutoScalingEnabled="False"
FontSize="22"
HorizontalTextAlignment="Center"
Text="Not Signed In"
TextColor="White"
VerticalTextAlignment="Center" />
</Grid>
</Shell.FlyoutHeader>
Hi @jcsnider , the only work around I’ve found was to have no menu items and then create the menu items using buttons and images in the header - so it looks the same but there is effectively no menu items.
This however is a terrible work around but if anyone is desperate to work around it then it does work - but means menus are unusable with a header right now in Maui 8
@michaelonz -- I love it.. so simplistic and elegant. No idea why I didn't think of that. I'm gonna mess with this for another hour or so and then I'll fallback to that. Thanks.
Edit: I did find that if you give your <Grid> element inside the header a Margin property value it will ruin the rendering of your header but the menu items will display in the correct spots and work -_-
So another option.. is to add a margin property to the top level view inside the header (in our case the grid) and also set a minimumheightrequest property that is a bit bigger than the heightrequest property on ios.
I added the following in my AppShell constructor.
//TODO - Remove when https://github.com/dotnet/maui/issues/17965 is fixed
#if IOS
FlyoutHeaderGrid.Margin = new Thickness(0, 0, 0, 0);
FlyoutHeaderGrid.MinimumHeightRequest = FlyoutHeaderGrid.HeightRequest + 56;
#endif
The above makes my flyout work nearly perfectly. Afterwards the only issue the white horizontal bar above my header.. maybe a ios safe area thing? Either way I can live with it until a proper fix is released. Tested and working on an iPhone 8 simulator and a iPhone 14 Pro Max (very different sizes).
@jcsnider - I will give this a try tomorrow also and report back my findings …..:)
HI @jcsnider - Good work - that has resolved my issue also so it appears the issue is related to either one or both of the properties you have provided.
Maui Team still need to resolve it as its a tough one to narrow down - but that gets us past it for now (although i would like to try it on ipad etc etc)
I just tested every .Net 8 preview until I found one with a different behavior...
In 8.0.0-preview.1.7762 and 8.0.0-preview.2.7871 there was a spacing issue between the header and the flyout menu items (ref #11679). There was a large gap between the header and the items but the items were all able to be interacted with. That visual spacing issue was fixed by PureWeen in #12480 and merged into 8.0.0-preview.3.8149.
Since 8.0.0-preview.3.8149 this issue has existed where the items are placed properly but the area that we can tap/interact with still seems to be blocked. I am not sure if related to #12480 but I think it's likely. Furthermore, It's not always the first item that can't be tapped, it can be the first and second based on device screen size and item size.
You're awesome!! Thank you so much for doing this research. We'll get started on the fix and plan to have it ready by GA or SR1, depending on the risk of the change.
Probably here in the comments, but looking closer and making item heights all different sizes I see that the first item is partially clickable if it is larger that the safe area height.
I am doing a test here and I have this xaml:
<Shell
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Maui.Controls.Sample.SandboxShell"
xmlns:local="clr-namespace:Maui.Controls.Sample"
x:Name="shell"
Shell.FlyoutBehavior="Flyout">
<Shell.FlyoutHeader>
<Grid HeightRequest="250" Background="Pink">
<Button HorizontalOptions="Fill" VerticalOptions="Fill" Background="Orange" />
</Grid>
</Shell.FlyoutHeader>
<Shell.ItemTemplate>
<DataTemplate>
<Grid HeightRequest="100" Background="LightBlue">
<Label Text="{Binding Title}" VerticalTextAlignment="Center" />
</Grid>
</DataTemplate>
</Shell.ItemTemplate>
<FlyoutItem Title="Clicking Me Doesnt Work" FlyoutIcon="appicon.png">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="HomePage" />
</FlyoutItem>
<FlyoutItem Title="Session" FlyoutIcon="appicon.png">
<ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="SessionPage" />
</FlyoutItem>
</Shell>
I set the background color of ShellFlyoutHeaderContainer to green. My header is pink with an orange button. I have 2 pages.
| Portrait | Landscape |
|---|---|
I had a look and I see a fair bit of code in the ShellFlyoutHeaderContainer that is doing safe area things. I also see the ctor has a bad line where it use Left for Bottom:
return new Thickness(
safeArea.Left,
safeArea.Top,
safeArea.Right,
safeArea.Left);
But changing that makes it stay wrong, just with different insets. So I deleted everything in there:
internal class ShellFlyoutHeaderContainer : UIContainerView
{
public ShellFlyoutHeaderContainer(View view) : base(view)
{
BackgroundColor = UIColor.Green;
}
public override Thickness Margin => View.Margin;
}
| Portrait | Landscape |
|---|---|
Is this related to the reason the flyout seems to no longer be able to render up into the safe area on iOS since .NET 8? .NET 7 was fine.
I'm on .NET 8 GA and having this issue. On a larger Plus size screen it works OK, but on a smaller Pro screen the issue persists.
The workaround provided by @jcsnider did not work for me. It seems that the first item is not tappable regardless, so my workaround is to add a dummy item at the top of the list:
<ShellContent Title="-" Route="topGoesNowhere" ContentTemplate="{DataTemplate local:HomePage}" IsVisible="{OnPlatform iOS=true, Android=false}" > </ShellContent>
With this I can now tap the top item.
EDIT: Since this issue is not affecting all of my iOS devices, it has caused an issue for those that CAN tap the first item. Will have to workaround this as well by redirecting to the correct route.
EDIT 2: Workaround for issue with iOS device that IS tappable on the first item, is to listen for route topGoesNowhere in OnNavigating and executing e.Cancel().
I'm experiencing this issue also:
https://github.com/biozal/dotnet-cblite-inventory/blob/main/src/Dotnet.Cblite.Inventory.Maui/AppShell.xaml
iOS Specifically the first menu item isn't clickable. This is on an iPhone 13 Mini simulator specifically.
I just confirmed this; If you add a Shell.FlyoutHeader to the flyout menu then the first flyoutmenu item on IOS is not clickable (android works fine). NOTE: If you remove the Shell.FlyoutHeader then it works fine.
I didn't know this was an issue until I found this BUG report. Please fix.
I'm experiencing this issue also:
https://github.com/biozal/dotnet-cblite-inventory/blob/main/src/Dotnet.Cblite.Inventory.Maui/AppShell.xaml
iOS Specifically the first menu item isn't clickable. This is on an iPhone 13 Mini simulator specifically.
Yeah I just tested this, this is an issue for me developer friend.
This also occurs with FlyoutContent, the top 48 dp of FlyoutContent is not clickable if you have a FlyoutHeader
@emaf it looks like you have done a lot of commits to resolve this - can you give any indication when this might ship? I want to know if i need to start programming work arounds of if the next release will have a resolution and rough ball park release date so we can plan internally (I know you cant give a fixed date but an indication of a target would be appreciated)
@michaelonz if everything goes alright, the plan is to ship those changes in .NET 8 SR2. We need to land those changes in main first, and then see how they go before being certain about it.
Once the changes landed in main, you can use nightly builds to give those a try.
This isn't fixed in the latest release. Still can't click when having an header...
Can you try the nightly builds? I see this was merged 2 weeks ago, but due to other reasons the sr1 that shipped a few days ago was actually supposed to go out a few weeks ago.
So effectively this was merged after the release branch was created. This should be in the next release.
When will this fix be actually included in a non preview release, I can qa test it out there once it's out. I can't install preview visual studio at the moment.
PaulAstramowicz.com
From: Matthew Leibowitz @.> Sent: Saturday, January 20, 2024 12:03:34 PM To: dotnet/maui @.> Cc: Paul Astro @.>; Comment @.> Subject: Re: [dotnet/maui] [regression/8.0.0-preview.3.8149] Header in flyout menu makes first menu item not clickable on IOS (Issue #17965)
Can you try the nightly builds? I see this was merged 2 weeks ago, but due to other reasons the sr1 that shipped a few days ago was actually supposed to go out a few weeks ago.
So effectively this was merged after the release branch was created. This should be in the next release.
— Reply to this email directly, view it on GitHubhttps://github.com/dotnet/maui/issues/17965#issuecomment-1902066033, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AK2EVSQNLUAGABE2EH44MVDYPOQANAVCNFSM6AAAAAA546PQ2GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMBSGA3DMMBTGM. You are receiving this because you commented.Message ID: @.***>