Jared Germano
Jared Germano

Reputation: 43

Xamarin Shell Styling not applying to UWP

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 &amp; 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.

Android Shell

However in UWP they don't display unless you hover over them

enter image description here

Could anyone point me in the right direction on getting this to work in UWP?

Upvotes: 0

Views: 553

Answers (0)

Related Questions