CODEWITHSUNDEEP
.netmaui
The_Mo
The_Mo

Reputation: 33

.net maui bottom (navigation) Tab Bar top(border) line

How can I get a horizontal line above tab bar on Android and IOS? Here is a similar question on stack overflow for xamarin forms. I tried to use the new handler. But I don't know if I am doing it right.

Microsoft.Maui.Handlers.TabbedViewHandler.Mapper.AppendToMapping(nameof(IView.Background), (handler, view) =>
        {
           if (view is BottomNavigationView )
            {
#if __ANDROID__

                Android.Graphics.Drawables.ShapeDrawable line = new()
                {
                    Alpha = 255
                };

                line.Paint.Color = Colors.Black.ToAndroid();
                line.Paint.SetStyle(Android.Graphics.Paint.Style.Fill);
                var layerDrawable = new LayerDrawable(new Drawable[] { line });
                layerDrawable.SetLayerInset(0, 0, 0, 0, int.Parse((view.Height - 4).ToString()));
                (handler.PlatformView as global::Android.Views.View).SetBackground(layerDrawable);

                
#endif
            }
        });

Upvotes: 1

Views: 3224

Answers (2)

Saftpresse99
Saftpresse99

Reputation: 979

On iOS the line is always there. I found a workaround which works for my. The trick is using a brush to draw the BarBackground:

<TabbedPage.BarBackground>
<OnPlatform x:TypeArguments="Brush">
    <On Platform="Android">
        <LinearGradientBrush StartPoint="0,0"
                             EndPoint="0,1">
            <GradientStop Color="{StaticResource SeparatorColor}"
                          Offset="0.0" />
            <GradientStop Color="{StaticResource SeparatorColor}"
                          Offset="0.01" />
            <GradientStop Color="{StaticResource BackgroundColor}"
                          Offset="0.01" />
            <GradientStop Color="{StaticResource BackgroundColor}"
                          Offset="1.0" />
        </LinearGradientBrush>
    </On>
    <On Platform="iOS">
        <SolidColorBrush Color="{StaticResource BackgroundColor}" />
    </On>
</OnPlatform>
</TabbedPage.BarBackground>

Upvotes: 1

Alexandar May - MSFT
Alexandar May - MSFT

Reputation: 10148

The process for creating a cross-platform .NET MAUI custom control, whose platform implementations are provided by handlers, is as follows:

  1. Create a class for the cross-platform control, which provides the control's public API. For more information, see this.

  2. Create any required additional cross-platform types.

  3. Create a partial handler class. For more information, see Create the handler.

  4. In the handler class, create a PropertyMapper dictionary, which defines the Actions to take when cross-platform property changes occur. For more information, see Create the property mapper.

  5. Optionally, in your handler class, create a CommandMapper dictionary, which defines the Actions to take when the cross-platform control sends instructions to the native views that implement the cross-platform control. For more information, see Create the command mapper.

  6. Create partial handler classes for each platform that create the native views that implement the cross-platform control. For more information, see Create the platform controls.

  7. Register the handler using the ConfigureMauiHandlers and AddHandler methods in your app's MauiProgram class. For more information, see Register the handler.

      .ConfigureMauiHandlers(handlers =>
            {
                handlers.AddHandler(typeof(CustomControl), typeof(CustomControlHandler));
            });

Reference link: https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/

Sample repo:https://github.com/dotnet/maui-samples/tree/main/6.0/UserInterface/Handlers/CreateHandlerDemo

Upvotes: 0

Related Questions