We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Showcasing the CenterButton in SfTabView

Platform: Xamarin.Forms |
Control: SfTabView

You can show the CenterButton of SfTabView, please follow the below steps to show the center button of SfTabView.

 

Step 1: Add the necessary assemblies in the PCL, Android, iOS and UWP projects. Refer to this UG documentation to know more about the assemblies required for SfTabView.

 

Step 2: Add the image for center button on the respective platform folder. Inside the CenterButton view add this image.

 

Please use the below code snippet.

 

XAML:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:TabView"
            xmlns:tabView="clr-namespace:Syncfusion.XForms.TabView;assembly=Syncfusion.SfTabView.XForms"
            x:Class="TabView.MainPage">
<ContentPage.Content>
    <Grid>
        <tabView:SfTabView BackgroundColor="#f6f6f6"
                        VisibleHeaderCount="5" 
                        EnableSwiping="false"
                        TabHeaderPosition="Bottom"
                        OverflowMode="CenterButton"
                        >
            <tabView:SfTabView.CenterButtonSettings>
                <tabView:CenterButtonSettings Height="60" Width="60"/>
            </tabView:SfTabView.CenterButtonSettings>
 
            <tabView:SfTabView.SelectionIndicatorSettings>
                <tabView:SelectionIndicatorSettings Color="#1E90FF" 
                                                        StrokeThickness="3"
                                                        Position="Bottom"/>
            </tabView:SfTabView.SelectionIndicatorSettings>
 
            <tabView:SfTabView.CenterButtonView>
                <Image Source="Compose.png"
                Aspect="AspectFill"
                VerticalOptions="CenterAndExpand"
                HorizontalOptions="CenterAndExpand">
                    <Image.GestureRecognizers>
                        <TapGestureRecognizer
                    Tapped="CenterButton_Tapped" />
                    </Image.GestureRecognizers>
                </Image>
            </tabView:SfTabView.CenterButtonView>
            <tabView:SfTabItem Title="Call">
                <tabView:SfTabItem.Content>
                    <Grid BackgroundColor="White" x:Name="AllContactsGrid" >
                        <ListView x:Name="ContactListView" 
                                ItemsSource="{Binding ContactList}"
                                RowHeight="75">
                            <ListView.BindingContext>
                                <local:ContactsViewModel />
                            </ListView.BindingContext>
                            <ListView.ItemTemplate>
                                <DataTemplate>
                                    <ViewCell>
                                        <StackLayout Orientation="Vertical" Margin="30,0,0,0">
                                            <Label 
                                            Text="{Binding Name}"
                                            FontSize="24" 
                                                />
                                            <Label 
                                            Text="{Binding Number}" 
                                            FontSize="20" 
                                            TextColor="LightSlateGray" />
                                        </StackLayout>
                                    </ViewCell>
                                </DataTemplate>
                            </ListView.ItemTemplate>
                        </ListView>
                    </Grid>
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
            <tabView:SfTabItem Title="Favorites">
                <tabView:SfTabItem.Content>
                    <Grid BackgroundColor="Green" x:Name="FavoritesGrid" />
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
            <tabView:SfTabItem Title="Contacts">
                <tabView:SfTabItem.Content>
                    <Grid BackgroundColor="Blue" x:Name="ContactsGrid" />
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
            <tabView:SfTabItem Title="Missed Call">
                <tabView:SfTabItem.Content>
                    <Grid BackgroundColor="Yellow" x:Name="MissedCallGrid" />
                </tabView:SfTabItem.Content>
            </tabView:SfTabItem>
        </tabView:SfTabView>
    </Grid>
</ContentPage.Content>
 
</ContentPage>

 

C#:

 

using System.Collections.ObjectModel;
using Xamarin.Forms;
 
namespace TabView
{
public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
    void CenterButton_Tapped(object sender, System.EventArgs e)
    {
        DisplayAlert("Message", "CenterButtonView Clicked", "Ok");
 
    }
}
}

 

 

Image:

 

Centerbutton in SfTabView

 

 

Please download the sample for the same from this link : Samlple

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile