Reputation: 43
I'm writing a xamarin app that targets Android, iOS, and UWP.
We're using the shell stack for routing and have a bottom bar with some flyout items.
<?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:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:views="clr-namespace:CADLearning.App.Views"
xmlns:user="clr-namespace:CADLearning.App.Views.User"
xmlns:controls="clr-namespace:CADLearning.App.Controls"
xmlns:services="clr-namespace:CADLearning.App.Services"
BackgroundColor="{DynamicResource HeaderBackgroundColor}"
FlyoutBackgroundColor="{DynamicResource HeaderBackgroundColor}"
x:Name="this"
x:Class="CADLearning.App.AppShell">
<!--
Styles and Resources
-->
<Shell.Resources>
<ResourceDictionary>
<Color x:Key="NavigationPrimary">#2196F3</Color>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{DynamicResource BackgroundColor}" />
<Setter Property="Shell.ForegroundColor" Value="{DynamicResource ForegroundColor}" />
<Setter Property="Shell.TitleColor" Value="{DynamicResource ForegroundColor}" />
<Setter Property="Shell.DisabledColor" Value="{DynamicResource DisabledForegroundColor}" />
<Setter Property="Shell.UnselectedColor" Value="{DynamicResource UnselectedForegroundColor}" />
<Setter Property="Shell.TabBarBackgroundColor" Value="{DynamicResource HeaderBackgroundColor}" />
<Setter Property="Shell.TabBarForegroundColor" Value="{DynamicResource OrangeColor}"/>
<Setter Property="Shell.TabBarUnselectedColor" Value="{DynamicResource UnselectedForegroundColor}"/>
<Setter Property="Shell.TabBarTitleColor" Value="{DynamicResource OrangeColor}"/>
</Style>
<Style TargetType="Tab" BasedOn="{StaticResource BaseStyle}" />
<Style x:Key="FlyoutItemLabelStyle" TargetType="Label">
<Setter Property="FontSize" Value="16"/>
<Setter Property="TextColor" Value="{DynamicResource ForegroundColor}"/>
<Setter Property="VerticalOptions" Value="Center"/>
</Style>
</ResourceDictionary>
</Shell.Resources>
<Shell.FlyoutHeader>
<controls:FlyoutHeader />
</Shell.FlyoutHeader>
<Shell.ItemTemplate>
<DataTemplate>
<StackLayout Padding="5,15,5,0" Orientation="Horizontal">
<Image Source="{Binding FlyoutIcon}" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
<Label Grid.Column="1" Text="{Binding Title}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
</StackLayout>
</DataTemplate>
</Shell.ItemTemplate>
<Shell.MenuItemTemplate>
<DataTemplate>
<StackLayout Padding="5,15,5,0" Orientation="Horizontal">
<Image Source="{Binding FlyoutIcon}" HeightRequest="24" WidthRequest="24" VerticalOptions="Center" Margin="0,0,5,0"/>
<Label Grid.Column="1" Text="{Binding Title}" Style="{DynamicResource FlyoutItemLabelStyle}" VerticalOptions="Center" />
</StackLayout>
</DataTemplate>
</Shell.MenuItemTemplate>
<!--Actual Items-->
<FlyoutItem Title="Home" Icon="home.png" Route="home">
<Tab Title="Dashboard" Icon="workflow.png" Route="dashboard">
<ShellContent ContentTemplate="{DataTemplate views:DashboardPage}"/>
</Tab>
<Tab Title="Roles & Goals" Icon="goal.png" Route="goals">
<ShellContent ContentTemplate="{DataTemplate views:GoalsPage}"/>
</Tab>
<Tab Title="Library" Icon="library.png" Route="library">
<ShellContent ContentTemplate="{DataTemplate views:LibraryPage}"/>
</Tab>
<Tab Title="Playlists" Icon="playlist.png" Route="playlists">
<ShellContent ContentTemplate="{DataTemplate views:PlaylistsPage}"/>
</Tab>
</FlyoutItem>
<FlyoutItem Title="Support" Icon="Q.png" Route="support">
<ShellContent ContentTemplate="{DataTemplate views:QPage}"/>
</FlyoutItem>
<FlyoutItem Title="Settings" Icon="settings.png" Route="user">
<Tab Title="Settings" Icon="settings.png" Route="settings">
<ShellContent ContentTemplate="{DataTemplate user:SettingsPage}"/>
</Tab>
<Tab Title="Transcript" Icon="transcript.png" Route="transcript">
<ShellContent ContentTemplate="{DataTemplate user:TranscriptPage}"/>
</Tab>
</FlyoutItem>
<MenuItem Text="Logout" Icon="login.png" x:Name="miLogout" Clicked="miLogout_Clicked"/>
</Shell>
on Android and iOS this works okay and the bottom tabbed items display.
However in UWP they don't display unless you hover over them
Could anyone point me in the right direction on getting this to work in UWP?
Upvotes: 0
Views: 553