Fix: [BUG] StatusBarBehavior is causing Android layouts to go behind status bar and navigation bar buttons on launch #2351

samples/CommunityToolkit.Maui.Sample/AppShell.xaml.cs

@@ -2,6 +2,7 @@
 using CommunityToolkit.Maui.Sample.Pages;
 using CommunityToolkit.Maui.Sample.Pages.Alerts;
 using CommunityToolkit.Maui.Sample.Pages.Behaviors;
+using CommunityToolkit.Maui.Sample.Pages.Behaviors.StatusBarBehavior;
 using CommunityToolkit.Maui.Sample.Pages.Converters;
 using CommunityToolkit.Maui.Sample.Pages.Essentials;
 using CommunityToolkit.Maui.Sample.Pages.Extensions;

samples/CommunityToolkit.Maui.Sample/CommunityToolkit.Maui.Sample.csproj

@@ -87,6 +87,19 @@
     <ProjectReference Include="..\..\src\CommunityToolkit.Maui.Maps\CommunityToolkit.Maui.Maps.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <MauiXaml Update="Pages\Behaviors\StatusBarBehavior\StatusBarBehaviorPage.xaml">
+      <SubType>Designer</SubType>
+    </MauiXaml>
+  </ItemGroup>
+
+  <ItemGroup>
+    <Compile Update="Pages\Behaviors\StatusBarBehavior\StatusBarBehaviorPage.xaml.cs">
+      <DependentUpon>StatusBarBehaviorPage.xaml</DependentUpon>
+      <SubType>Code</SubType>
+    </Compile>
+  </ItemGroup>
+
   <PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)'))=='windows' and $(Configuration) == 'Release'">
     <RuntimeIdentifier>win-x64</RuntimeIdentifier>
   </PropertyGroup>

samples/CommunityToolkit.Maui.Sample/MauiProgram.cs

@@ -6,6 +6,7 @@
 using CommunityToolkit.Maui.Sample.Pages;
 using CommunityToolkit.Maui.Sample.Pages.Alerts;
 using CommunityToolkit.Maui.Sample.Pages.Behaviors;
+using CommunityToolkit.Maui.Sample.Pages.Behaviors.StatusBarBehavior;
 using CommunityToolkit.Maui.Sample.Pages.Converters;
 using CommunityToolkit.Maui.Sample.Pages.Essentials;
 using CommunityToolkit.Maui.Sample.Pages.Extensions;

samples/CommunityToolkit.Maui.Sample/Pages/Behaviors/StatusBarBehavior/BrokenTitleViewShell.xaml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+
+<Shell
+    Shell.FlyoutBehavior="Disabled"
+    Title="MauiApp1"
+    x:Class="CommunityToolkit.Maui.Sample.Pages.Behaviors.StatusBarBehavior.BrokenTitleViewShell"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:statusBarBehavior="clr-namespace:CommunityToolkit.Maui.Sample.Pages.Behaviors.StatusBarBehavior"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:xct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui">
+
+    <Shell.Behaviors>
+        <xct:StatusBarBehavior StatusBarStyle="LightContent" />
+    </Shell.Behaviors>
+
+    <ShellContent
+        ContentTemplate="{DataTemplate statusBarBehavior:MainPage}"
+        Route="MainPage"
+        Title="Home" />
+
+    <TabBar Route="Tabbar">
+        <Tab Title="Tab 1">
+            <ShellContent ContentTemplate="{DataTemplate statusBarBehavior:MainPage}" Title="Tab 1" />
+        </Tab>
+        <Tab Title="Tab 2">
+            <ShellContent ContentTemplate="{DataTemplate statusBarBehavior:MainPage}" Title="Tab 1" />
+        </Tab>
+    </TabBar>
+</Shell>

samples/CommunityToolkit.Maui.Sample/Pages/Behaviors/StatusBarBehavior/BrokenTitleViewShell.xaml.cs

@@ -0,0 +1,11 @@
+namespace CommunityToolkit.Maui.Sample.Pages.Behaviors.StatusBarBehavior;
+
+public partial class BrokenTitleViewShell : Shell
+{
+	public BrokenTitleViewShell()
+	{
+		InitializeComponent();
+
+		GoToAsync("//Tabbar");
+	}
+}

