I'm playing around with styling the Maui Shell and have noticed some odd behaviour when Shell.FlyoutBehavior = "Locked".
The Shell.FlyoutBackground is not applied when the AppShell is fired up for the first time. It is applied if I change the main page to something else, and then assign a new instance of AppShell.
Can anyone think of why this occurs?
Initial state - It's grey when it should be blue.
After button click - Blue is applied
These are the relevant sections in my code:
public partial class App : Application
{
public App()
{
InitializeComponent();
App.Current.MainPage = new AppShell();
}
}
I have some styles which are supposed to be applied. They look terrible, but I wanted something which is easy to notice.
<Color x:Key="BlueTint">#550000ff</Color>
<SolidColorBrush x:Key="BlueTintBrush" Color="{StaticResource BlueTint}" />
<Style TargetType="Shell" ApplyToDerivedTypes="True">
<Setter Property="Shell.FlyoutBackgroundColor"
Value="{AppThemeBinding Light={StaticResource BlueTintBrush}, Dark={StaticResource BlueTintBrush}}" />
<Setter Property="Shell.FlyoutBackground"
Value="{AppThemeBinding Light={StaticResource BlueTintBrush}, Dark={StaticResource BlueTintBrush}}" />
</Style>
And then the Shell xaml...
<Shell
x:Class="Company.Product.OnMaui.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:onMaui="clr-namespace:Company.Product.OnMaui"
xmlns:res="clr-namespace:Company.Product.OnMaui.Resources"
Shell.FlyoutBackdrop="{StaticResource BlueTintBrush}"
Shell.FlyoutBehavior="Locked">
<!-- Shell Content items here -->
</Shell>
My Button handler...
[RelayCommand]
private async Task StartShellExperience()
{
_shell = new AppShell();
App.Current.MainPage = _shell;
}
N.B. This window is translucent because it has Acrylic enabled, but I get the same result if it's off.