1

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
            }
        });
The_Mo
  • 33
  • 5

1 Answers1

0

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

Alexandar May - MSFT
  • 6,536
  • 1
  • 8
  • 15
  • Hi Alexander, Thank you for the complete example and explanation. But It looks a bit too much for just a horizontal or shadow on a bottom navigation bar. In xamarin forms the amount of code was basically a custom renderer with a function and it worked. Can you show me how to do this in .net maui? – The_Mo Sep 21 '22 at 19:45
  • Similarly, we use [handler](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/handlers/) in Maui. If you want to use Custom Renderer in MAUI, you can refer to [this thread](https://learn.microsoft.com/en-us/answers/questions/1005371/how-yo-create-custom-shell-renderer-in-microsoft-m.html). – Alexandar May - MSFT Sep 26 '22 at 06:29
  • Hi sorry for my late reply, But do you have example code for me I can use? I read the handlers section and it looks to complicated. I would appreciate sample code just for the top border. Thanks. – The_Mo Mar 09 '23 at 18:14