|
@@ -3,9 +3,239 @@
|
|
|
<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.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
|
|
@@ -25,62 +255,19 @@
|
|
|
</OnPlatform>
|
|
|
</Frame.Padding>
|
|
|
|
|
|
- <Grid x:Name="_grid" ColumnSpacing="0">
|
|
|
-
|
|
|
- <BindableLayout.ItemTemplate>
|
|
|
+ <Grid
|
|
|
+ x:Name="_grid"
|
|
|
+ ColumnSpacing="0"
|
|
|
+ BindableLayout.ItemTemplateSelector="{StaticResource MobileTabStripDataTemplateSelector}">
|
|
|
|
|
|
- <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='UnselectedBackground'}"
|
|
|
- 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>
|
|
|
+ <!-- <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>
|
|
|
|