inabox/InABox.Mobile/InABox.Mobile.Shared/Components/MobileTabStrip/MobileTabStrip.xaml

<?xml version="1.0" encoding="utf-8"?>

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mobile="clr-namespace:InABox.Mobile;assembly=InABox.Mobile.Shared"
             xmlns:ui="clr-namespace:XF.Material.Forms.UI;assembly=XF.Material"
             x:Class="InABox.Mobile.MobileTabStrip"
             x:DataType="mobile:MobileTabStrip">
    <ContentView.Content>
        
        <Frame
            HasShadow="False" 
            Margin="0" 

            BorderColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedBackground'}" 
            BackgroundColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='SeparatorColor'}" 
            CornerRadius="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='CornerRadius'}"
            IsClippedToBounds="True">
            <Frame.Padding>
                <OnPlatform x:TypeArguments="Thickness">
                    <OnPlatform.Platforms>
                        <On Platform="iOS" Value="0" />
                        <On Platform="Android" Value="1" />
                    </OnPlatform.Platforms>
                </OnPlatform>
            </Frame.Padding>
            
            <Grid x:Name="_grid" ColumnSpacing="0">
                
                <BindableLayout.ItemTemplate>
                
                    <DataTemplate x:DataType="mobile:MobileTabStripItem">
                        <Grid 
                            Margin="0"
                            Grid.Column="{Binding Index}"
                        VerticalOptions="Fill"
                        HorizontalOptions="Fill">
                        
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                            
                        <Frame
                            HasShadow="False" 
                            Margin="0" 
                            Padding="0"
                            BorderColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedBackground'}" 
                            BackgroundColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='SeparatorColor'}" 
                            CornerRadius="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='CornerRadius'}"
                            IsClippedToBounds="True">

                            <Label 
                                Grid.Row="0" 
                                x:Name="_label"
                                Text="{Binding Text}" 
                                FontSize="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='FontSize'}" 
                                FontAttributes="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='FontAttributes'}"
                                HorizontalTextAlignment="Center" 
                                VerticalTextAlignment="Center" 
                                BackgroundColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedBackground'}"
                                TextColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedForeground'}"
                                Margin="0">
                                <Label.GestureRecognizers>
                                    <TapGestureRecognizer Tapped="DoTap" />
                                </Label.GestureRecognizers>
                                <Label.Triggers>
                                    <DataTrigger TargetType="Label" Binding="{Binding Selected}" Value="True">
                                        <Setter Property="TextColor" Value="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='SelectedForeground'}" />
                                        <Setter Property="BackgroundColor" Value="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='SelectedBackground'}" />
                                    </DataTrigger>
                                </Label.Triggers>
                            </Label> 
                        </Frame>
                        
                    </Grid>
                        
                </DataTemplate>
                    
            </BindableLayout.ItemTemplate>
                
            </Grid>
            
        </Frame>
        
    </ContentView.Content>
</ContentView>