samples/CommunityToolkit.Maui.Sample/Pages/Behaviors/StatusBarBehavior/MainPage.xaml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage
+    x:Class="CommunityToolkit.Maui.Sample.Pages.Behaviors.StatusBarBehavior.MainPage"
+    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
+
+    <Shell.TitleView>
+        <Grid BackgroundColor="Yellow">
+            <Label HorizontalOptions="Center" Text="TITLE VIEW" />
+        </Grid>
+    </Shell.TitleView>
+
+    <Grid RowDefinitions="auto, auto, *">
+        <Label Text="Top line" />
+
+        <VerticalStackLayout
+            Grid.Row="1"
+            Padding="30,0"
+            Spacing="25">
+            <Image
+                Aspect="AspectFit"
+                HeightRequest="185"
+                SemanticProperties.Description="dot net bot in a race car number eight"
+                Source="dotnet_bot.png" />
+
+            <Label SemanticProperties.HeadingLevel="Level1" Text="Hello, World!" />
+
+            <Label
+                SemanticProperties.Description="Welcome to dot net Multi platform App U I"
+                SemanticProperties.HeadingLevel="Level2"
+                Text="Welcome to &#10;.NET Multi-platform App UI" />
+
+            <Button
+                Clicked="OnCounterClicked"
+                HorizontalOptions="Fill"
+                SemanticProperties.Hint="Counts the number of times you click"
+                Text="Click me"
+                x:Name="CounterBtn" />
+        </VerticalStackLayout>
+
+        <Label
+            Grid.Row="2"
+            Text="Bottom"
+            VerticalOptions="End" />
+
+    </Grid>
+
+</ContentPage>

samples/CommunityToolkit.Maui.Sample/Pages/Behaviors/StatusBarBehavior/MainPage.xaml.cs

@@ -0,0 +1,16 @@
+namespace CommunityToolkit.Maui.Sample.Pages.Behaviors.StatusBarBehavior;
+
+public partial class MainPage : ContentPage
+{
+	int count = 0;
+
+	public MainPage()
+	{
+		InitializeComponent();
+	}
+
+	void OnCounterClicked(object? sender, EventArgs e)
+	{
+		MainThread.BeginInvokeOnMainThread(async () => { await Shell.Current.GoToAsync("//MainPage"); });
+	}
+}

samples/CommunityToolkit.Maui.Sample/Pages/Behaviors/StatusBarBehaviorPage.xaml → samples/CommunityToolkit.Maui.Sample/Pages/Behaviors/StatusBarBehavior/StatusBarBehaviorPage.xaml

@@ -1,72 +1,73 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8" ?>
 
 <pages:BasePage
-    x:Class="CommunityToolkit.Maui.Sample.Pages.Behaviors.StatusBarBehaviorPage"
+    Title="StatusBarBehavior"
+    ios:Page.UseSafeArea="True"
+    x:Class="CommunityToolkit.Maui.Sample.Pages.Behaviors.StatusBarBehavior.StatusBarBehaviorPage"
+    x:DataType="vm:StatusBarBehaviorViewModel"
+    x:Name="Page"
+    x:TypeArguments="vm:StatusBarBehaviorViewModel"
     xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
-    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+    xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
     xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
     xmlns:pages="clr-namespace:CommunityToolkit.Maui.Sample.Pages"
     xmlns:vm="clr-namespace:CommunityToolkit.Maui.Sample.ViewModels.Behaviors"
-    xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
-    ios:Page.UseSafeArea="True"
-    Title="StatusBarBehavior"
-    x:DataType="vm:StatusBarBehaviorViewModel"
-    x:TypeArguments="vm:StatusBarBehaviorViewModel"
-    x:Name="Page">
+    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
 
     <ContentPage.Resources>
         <ControlTemplate x:Key="RadioButtonTemplate">
-            <Border Stroke="#F3F2F1"
-                    StrokeThickness="2"
-                    StrokeShape="RoundRectangle 10"
-                    BackgroundColor="#F3F2F1"
-                    HeightRequest="90"
-                    WidthRequest="90"
-                    HorizontalOptions="Start"
-                    VerticalOptions="Start">
+            <Border
+                BackgroundColor="#F3F2F1"
+                HeightRequest="90"
+                HorizontalOptions="Start"
+                Stroke="#F3F2F1"
+                StrokeShape="RoundRectangle 10"
+                StrokeThickness="2"
+                VerticalOptions="Start"
+                WidthRequest="90">
+                <Grid
+                    BackgroundColor="Transparent"
+                    Margin="4"
+                    WidthRequest="90">
+                    <Grid
+                        HeightRequest="18"
+                        HorizontalOptions="End"
+                        Margin="0,0,4,0"
+                        VerticalOptions="Start"
+                        WidthRequest="18">
+                        <Ellipse
+                            Fill="White"
+                            HeightRequest="16"
+                            HorizontalOptions="Center"
+                            Stroke="Blue"
+                            VerticalOptions="Center"
+                            WidthRequest="16" />
+                        <Ellipse
+                            Fill="Blue"
+                            HeightRequest="8"
+                            HorizontalOptions="Center"
+                            VerticalOptions="Center"
+                            WidthRequest="8"
+                            x:Name="check" />
+                    </Grid>
+                    <ContentPresenter />
+                </Grid>
                 <VisualStateManager.VisualStateGroups>
                     <VisualStateGroupList>
                         <VisualStateGroup x:Name="CheckedStates">
                             <VisualState x:Name="Checked">
                                 <VisualState.Setters>
