How change Style of TabbedPage in netMaui

Question

so I created a TabbedPage in .Net Maui which looks like that:

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="AppTesting.TabPage" xmlns:local="clr-namespace:AppTesting.Pages"
         xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
        android:TabbedPage.ToolbarPlacement="Bottom"  BarBackgroundColor="#1d1f20"
         Title="Ta" >
<local:HomePage Title="Home"/>
<local:Account Title="Account"/>

so like nothing special.

The Tab bar now looks like that:

Tab bar now

my goal is to look like that later :

Tabbar I want

how can I change the Tab Bar to achieve something like that or how can I create the Control Template of an Tabbed Page so that I could change the Control Template to get it to look like that.

Anynone an Idea?

Answer 1

I am also trying to make a Tabbar (BottomNavigationView) like @BeginnerWPF wants, for iOS I got the solution, but for android I manage to do this using TabbedViewHandler, but there is an unwanted white layer behind the custom Tabbar (BottomNavigationView). @Jessie , @Peter I am using TabbedPage not Shell, anyone have idea how can I remove the white layer? The Question I was asked How can I make custom tabbed page in MAUI?, here you can see the code I tried for Android. And for iOS I create a renderer in ProjectName.Platforms.iOS.Renderers and it works for me.

Here is the code for iOS:

public class CustomTabbedPageRenderer : TabbedRenderer
{
    public override void ViewWillAppear(bool animated)
    {
        base.ViewWillAppear(animated);

        if (TabBar?.Items == null)
            return;

        foreach (var item in TabBar.Items)
        {
            // Adjust icon position to be vertically centered
            item.ImageInsets = new UIEdgeInsets(6, 0, -6, 0);
        }
    }

    public override void ViewDidLayoutSubviews()
    {
        base.ViewDidLayoutSubviews();

        // Add margins to the TabBar
        TabBar.Frame = new CGRect(
            TabBar.Frame.X + 12,
            TabBar.Frame.Y - 20,
            TabBar.Frame.Width - 24,
            TabBar.Frame.Height - 10
        );

        TabBar.Layer.CornerRadius = 20;
        TabBar.Layer.MasksToBounds = true;

        CAShapeLayer shadowLayer = new CAShapeLayer();
        shadowLayer.BackgroundColor = UIColor.Clear.CGColor;
        shadowLayer.BorderColor = UIColor.Clear.CGColor;
        shadowLayer.FillColor = UIColor.Clear.CGColor;
        shadowLayer.FillRule = CAShapeLayer.FillRuleEvenOdd;
        shadowLayer.Frame = TabBar.Frame;
        shadowLayer.Path = UIBezierPath.FromRoundedRect(
            TabBar.Bounds,
            UIRectCorner.AllCorners,
            new CGSize(20, 20)).CGPath;
        shadowLayer.RasterizationScale = UIScreen.MainScreen.Scale;
        shadowLayer.ShadowColor = UIColor.Black.ColorWithAlpha(0.2f).CGColor;
        shadowLayer.ShadowOffset = new CGSize(0, 0);
        shadowLayer.ShadowOpacity = 0.16f;
        shadowLayer.ShadowPath = shadowLayer.Path;
        shadowLayer.ShadowRadius = 4;
        shadowLayer.ShouldRasterize = true;
        shadowLayer.StrokeColor = UIColor.Clear.CGColor;

        NativeView?.Layer.InsertSublayer(shadowLayer, 1);
    }
}

Answer 2

Your questions needs more words about what it is you really want. But if it is to have rounded TabBar here is a tutorial I made. that takes you through the process of changing TabBar with renders. How can I create a custom TabBar in a MAUI app? Note that this is TabBar that is used in Shell applications and not TabbedPage which is not compatible with Shell. The tutorial helps you manipulate Shell and to the style it however you want.

Answer 3

How change Style of TabbedPage in netMaui

You can use the following two ways to achieve the feature.

Method 1: It is more recommended to use Handler rather than Renderer on MAUI.

You could use ITabbedViewHandler to customize your TabbedPage on each platform, please refer to the following documentations:

• Handlers
• ITabbedViewHandler Interface

Method 2: You could continue using TabbedPageRenderer on MAUI, please refer to Using Custom Renderers in .NET MAUI.

If you use Handler, you need to create a view of the corresponding platform to adapt. Please refer to Create a custom control using handlers to get more details.