Net maui shell custom shell renderer interface problem, how to fix it ?

Question

My post is deleted why I don t understand ? I have problem like that on shell when is navigated. ( when contentpage is Shell.TabBarIsVisible="False" ) on custom shell renderer.. How to fix it ? Is any idea ..Thanks..

My customrenderer codes as like as above is it posible to fix it ?

     public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
     {
         var view = base.OnCreateView(inflater, container, savedInstanceState);


         if (Context is not null && ShellItem is CustomTabBar { CenterViewVisible: true } tabbar)
         {
             var rootLayout = new FrameLayout(Context)
             {
                 LayoutParameters = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent)
             };

             rootLayout.AddView(view);
             const int middleViewSize = 65;
             var middleViewLayoutParams = new FrameLayout.LayoutParams(
                 ViewGroup.LayoutParams.WrapContent,
                 ViewGroup.LayoutParams.WrapContent,
                 GravityFlags.CenterHorizontal |
                 GravityFlags.Bottom)
             {
                 BottomMargin = 20,
                 Width = middleViewSize,
                 Height = middleViewSize
             };


             var middleView = new Button(Context)
             {
                 LayoutParameters = middleViewLayoutParams

             };

             middleView.Click += delegate
             {
                 tabbar.CenterViewCommand?.Execute(null);
             };

             middleView.SetText(tabbar.CenterViewText, TextView.BufferType.Normal);

             middleView.SetPadding(0, 0, 0, 0);

             if (tabbar.CenterViewBackgroundColor is not null)
             {
                 var backgroundView = new View(Context)
                 {
                     LayoutParameters = middleViewLayoutParams
                 };
                 var backgroundDrawable = new GradientDrawable();
                 backgroundDrawable.SetShape(ShapeType.Rectangle);
                 backgroundDrawable.SetCornerRadius(middleViewSize / 2f);
                 backgroundDrawable.SetColor(tabbar.CenterViewBackgroundColor.ToPlatform(Colors.Transparent));
                 backgroundView.SetBackground(backgroundDrawable);
                 rootLayout.AddView(backgroundView);
             }

             tabbar.CenterViewImageSource?.LoadImage(Application.Current!.MainPage!.Handler!.MauiContext!, result =>
             {
                 if (result?.Value is not BitmapDrawable drawable || drawable.Bitmap is null)
                 {
                     return;
                 }

                 const int padding = 0;
                 middleView.LayoutParameters = new FrameLayout.LayoutParams(
                     drawable.Bitmap.Width - padding, drawable.Bitmap.Height - padding,
                     GravityFlags.CenterHorizontal | GravityFlags.Bottom)
                 {
                     BottomMargin = middleViewLayoutParams.BottomMargin + (int)(1.5 * padding)
                 };
                 middleView.SetBackground(drawable);
                 middleView.SetMinimumHeight(0);
                 middleView.SetMinimumWidth(0);

             });

             rootLayout.AddView(middleView);
             return rootLayout;
         }


         return view;
     }

Answer 1

Hello,

You can do this by Messager, before using it, please install CommunityToolkit.Mvvm nugget package.

Firstly, create a message class in your project.

// Create a message
public class TabbarChangedMessage : ValueChangedMessage<bool>
{
    public TabbarChangedMessage(bool isvisable) : base(isvisable)
    {
    }
}

Then send messages in your navigated contentpage that set Shell.TabBarIsVisible="False" like following code.

OnAppearing(navigated page appearing will be executed) method will transfer false value to hide the middle icon.

OnDisappearing(navigated page disappearing will be executed) method will transfer true value to show the middle icon.

protected override void OnAppearing()
  {
      base.OnAppearing();
      WeakReferenceMessenger.Default.Send(new TabbarChangedMessage(false));
  }
  protected override void OnDisappearing()
  {
      base.OnDisappearing();
      WeakReferenceMessenger.Default.Send(new TabbarChangedMessage(true));


 }

In the end, open your OnCreateView method of CustomShellItemRenderer, please find the middle button. Based on the transferred value, you can hide the button or show the button by sending value in the message.

Here is editted OnCreateView method.

public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
   {
       var view = base.OnCreateView(inflater, container, savedInstanceState);



       if (Context is not null && ShellItem is CustomTabBar { CenterViewVisible: true } tabbar)
       {
           var rootLayout = new FrameLayout(Context)
           {
               LayoutParameters = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MatchParent, ViewGroup.LayoutParams.MatchParent)
           };


          rootLayout.AddView(view);
           const int middleViewSize = 65;
           var middleViewLayoutParams = new FrameLayout.LayoutParams(
               ViewGroup.LayoutParams.WrapContent,
               ViewGroup.LayoutParams.WrapContent,
               GravityFlags.CenterHorizontal |
               GravityFlags.Bottom)
           {
               BottomMargin = 20,
               Width = middleViewSize,
               Height = middleViewSize
           };


           var middleView = new Button(Context)
           {
               LayoutParameters = middleViewLayoutParams


          };


// Register messages here, you get the value is false, hide the middle button, if you get the value is true, you can make the middle button to appear.

          WeakReferenceMessenger.Default.Register<TabbarChangedMessage>(this, (r, m) =>
           {


              if (m.Value.Equals(false))
               {
                   middleView.Visibility = ViewStates.Invisible;
               }
               else
               {
                   middleView.Visibility = ViewStates.Visible;


              }


          });


          middleView.Click += delegate
           {
               tabbar.CenterViewCommand?.Execute(null);
           };


          middleView.SetText(tabbar.CenterViewText, TextView.BufferType.Normal);


          middleView.SetPadding(0, 0, 0, 0);


          if (tabbar.CenterViewBackgroundColor is not null)
           {
               var backgroundView = new View(Context)
               {
                   LayoutParameters = middleViewLayoutParams
               };
               var backgroundDrawable = new GradientDrawable();
               backgroundDrawable.SetShape(ShapeType.Rectangle);
               backgroundDrawable.SetCornerRadius(middleViewSize / 2f);
               backgroundDrawable.SetColor(tabbar.CenterViewBackgroundColor.ToPlatform(Colors.Transparent));
               backgroundView.SetBackground(backgroundDrawable);
               rootLayout.AddView(backgroundView);
           }


          tabbar.CenterViewImageSource?.LoadImage(Application.Current!.MainPage!.Handler!.MauiContext!, result =>
           {
               if (result?.Value is not BitmapDrawable drawable || drawable.Bitmap is null)
               {
                   return;
               }


              const int padding = 0;
               middleView.LayoutParameters = new FrameLayout.LayoutParams(
                   drawable.Bitmap.Width - padding, drawable.Bitmap.Height - padding,
                   GravityFlags.CenterHorizontal | GravityFlags.Bottom)
               {
                   BottomMargin = middleViewLayoutParams.BottomMargin + (int)(1.5 * padding)
               };
               middleView.SetBackground(drawable);
               middleView.SetMinimumHeight(0);
               middleView.SetMinimumWidth(0);


          });


          rootLayout.AddView(middleView);
           return rootLayout;
       }


       return view;
   }

Best Regards,

Leon Lu

---

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.