MenuItemTemplate replaces default styles

sunco 121 Reputation points
2021-05-25T22:24:07.75+00:00

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>
Xamarin
Xamarin
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
    2021-05-26T03:03:45.03+00:00

    Hello,​

    Welcome to our Microsoft Q&A platform!

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

    ![99693-image.png]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.

    99675-image.png

    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