Xamarin Forms TabbedPage middle action button?

Question

Hi,

Is it possible to add a button in the middle of TabbedPage which doesn't have associated ContentPage? So when click button I want to call some code instead of navigating to a tab?
Something like image below:

So tabs with icons are all ContentPages inside NavigationPage, but blue round button in the middle doesn't have NavigationPage and only acts a button.

Any ideas how can I achieve this?

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

I notice previous link, you used :Xamarin Community Toolkit TabView to achieve the TabbedPage.

Here is a quick way to achieve your needs without custom renderer.

You can add a new TabViewItem with empty content in the middle of the xct:TabView, based on your screenshot. you should put the new TabViewItem in the third index of xct:TabView. When you click the middle tab, you need to execute some code, So I add the TapGestureRecognizer event in it.

   <xct:TabViewItem  
                       Icon="middle.png"  
                         
                        ControlTemplate="{StaticResource TabItemTemplate}"  
                       TextColor="White"  
                       TextColorSelected="Yellow"  
                       FontSize="12">  
                   <xct:TabViewItem.GestureRecognizers>  
                       <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"></TapGestureRecognizer>  
                   </xct:TabViewItem.GestureRecognizers>  
                  
               </xct:TabViewItem>  

In the middle tab, you do not need the text, but you need to include the icon. So I write a new ControlTemplate, put the Image in the MiddleTabItemTemplate.

   <ContentPage.Resources>  
           <ResourceDictionary>  
               <ControlTemplate  
           x:Key="MiddleTabItemTemplate">  
                   <Grid  
           RowSpacing="0">  
                       <Grid.RowDefinitions>  
                           <RowDefinition Height="*" />  
                       </Grid.RowDefinitions>  
                       <Image  
           Grid.Row="0"  
           VerticalOptions="Center"  
           HorizontalOptions="Center"  
           WidthRequest="24"  
           HeightRequest="24"  
                           Margin="6"  
           Source="{TemplateBinding CurrentIcon}" />  
     
                   </Grid>  
               </ControlTemplate>  
           </ResourceDictionary>  
       </ContentPage.Resources>  

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.