-                                    <Setter TargetName="check"
-                                            Property="Opacity"
-                                            Value="1" />
+                                    <Setter Property="Opacity" TargetName="check" Value="1" />
                                 </VisualState.Setters>
                             </VisualState>
                             <VisualState x:Name="Unchecked">
                                 <VisualState.Setters>
-                                    <Setter TargetName="check"
-                                            Property="Opacity"
-                                            Value="0" />
+                                    <Setter Property="Opacity" TargetName="check" Value="0" />
                                 </VisualState.Setters>
                             </VisualState>
                         </VisualStateGroup>
                     </VisualStateGroupList>
                 </VisualStateManager.VisualStateGroups>
-                <Grid Margin="4"
-                      WidthRequest="90"
-                      BackgroundColor="Transparent">
-                    <Grid Margin="0,0,4,0"
-                          WidthRequest="18"
-                          HeightRequest="18"
-                          HorizontalOptions="End"
-                          VerticalOptions="Start">
-                        <Ellipse Stroke="Blue"
-                                 Fill="White"
-                                 WidthRequest="16"
-                                 HeightRequest="16"
-                                 HorizontalOptions="Center"
-                                 VerticalOptions="Center" />
-                        <Ellipse x:Name="check"
-                                 Fill="Blue"
-                                 WidthRequest="8"
-                                 HeightRequest="8"
-                                 HorizontalOptions="Center"
-                                 VerticalOptions="Center" />
-                    </Grid>
-                    <ContentPresenter />
-                </Grid>
             </Border>
         </ControlTemplate>
 
@@ -84,7 +85,10 @@
 
     <ScrollView Padding="{StaticResource ContentPadding}">
 
-        <VerticalStackLayout Padding="15,0" Spacing="30" IgnoreSafeArea="False">
+        <VerticalStackLayout
+            IgnoreSafeArea="False"
+            Padding="15,0"
+            Spacing="30">
 
             <Label Text="Slide to change StatusBar color" />
 
@@ -124,17 +128,16 @@
 
             <Stepper
                 HorizontalOptions="Start"
+                Increment="0.1"
                 Margin="20,0"
                 Maximum="1"
-                Increment="0.1"
                 Minimum="0"
                 Value="{Binding AlphaSliderValue}" />
 
             <Label Text="Select StatusBar and NavigationBar style" />
 
             <HorizontalStackLayout Spacing="15">
-                <RadioButton IsChecked="{Binding IsDefaultChecked}"
-                             VerticalOptions="Center">
+                <RadioButton IsChecked="{Binding IsDefaultChecked}" VerticalOptions="Center">
                     <RadioButton.Content>
                         <Label
                             Margin="10,0,0,0"
@@ -144,8 +147,7 @@
                     </RadioButton.Content>
                 </RadioButton>
 
-                <RadioButton IsChecked="{Binding IsLightContentChecked}"
-                             VerticalOptions="Center">
+                <RadioButton IsChecked="{Binding IsLightContentChecked}" VerticalOptions="Center">
                     <RadioButton.Content>
                         <Label
                             Margin="10,0,0,0"
@@ -155,8 +157,7 @@
                     </RadioButton.Content>
                 </RadioButton>
 
-                <RadioButton IsChecked="{Binding IsDarkContentChecked}"
-                             VerticalOptions="Center">
+                <RadioButton IsChecked="{Binding IsDarkContentChecked}" VerticalOptions="Center">
                     <RadioButton.Content>
                         <Label
                             Margin="10,0,0,0"
@@ -169,8 +170,14 @@
             </HorizontalStackLayout>
 
             <Button
-                x:Name="ModalPageButton"
                 HorizontalOptions="Center"
+                VerticalOptions="Center"
+                x:Name="ModalPageButton" />
+
+            <Button
+                Clicked="Button_OnClicked"
+                HorizontalOptions="Center"
+                Text="Go to Broken Shel.TitleView Shell"
                 VerticalOptions="Center" />
         </VerticalStackLayout>
     </ScrollView>

samples/CommunityToolkit.Maui.Sample/Pages/Behaviors/StatusBarBehaviorPage.xaml.cs → samples/CommunityToolkit.Maui.Sample/Pages/Behaviors/StatusBarBehavior/StatusBarBehaviorPage.xaml.cs

@@ -1,7 +1,7 @@
 using System.Diagnostics.CodeAnalysis;
 using CommunityToolkit.Maui.Sample.ViewModels.Behaviors;
 
-namespace CommunityToolkit.Maui.Sample.Pages.Behaviors;
+namespace CommunityToolkit.Maui.Sample.Pages.Behaviors.StatusBarBehavior;
 
 public partial class StatusBarBehaviorPage : BasePage<StatusBarBehaviorViewModel>
 {
@@ -68,4 +68,10 @@ static bool TryGetModalPageButton(Microsoft.Maui.ILayout layout, [NotNullWhen(tr
 
 		return false;
 	}
+
+	void Button_OnClicked(object? sender, EventArgs e)
+	{
+		Application.Current?.MainPage = new BrokenTitleViewShell();
+
+	}
 }