MenuItemTemplate replaces default styles

sunco 121 Reputation points

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:

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">
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal">
                                    <Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="White" />
                                    <Setter Property="Label.HeightRequest" Value="30" />
                                    <Setter Property="BackgroundColor" Value="#bcbcbc" />

And the MenuItemTemplate used

            <Grid ColumnDefinitions="*">
                <Label Grid.Column="0" Margin="20,20,20,0" Text="{Binding Text}" />
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,252 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 63,916 Reputation points Microsoft Vendor


    Welcome to our Microsoft Q&A platform!

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


    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" />  

    Then use it in the MenuItemTemplate like following code

       <MenuItem Text="Logout" StyleClass="MenuItemLayoutStyleSeparator" Clicked="OnMenuItemClicked">  
                              Style="{StaticResource labelWihteStyle}"  
                              Text="{Binding Text}"  
                              VerticalTextAlignment="Center" />  

    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.

    1 person found this answer helpful.
    0 comments No comments

0 additional answers

Sort by: Most helpful