Insert a custom button into a BottomBar shell

Question

I had tried to create a BottomBar with a TabView, but it doesn't accept a contentPage as the content of individual buttons. I am therefore trying to transform the bottomBar created in the TabView into a Shell page that allows you to insert a contentPage as a navigation page. The difficulty lies in creating a button like this:

I created my own controlTemplate, the problem is that the single Tab element does not accept a custom controlTemplate. how do i solve?

    <ControlTemplate  
                x:Key="FabTabItemTemplate">  
                <Grid>  
                    <yummy:PancakeView HorizontalOptions="Center" CornerRadius="40" Padding="14" Margin="0,0,4,20" >  
                        <yummy:PancakeView.BackgroundGradientStops>  
                            <yummy:GradientStop Color="Blue" Offset="0"/>  
                            <yummy:GradientStop Color="LightBlue" Offset="1"/>  
                        </yummy:PancakeView.BackgroundGradientStops>  
      
                        <xct:Expander Rotation="180" HorizontalOptions="Start" VerticalOptions="End" Tapped="Expander_Tapped">  
                            <xct:Expander.Header>  
                                <Image Source="ExpanderPlus.png" WidthRequest="30" HeightRequest="30" Rotation="180">  
                                    <Image.Triggers>  
                                        <DataTrigger TargetType="Image"  
                                             Binding="{Binding Source={RelativeSource AncestorType={x:Type xct:Expander}}, Path=IsExpanded}"  
                                             Value="True">  
                                            <Setter Property="Source" Value="ExpanderClose.png"/>  
                                        </DataTrigger>  
                                    </Image.Triggers>  
                                </Image>  
                            </xct:Expander.Header>  
                            <StackLayout Spacing="30" Margin="0,20">  
                                <ImageButton Clicked="ExpanderNote_Clicked" Source="ExpanderWriting.png" BackgroundColor="Transparent" Widt  
  
hRequest="30" HeightRequest="30" Rotation="180" />  
                            <ImageButton Clicked="ExpanderSmile_Clicked" Source="Smile.png" BackgroundColor="Transparent" WidthRequest="30" HeightRequest="30" Rotation="180"  />  
                        </StackLayout>  
                    </xct:Expander>  
                </yummy:PancakeView>  
  
            </Grid>  
        </ControlTemplate>  
  
//Does not work  
 <Tab ControlTemplate="{StaticResource FabTabItemTemplate}"/>  

Answer 1

Hello,

Welcome to Microsoft Q&A!

You can use custom renderer to achieve this function.

In xamarin Ios:

1.Define five page in TabbedPage , make the third one's title empty (leave space for the extra button).

<ContentPage Title="Tab 1" />  
<ContentPage Title="Tab 2" />  
<ContentPage Title="" />  
<ContentPage Title="Tab 3" />  
<ContentPage Title="Tab 4" />  

2.Customize button (position , backgroundColor, corner radius, click event ) ,add it as subview on tabbedPage , disable the third tab click event.

  [assembly : ExportRenderer(typeof(TabbedPage),typeof(MyRenderer))]  
namespace FormsApp.iOS  
{  
    public class MyRenderer :TabbedRenderer  
    {  

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

            UIButton btn = new UIButton(frame: new CoreGraphics.CGRect(0, 0, 60, 60));  
            this.View.Add(btn);  

            //customize button  
            btn.ClipsToBounds = true;  
            btn.Layer.CornerRadius = 30;  
            btn.BackgroundColor = UIColor.Red;  
            btn.AdjustsImageWhenHighlighted = false;  

            //move button up  
            CGPoint center = this.TabBar.Center;  
            center.Y = center.Y - 20;  
            btn.Center = center;  

            //button click event  
            btn.TouchUpInside += (sender,ex) =>  
            {  
                //use mssage center to inkove method in Forms project  
            };  

            //disable jump into third page  
            this.ShouldSelectViewController += (UITabBarController tabBarController, UIViewController viewController) =>  
            {  
                if (viewController == tabBarController.ViewControllers[2])  
                {  
                    return false;  
                }  
                return true;  
            };  
        }  
    }  
}  

The result is:

Update

And for shell, you can refer article Xamarin.Forms Shell: Customizing the TabBar (Android) .
For this function code in iOS, you could refer to the following link: https://stackoverflow.com/questions/58635349/xamarin-forms-shell-custom-icon-for-selected-tab.

And there is a similar thead, you can check it here: https://learn.microsoft.com/en-us/answers/questions/170862/xamarin-bottom-custom-tab-bar.html .

Best Regards,

Jessie Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.
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.