Change in Shell/Flyout section an individual Item like FontSize

Question

Change in Shell/Flyout section an individual Item in this AppShell.xaml Shell>Flyout section I would like to change the FontSize of an individual item (e.g. Title in: "<ShellContent Title="motivation"

I set it in "<Style Class="FlyoutItemLabelStyle" TargetType="Label" .... <Setter Property="FontSize" Value="18" /> (see my comments as -------------- in below code)

Then I tried '<Style x:Key="MotivationShell(2)"'. In fact I tried several variations, BUT won't work. What is the clean solution? thanks for your time, ed

<Shell x:Class="Randoff.AppShell"
       xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Randoff.Controls"
       xmlns:sys="clr-namespace:System;assembly=netstandard"
       xmlns:views="clr-namespace:Randoff.Views"
       x:Name="shell"
       FlyoutBackgroundImage="background.jpg">

  

    <Shell.Resources>
        <Style x:Key="BaseStyle" TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="#455A64" />
            <Setter Property="Shell.ForegroundColor" Value="White" />
            <Setter Property="Shell.TitleColor" Value="White" />
            <Setter Property="Shell.DisabledColor" Value="#B4FFFFFF" />
            <Setter Property="Shell.UnselectedColor" Value="#95FFFFFF" />
        </Style>
        <Style BasedOn="{StaticResource BaseStyle}" TargetType="ShellItem" />
        <Style x:Key="DomesticShell"
               BasedOn="{StaticResource BaseStyle}"
               TargetType="Element">
            <Setter Property="Shell.BackgroundColor" Value="#039BE6" />
        </Style>

------------ here I set the fontSize for all items to 18 ---------------
        <Style Class="FlyoutItemLabelStyle" TargetType="Label">    		       
            <Setter Property="TextColor" Value="Yellow" />
            <Setter Property="FontSize" Value="18" />
            <Setter Property="FontAttributes" Value="Bold" />
        </Style>

	<Style x:Key="MotivationShell"
               BasedOn="{StaticResource BaseStyle}"
               TargetType="ShellContent" >
            <Setter Property="Shell.BackgroundColor" Value="#96d1ff" />
------------ here I'd like to set it to 12            --------------- these 2 setters won't work !
	    <Setter Property="Shell.FontSize" Value="12" />
        </Style>
	<Style x:Key="MotivationShell2"
               BasedOn="{StaticResource BaseStyle}"
               TargetType="ShellContent" >
------------ here I'd like to set it to 12            --------------- won't work either
	    <Setter Property="Shell.FontSize" Value="12" />
        </Style>

    </Shell.Resources>

    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>

    <Shell.FlyoutFooter>
        <controls:FlyoutFooter />
    </Shell.FlyoutFooter>

   

    <FlyoutItem FlyoutDisplayOptions="AsMultipleItems" Route="randos">
        
        <ShellContent Route="meounes"
                      Style="{StaticResource MeounesShell}"
                      Title="Méounes"
                      Icon="hiking.png"
                      ContentTemplate="{DataTemplate views:MeounesPage}" />
       
        <Tab Title="Alpes de Haute Provence" Icon="hiking.png">
            <ShellContent Title="Alpes de Haute Provence"
                          ContentTemplate="{DataTemplate views:AlpesdeHauteProvencePage}"
                          Icon="hiking.png"
                          Route="alpesdehauteprovence"
                          Style="{StaticResource AlpesdeHauteProvenceShell}" />
            <ShellContent Title="Gorges du Verdon"
                          ContentTemplate="{DataTemplate views:GorgesduVerdonPage}"
                          Icon="hiking.png"
                          Route="gorgesduverdon"
                          Style="{StaticResource GorgesduVerdonsShell}" />
        </Tab>
    </FlyoutItem>
      
   

    <MenuItem Command="{Binding SiteCommand}"
              CommandParameter="https://www.google.com/maps/d/embed?mid=1_c23ckiE1EnYX3VOspVLcDO7ppn6YJkT&amp;hl=en"
              IconImageSource="Info.png"
              Text="toutes randonnées" />
    <MenuItem Command="{Binding SiteCommand}"
              CommandParameter="http://rando.gustatio.org"
              IconImageSource="Info.png"
              Text="WebSite" />
    
----------- this Title I would like to change the FontSize ------------------    
    <ShellContent Title="motivation"
                  ContentTemplate="{DataTemplate views:MotivationPage}"
                  Icon="info.png"
                  Style="{StaticResource MotivationShell}" />   ------------  Style="{StaticResource MotivationShell}" />
</Shell>

Answer 1

Hello,

In this case, in fact I'd like to change the Fontsize Of the 'MenuItem and/or the Shellcontent outside the <Flyout section!

I saw you have tried Shell.MenuItemTemplate and Shell.ItemTemplate, but you commented them. When you set Shell.ItemTemplate, the ShellContent will be changed, and you could try to set style for the Label.

Best Regards, Wenyan Zhang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment". 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.