MenuItemTemplate replaces default styles

Question

Hi, i'm new to Xamarin, so I just started with the Hello world that contains a flyout

I created a resource copying the MenuItemLayoutStyle and changing the BackGroundColor, this for create a kind of separator (for some testing)

It works fine..

Now, I want to hide the icon and only display the Text, so following this does the job: https://forums.xamarin.com/discussion/181656/remove-flyout-icon-and-its-space

The problem is that the resource Style is replaced, I mean, no more BackGroundColor property

The style I created

<Style Class="MenuItemLayoutStyleSeparator" 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="White" />
                                    <Setter Property="Label.HeightRequest" Value="30" />
                                    <Setter Property="BackgroundColor" Value="#bcbcbc" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </Setter>
            </Style>

And the MenuItemTemplate used

<Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid ColumnDefinitions="*">
                <Label Grid.Column="0" Margin="20,20,20,0" Text="{Binding Text}" />
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

I used your style in the shell(this logout item) like following screenshot.

]2

MenuItemLayoutStyleSeparator style not worked for Label in the Shell.MenuItemTemplate.

So, we can create another style for Label.

   <Style x:Key="labelWihteStyle" TargetType="Label">  

                   <Setter Property="Label.TextColor" Value="White" />  
                   <Setter Property="BackgroundColor" Value="#bcbcbc" />  
               </Style>  

Then use it in the MenuItemTemplate like following code

   <MenuItem Text="Logout" StyleClass="MenuItemLayoutStyleSeparator" Clicked="OnMenuItemClicked">  
           <Shell.MenuItemTemplate>  
               <DataTemplate>  
                   <Label      
                          Margin="0,5,10,5"  
                          Style="{StaticResource labelWihteStyle}"  
                          Text="{Binding Text}"  
                          FontAttributes="Italic"  
                          VerticalTextAlignment="Center" />  
               </DataTemplate>  
           </Shell.MenuItemTemplate>  
       </MenuItem>  

Here is running screenshot.

Best Regards,

Leon Lu

---

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.