How to change tabbar style (font and size and ...)

Mahdi Elahi 31 Reputation points
2024-11-14T05:09:08.0233333+00:00

i want change the style of tabbar menu item font and size and color

how to do it ?

AppShell

 <TabBar >
     <Tab Title="پروفایل" >
         <Tab.Icon>
             <FontImageSource FontFamily="MDReg" Glyph="&#xe7fd;" />
             <!-- Dog icon -->
         </Tab.Icon>
         <ShellContent ContentTemplate="{DataTemplate cart:Cart}" />
     </Tab>
     <Tab Title="سبد خرید" >
         <Tab.Icon>
             <FontImageSource FontFamily="MDReg" Glyph="&#xe8cc;" />
             <!-- Dog icon -->
         </Tab.Icon>
         <ShellContent ContentTemplate="{DataTemplate home:Home}" />
     </Tab>
     <Tab Title="کاربران">
         <Tab.Icon>
             <FontImageSource FontFamily="MDReg" Glyph="&#xe574;" />
             <!-- Dog icon -->
         </Tab.Icon>
         <ShellContent ContentTemplate="{DataTemplate views:PersonsList}" />
     </Tab>
    
     <Tab Title="خانه" >
         <Tab.Icon>
             <FontImageSource FontFamily="MDReg" Glyph="&#xe88a;"  />
             <!-- Cat icon -->
         </Tab.Icon>
         <ShellContent ContentTemplate="{DataTemplate home:Home}" />
     </Tab>
 </TabBar>

Developer technologies | ASP.NET | ASP.NET Core
Developer technologies | .NET | .NET MAUI
Developer technologies | .NET | Other
Developer technologies | XAML
{count} votes

1 answer

Sort by: Most helpful
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 50,126 Reputation points Microsoft External Staff
    2024-11-21T08:59:23.61+00:00

    Hello,

    Thanks for your feedback.

    To customize the built-in Tabbar function of Shell, you need to obtain the native View to perform this operation.

    There is a detailed answer to this question in MAUI: Handler and commands to change font family of Shell Bottom Tabbar?. You can refer to the solution there.

    Best Regards,

    Alec Liu.


    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.