My xaml code:
<ContentPage.Content>
<Grid >
<tabView:SfTabView BackgroundColor="{StaticResource Primary}" x:Name="tabView"
VisibleHeaderCount="3"
EnableSwiping="false"
TabHeaderPosition="Bottom"
OverflowMode="CenterButton"
DisplayMode="Image"
Items="{Binding Items}"
>
<tabView:SfTabView.CenterButtonSettings>
<tabView:CenterButtonSettings Height="85" Width="80"/>
</tabView:SfTabView.CenterButtonSettings>
<tabView:SfTabView.SelectionIndicatorSettings>
<tabView:SelectionIndicatorSettings Color="Transparent"
StrokeThickness="1"
Position="Top"/>
</tabView:SfTabView.SelectionIndicatorSettings>
<tabView:SfTabView.CenterButtonView>
<StackLayout Padding="10">
<Image Source="CenterButton.png" HeightRequest="60"/>
</StackLayout>
</tabView:SfTabView.CenterButtonView>
</tabView:SfTabView>
</Grid>
</ContentPage.Content>
My cs code on ViewModel:
public class MyTabViewModel : BaseViewModel
{
public TabItemCollection Items { get; set; }
public MyTabViewModel()
{
SetItems();
}
internal void SetItems()
{
Items = new TabItemCollection();
DashboardPage page1 = new DashboardPage();
AboutPage page2 = new AboutPage();
SfBorder borderLeft = new SfBorder();
borderLeft.CornerRadius = new Thickness(20, 20, 0, 0);
SfTabItem tab1 = new SfTabItem { Content = page1.Content, Title = "OUR WORLD", ImageSource = "Properties.png", FontIconFontColor = Color.DarkGray, TitleFontColor = Color.DarkGray, SelectionColor = Color.Blue };
borderLeft.Content = tab1;
SfBorder borderRight = new SfBorder();
borderRight.CornerRadius = new Thickness(0, 0, 20, 20);
SfTabItem tab2 = new SfTabItem { Content = page2.Content, Title = "ABOUT", ImageSource = "Messages.png", FontIconFontColor = Color.DarkGray, TitleFontColor = Color.DarkGray, SelectionColor = Color.Blue };
borderRight.Content = tab2;
Items.Add(tab1);
Items.Add(tab2);
}
}
