How to style shell content title and menu item title property in xamarin forms shell

udaysuddhala

Is it possible to set the font size and text color for menu items in xamarin forms shell? is styling possible for menu items /Shell items in xamarin forms shell?

<MenuItem Text="Help"
IconImageSource="help.png"
Command="{Binding HelpCommand}"

in the above code, how to style text property ?

ColeX

We could use Shell.MenuItemTemplate , customize the label inside it .

For example

    <Shell ...>
        <Shell.MenuItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.2*" />
                        <ColumnDefinition Width="0.8*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Icon}"
                           Margin="5"
                           HeightRequest="45" />
                    <Label Grid.Column="1"
                           Text="{Binding Text}"
                           FontAttributes="Italic"
                           FontSize="Large" 
                           TextColor="Red"
                           VerticalTextAlignment="Center" />
                </Grid>
            </DataTemplate>
        </Shell.MenuItemTemplate>
        ...
        <MenuItem Text="Random"
                  IconImageSource="random.png"
                  Command="{Binding RandomPageCommand}" />
        <MenuItem Text="Help"
                  IconImageSource="help.png"
                  Command="{Binding HelpCommand}"
                  CommandParameter="https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell" />  
    </Shell>

Check Define MenuItem appearance.

ColeX

We could use Shell.MenuItemTemplate , customize the label inside it .

For example

    <Shell ...>
        <Shell.MenuItemTemplate>
            <DataTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.2*" />
                        <ColumnDefinition Width="0.8*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding Icon}"
                           Margin="5"
                           HeightRequest="45" />
                    <Label Grid.Column="1"
                           Text="{Binding Text}"
                           FontAttributes="Italic"
                           FontSize="Large" 
                           TextColor="Red"
                           VerticalTextAlignment="Center" />
                </Grid>
            </DataTemplate>
        </Shell.MenuItemTemplate>
        ...
        <MenuItem Text="Random"
                  IconImageSource="random.png"
                  Command="{Binding RandomPageCommand}" />
        <MenuItem Text="Help"
                  IconImageSource="help.png"
                  Command="{Binding HelpCommand}"
                  CommandParameter="https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell" />  
    </Shell>

Check Define MenuItem appearance.

udaysuddhala

@ColeX .. Oh god, how did i miss that ? uff Thanks colex.