Change in Shell/Flyout section an individual Item like FontSize

Eduard Kaufmann 311 Reputation points
2023-08-30T13:20:09.5766667+00:00

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>
Developer technologies | .NET | .NET MAUI
Developer technologies | Visual Studio | Other
{count} votes

1 answer

Sort by: Most helpful
  1. Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff
    2023-09-04T09:48:39.9366667+00:00

    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.

    0 comments No comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.