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"
             x:Class="InABox.Mobile.MobileTabStrip"
             x:DataType="mobile:MobileTabStrip">
    
    <ContentView.Resources>
        <ResourceDictionary>
            
            <DataTemplate x:Key="VerticalTemplate" x:DataType="mobile:MobileTabStripItem">
                <Frame
                    Grid.Column="{Binding Index}"
                    HasShadow="False" 
                    Margin="0" 
                    Padding="5"
                    BorderColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedBackground'}" 
                    BackgroundColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedBackground'}" 
                    CornerRadius="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='CornerRadius'}"
                    IsClippedToBounds="True"
                    VerticalOptions="Fill"
                    HorizontalOptions="Fill">
                    
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer Tapped="DoTap"/>
                    </Frame.GestureRecognizers>
                    
                    <Frame.Triggers>
                        <DataTrigger TargetType="Frame" Binding="{Binding Selected}" Value="True">
                            <Setter Property="BackgroundColor" Value="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='SelectedBackground'}" />
                        </DataTrigger>
                    </Frame.Triggers>
                    
                    <Grid>
                        
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        
                        <Image
                            x:Name="_image"
                            Source="{Binding Image}"
                            Grid.Row="0"
                            Aspect="AspectFit"
                            BackgroundColor="Transparent"
                            HeightRequest="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='ImageSize.Height'}"
                            WidthRequest="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='ImageSize.Width'}">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Tapped="DoTap"/>
                            </Image.GestureRecognizers>
                        </Image>
                        
                        <Label 
                            x:Name="_label"
                            Text="{Binding Text}"
                            Grid.Row="1"
                            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="Transparent"
                            TextColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedForeground'}">
                            <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'}" />
                                </DataTrigger>
                            </Label.Triggers>
                        </Label> 
                        
                    </Grid>
                </Frame>
            </DataTemplate>
            
            <DataTemplate x:Key="HorizontalTemplate" x:DataType="mobile:MobileTabStripItem">
                <Frame
                    Grid.Column="{Binding Index}"
                    HasShadow="False" 
                    Margin="0" 
                    Padding="5"
                    BorderColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedBackground'}" 
                    BackgroundColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedBackground'}" 
                    CornerRadius="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='CornerRadius'}"
                    IsClippedToBounds="True"
                    VerticalOptions="Fill"
                    HorizontalOptions="Fill">
                    
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer Tapped="DoTap"/>
                    </Frame.GestureRecognizers>
                    
                    <Frame.Triggers>
                        <DataTrigger TargetType="Frame" Binding="{Binding Selected}" Value="True">
                            <Setter Property="BackgroundColor" Value="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='SelectedBackground'}" />
                        </DataTrigger>
                    </Frame.Triggers>
                    
                    <Grid>
                        
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        
                        <Image
                            x:Name="_image"
                            Source="{Binding Image}"
                            Grid.Column="0"
                            Aspect="AspectFit"
                            BackgroundColor="Transparent"
                            HeightRequest="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='ImageSize.Height'}"
                            WidthRequest="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='ImageSize.Width'}">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Tapped="DoTap"/>
                            </Image.GestureRecognizers>
                        </Image>
                        
                        <Label 
                            x:Name="_label"
                            Text="{Binding Text}"
                            Grid.Column="1"
                            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="Transparent"
                            TextColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedForeground'}">
                            <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'}" />
                                </DataTrigger>
                            </Label.Triggers>
                        </Label> 
                        
                    </Grid>
                </Frame>
            </DataTemplate>
            
            <DataTemplate x:Key="TextOnlyTemplate" x:DataType="mobile:MobileTabStripItem">
                <Frame
                    Grid.Column="{Binding Index}"
                    HasShadow="False" 
                    Margin="0" 
                    Padding="5"
                    BorderColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedBackground'}" 
                    BackgroundColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedBackground'}" 
                    CornerRadius="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='CornerRadius'}"
                    IsClippedToBounds="True"
                    VerticalOptions="Fill"
                    HorizontalOptions="Fill">
                    
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer Tapped="DoTap"/>
                    </Frame.GestureRecognizers>
                    
                    <Frame.Triggers>
                        <DataTrigger TargetType="Frame" Binding="{Binding Selected}" Value="True">
                            <Setter Property="BackgroundColor" Value="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='SelectedBackground'}" />
                        </DataTrigger>
                    </Frame.Triggers>
                    
                    <Label 
                        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="Transparent"
                        TextColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedForeground'}">
                        <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'}" />
                            </DataTrigger>
                        </Label.Triggers>
                    </Label> 

                </Frame>
            </DataTemplate>
            
            <DataTemplate x:Key="ImageOnlyTemplate" x:DataType="mobile:MobileTabStripItem">
                <Frame
                    Grid.Column="{Binding Index}"
                    HasShadow="False" 
                    Margin="0" 
                    Padding="5"
                    BorderColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedBackground'}" 
                    BackgroundColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedBackground'}" 
                    CornerRadius="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='CornerRadius'}"
                    IsClippedToBounds="True"
                    VerticalOptions="Fill"
                    HorizontalOptions="Fill">
                    
                    <Frame.GestureRecognizers>
                        <TapGestureRecognizer Tapped="DoTap"/>
                    </Frame.GestureRecognizers>
                    
                    <Frame.Triggers>
                        <DataTrigger TargetType="Frame" Binding="{Binding Selected}" Value="True">
                            <Setter Property="BackgroundColor" Value="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='SelectedBackground'}" />
                        </DataTrigger>
                    </Frame.Triggers>
                    
                    <Image
                        x:Name="_image"
                        Source="{Binding Image}"
                        Aspect="AspectFit"
                        BackgroundColor="Transparent"
                        HeightRequest="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='ImageSize.Height'}"
                        WidthRequest="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='ImageSize.Width'}">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="DoTap"/>
                        </Image.GestureRecognizers>
                    </Image>
                    
                </Frame>
            </DataTemplate>
            
            <mobile:MobileTabStripDataTemplateSelector 
                x:Key="MobileTabStripDataTemplateSelector"
                x:Name="_mobileTabStripDataTemplateSelector"
                TextOnlyTemplate="{StaticResource TextOnlyTemplate}" 
                ImageOnlyTemplate="{StaticResource ImageOnlyTemplate}"
                VerticalTemplate="{StaticResource VerticalTemplate}"
                HorizontalTemplate="{StaticResource HorizontalTemplate}"/>
            
        </ResourceDictionary>
    </ContentView.Resources>
    <ContentView.Content>
        
        <Frame
            HasShadow="False" 
            Margin="0" 

            BorderColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='BorderColor'}" 
            BackgroundColor="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='UnselectedBackground'}" 
            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.ItemTemplateSelector="{StaticResource MobileTabStripDataTemplateSelector}">
                
                <!-- <BindableLayout.ItemTemplateSelector> -->
                <!--     <mobile:MobileTabStripDataTemplateSelector  -->
                <!--         SelectedLayout="{Binding Source={RelativeSource AncestorType={x:Type mobile:MobileTabStrip}}, Path='ItemsLayout'}" -->
                <!--         TextOnlyTemplate="{StaticResource TextOnlyTemplate}"  -->
                <!--         ImageOnlyTemplate="{StaticResource ImageOnlyTemplate}" -->
                <!--         VerticalTemplate="{StaticResource VerticalTemplate}" -->
                <!--         HorizontalTemplate="{StaticResource HorizontalTemplate}"/> -->
                <!-- </BindableLayout.ItemTemplateSelector> -->
                
            </Grid>
            
        </Frame>
        
    </ContentView.Content>
</ContentView>