question

fanmixco avatar image
0 Votes"
fanmixco asked JessieZhang-2116 commented

How to remove the gray MenuItem in Xamarin.Forms Shell?

I am building an app that requires a BottomNavBar and a NavigationDrawer. I was able to do the trick based on this answer from StackOverflow. However, I got a random gray extra item that is even in the answer's pic:

107218-simulator-screen-shot-iphone-12-mini-2021-06-20-at.png

This is my code:

 <?xml version="1.0" encoding="UTF-8"?>
 <Shell xmlns="http://xamarin.com/schemas/2014/forms" 
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:local="clr-namespace:SaveThatPower.Views"
        x:Name="SP_AppShell"
        Title="Save That Power"
        FlyoutHeaderBehavior="CollapseOnScroll"
        FlyoutIcon="menu.png"
        x:Class="SaveThatPower.AppShell">
    
     <MenuItem Text="Options" />
    
     <MenuItem
         Command="{Binding YearTableCommand}"
         Icon="user"
         Text="Profile" />
     <MenuItem
         Command="{Binding YearTableCommand}"
         Icon="seal"
         Text="My awards" />
     <MenuItem
         Command="{Binding YearTableCommand}"
         Icon="send"
         Text="Feedback" />
     <MenuItem
         Command="{Binding YearTableCommand}"
         Icon="about"
         Text="About us" />
    
     <FlyoutItem>
         <ShellContent Icon="power_plug" Title="Home" ContentTemplate="{DataTemplate local:HomePage}" />
         <ShellContent Title="Status" Icon="timetable" ContentTemplate="{DataTemplate local:YearTablePage}" />
         <ShellContent Title="Gift" Icon="gift_open_outline" Route="GiftsPage" ContentTemplate="{DataTemplate local:GiftsPage}" />
         <ShellContent Title="Tips" Icon="head_lightbulb_outline" Route="TipsPage" ContentTemplate="{DataTemplate local:TipsPage}" />
         <ShellContent Title="City" Icon="map_clock" Route="AirQualityMapPage" ContentTemplate="{DataTemplate local:AirQualityMapPage}" />
     </FlyoutItem>
    
 </Shell>


dotnet-xamarin
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @fanmixco , I have not heard from you for a couple of days. Please let me know if there is anything that I can help here.

0 Votes 0 ·

1 Answer

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered JessieZhang-2116 edited

Hello,


Welcome to our Microsoft Q&A platform!

How to remove the gray MenuItem in Xamarin.Forms Shell?

Based on your code ,I could reproduce this problem.

And the reason why there's a gray area is that current displayed page is the page in your FlyoutItem, that is to say, the FlyoutItem is selected. So the gray MenuItem is the seletor color for this FlyoutItem.

You can add the Title and Icon for the FlyoutItem,for example:

  <FlyoutItem  Title="TestPage" Icon="test1.png">
      <ShellContent Icon="power_plug" Title="Home" ContentTemplate="{DataTemplate local:HomePage}" />
      <ShellContent Title="Status" Icon="timetable" ContentTemplate="{DataTemplate local:YearTablePage}" />
      <ShellContent Title="Gift" Icon="gift_open_outline" Route="GiftsPage" ContentTemplate="{DataTemplate local:GiftsPage}" />
      <ShellContent Title="Tips" Icon="head_lightbulb_outline" Route="TipsPage" ContentTemplate="{DataTemplate local:TipsPage}" />
      <ShellContent Title="City" Icon="map_clock" Route="AirQualityMapPage" ContentTemplate="{DataTemplate local:AirQualityMapPage}" />
  </FlyoutItem>

In addition, you can set the selected style in Shell.Resources
You can refer to the following code:

 <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="#95FFFFFF" />
             <Setter Property="Shell.TabBarBackgroundColor" Value="{StaticResource Primary}" />
             <Setter Property="Shell.TabBarForegroundColor" Value="White"/>
             <Setter Property="Shell.TabBarUnselectedColor" Value="#95FFFFFF"/>
             <Setter Property="Shell.TabBarTitleColor" Value="White"/>
         </Style>
         <Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}" />
         <Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}" />

         <!--
         Default Styles for all Flyout Items
         https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyoutitem-and-menuitem-style-classes
         -->
         <Style Class="FlyoutItemLabelStyle" TargetType="Label">
             <Setter Property="TextColor" Value="White"></Setter>
         </Style>
         <Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
             <Setter Property="VisualStateManager.VisualStateGroups">
                 <VisualStateGroupList>
                     <VisualStateGroup x:Name="CommonStates">
                         <VisualState x:Name="Normal">
                             <VisualState.Setters>
                                 <Setter Property="BackgroundColor" Value="{x:OnPlatform UWP=Transparent, iOS=White}" />
                                 <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
                             </VisualState.Setters>
                         </VisualState>
                         <VisualState x:Name="Selected">
                             <VisualState.Setters>
                                 <Setter Property="BackgroundColor" Value="{StaticResource Primary}" />
                             </VisualState.Setters>
                         </VisualState>
                     </VisualStateGroup>
                 </VisualStateGroupList>
             </Setter>
         </Style>

         <!--
         Custom Style you can apply to any Flyout Item
         -->
         <Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
             <Setter Property="VisualStateManager.VisualStateGroups">
                 <VisualStateGroupList>
                     <VisualStateGroup x:Name="CommonStates">
                         <VisualState x:Name="Normal">
                             <VisualState.Setters>
                                 <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
                             </VisualState.Setters>
                         </VisualState>
                     </VisualStateGroup>
                 </VisualStateGroupList>
             </Setter>
         </Style>
     </ResourceDictionary>
 </Shell.Resources>

Update:

Now, is any of these pieces of code capable of removing that gray box? My goal is to remove it.

You can just change the Selected BackgroundColor to Transparent, just as follows:

         <Style Class="FlyoutItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
             <Setter Property="VisualStateManager.VisualStateGroups">
                 <VisualStateGroupList>
                     <VisualStateGroup x:Name="CommonStates">
                         <VisualState x:Name="Normal">
                             <VisualState.Setters>
                                 <Setter Property="BackgroundColor" Value="{x:OnPlatform UWP=Transparent, iOS=White}" />
                                 <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{StaticResource Primary}" />
                             </VisualState.Setters>
                         </VisualState>

                         <!--change the Selected BackgroundColor to Transparent-->
                         <VisualState x:Name="Selected">
                             <VisualState.Setters>  
                                 <Setter Property="BackgroundColor" Value="Transparent" />
                             </VisualState.Setters>
                         </VisualState>
                     </VisualStateGroup>
                 </VisualStateGroupList>
             </Setter>
         </Style>

The result is:
107983-image.png


Best Regards,


Jessie Zhang


If the response is helpful, please click "Accept Answer" and upvote it.



Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



image.png (15.6 KiB)
· 2
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi, I can test it in a couple of hours. Now, is any of these pieces of code capable of removing that gray box? My goal is to remove it. Thanks.

0 Votes 0 ·

You can change the Selected BackgroundColor of FlyoutItemLayoutStyle to Transparent. I have updated my answer, you can check the updated part at the bottom of my reply.

0 Votes 0 ·