149 lines
7.3 KiB
XML
149 lines
7.3 KiB
XML
<?xml version="1.0" encoding="UTF-8"?>
|
|
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
|
|
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
|
|
xmlns:local="clr-namespace:Gallery"
|
|
xmlns:r="clr-namespace:Gallery.Resources"
|
|
xmlns:ui="clr-namespace:Gallery.Resources.UI"
|
|
xmlns:util="clr-namespace:Gallery.Util"
|
|
xmlns:v="clr-namespace:Gallery.Views"
|
|
x:Class="Gallery.AppShell"
|
|
x:Name="appShell"
|
|
BackgroundColor="{DynamicResource NavigationColor}"
|
|
FlyoutBackgroundColor="{DynamicResource WindowColor}"
|
|
x:DataType="{x:Type local:AppShell}"
|
|
BindingContext="{x:Reference appShell}">
|
|
|
|
<Shell.Resources>
|
|
<ResourceDictionary>
|
|
<Style x:Key="BaseStyle" TargetType="Element">
|
|
<Setter Property="Shell.BackgroundColor" Value="{DynamicResource NavigationColor}"/>
|
|
<Setter Property="Shell.ForegroundColor" Value="{DynamicResource TintColor}"/>
|
|
<Setter Property="Shell.TitleColor" Value="{DynamicResource TextColor}"/>
|
|
<Setter Property="Shell.DisabledColor" Value="#B4FFFFFF"/>
|
|
<Setter Property="Shell.UnselectedColor" Value="{DynamicResource TintColor}"/>
|
|
<Setter Property="Shell.TabBarBackgroundColor" Value="{DynamicResource NavigationColor}"/>
|
|
<Setter Property="Shell.TabBarForegroundColor" Value="{DynamicResource TintColor}"/>
|
|
<Setter Property="Shell.TabBarUnselectedColor" Value="{DynamicResource TintColor}"/>
|
|
<Setter Property="Shell.TabBarTitleColor" Value="{DynamicResource TextColor}"/>
|
|
</Style>
|
|
<Style TargetType="TabBar" BasedOn="{StaticResource BaseStyle}"/>
|
|
<Style TargetType="FlyoutItem" BasedOn="{StaticResource BaseStyle}"/>
|
|
<!--
|
|
Custom Style you can apply to any Flyout Item
|
|
<Style Class="MenuItemLayoutStyle" TargetType="Layout" ApplyToDerivedTypes="True">
|
|
<Setter Property="VisualStateManager.VisualStateGroups">
|
|
<VisualStateGroupList>
|
|
<VisualStateGroup x:Name="CommonStates">
|
|
<VisualState x:Name="Normal">
|
|
<VisualState.Setters>
|
|
<Setter TargetName="FlyoutItemLabel" Property="Label.TextColor" Value="{DynamicResource Primary}"/>
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
</VisualStateGroup>
|
|
</VisualStateGroupList>
|
|
</Setter>
|
|
</Style>
|
|
-->
|
|
</ResourceDictionary>
|
|
</Shell.Resources>
|
|
|
|
<Shell.FlyoutHeaderTemplate>
|
|
<DataTemplate>
|
|
<Grid RowSpacing="0" BackgroundColor="{DynamicResource WindowColor}" Padding="20, 0, 0, 20">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="80"/>
|
|
</Grid.RowDefinitions>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto"/>
|
|
<ColumnDefinition/>
|
|
</Grid.ColumnDefinitions>
|
|
<ui:CircleImage Aspect="AspectFill" Source="logo_light.png"
|
|
HeightRequest="60" WidthRequest="60"
|
|
VerticalOptions="Center"/>
|
|
<Label Grid.Column="1" VerticalOptions="Center" FontAttributes="Bold"
|
|
Margin="10, 0, 0, 0"
|
|
Text="{r:Text Title}" TextColor="{DynamicResource TextColor}"/>
|
|
</Grid>
|
|
</DataTemplate>
|
|
</Shell.FlyoutHeaderTemplate>
|
|
|
|
<Shell.ItemTemplate>
|
|
<DataTemplate x:DataType="BaseShellItem">
|
|
<Grid HeightRequest="40">
|
|
<VisualStateManager.VisualStateGroups>
|
|
<VisualStateGroupList>
|
|
<VisualStateGroup x:Name="CommonStates">
|
|
<VisualState x:Name="Normal">
|
|
<VisualState.Setters>
|
|
<Setter Property="BackgroundColor"
|
|
Value="{DynamicResource WindowColor}"/>
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
<VisualState x:Name="Selected">
|
|
<VisualState.Setters>
|
|
<Setter Property="BackgroundColor"
|
|
Value="{DynamicResource NavigationSelectedColor}"/>
|
|
</VisualState.Setters>
|
|
</VisualState>
|
|
</VisualStateGroup>
|
|
</VisualStateGroupList>
|
|
</VisualStateManager.VisualStateGroups>
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="{x:OnPlatform Android=54, iOS=50}"/>
|
|
<ColumnDefinition/>
|
|
</Grid.ColumnDefinitions>
|
|
<Image Source="{Binding FlyoutIcon}"
|
|
HorizontalOptions="Center" VerticalOptions="Center"
|
|
HeightRequest="22"/>
|
|
<Label Grid.Column="1" TextColor="{DynamicResource TextColor}"
|
|
Text="{Binding Title}"
|
|
FontSize="{x:OnPlatform Android=14, iOS=Small}"
|
|
VerticalTextAlignment="Center"/>
|
|
</Grid>
|
|
</DataTemplate>
|
|
</Shell.ItemTemplate>
|
|
|
|
<!--
|
|
When the Flyout is visible this defines the content to display in the flyout.
|
|
FlyoutDisplayOptions="AsMultipleItems" will create a separate flyout item for each child element
|
|
https://docs.microsoft.com/dotnet/api/xamarin.forms.shellgroupitem.flyoutdisplayoptions?view=xamarin-forms
|
|
-->
|
|
<FlyoutItem x:Name="flyoutItems"
|
|
FlyoutDisplayOptions="AsMultipleItems"
|
|
Route="{x:Static util:Routes.Gallery}"/>
|
|
<FlyoutItem FlyoutIcon="{DynamicResource FontIconOption}"
|
|
Title="{r:Text Option}"
|
|
Route="{x:Static util:Routes.Option}">
|
|
<Tab>
|
|
<ShellContent ContentTemplate="{DataTemplate v:OptionPage}"/>
|
|
</Tab>
|
|
</FlyoutItem>
|
|
|
|
<!-- When the Flyout is visible this will be a menu item you can tie a click behavior to -->
|
|
<!--<MenuItem Text="Logout" StyleClass="MenuItemLayoutStyle" Clicked="OnMenuItemClicked"/>-->
|
|
|
|
<!--
|
|
TabBar lets you define content that won't show up in a flyout menu. When this content is active
|
|
the flyout menu won't be available. This is useful for creating areas of the application where
|
|
you don't want users to be able to navigate away from. If you would like to navigate to this
|
|
content you can do so by calling
|
|
await Shell.Current.GoToAsync("//LoginPage");
|
|
<TabBar>
|
|
<ShellContent Route="LoginPage" ContentTemplate="{DataTemplate local:LoginPage}"/>
|
|
</TabBar>
|
|
-->
|
|
|
|
<!-- Optional Templates
|
|
// MenuItemTemplate is for MenuItems as displayed in a Flyout
|
|
// https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#define-menuitem-appearance
|
|
<Shell.MenuItemTemplate>
|
|
<DataTemplate>
|
|
<ContentView>
|
|
Bindable Properties: Text, Icon
|
|
</ContentView>
|
|
</DataTemplate>
|
|
</Shell.MenuItemTemplate>
|
|
-->
|
|
|
|
</Shell>
|