Flickering when calling Navigation.PopAsync(false). #13810
Description
Discussed in #13809
Originally posted by cat0363 March 10, 2023
The layout of the page is as follows.
Page1 layout:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NavigationTest.Page1"
NavigationPage.HasNavigationBar="False" BackgroundColor="Red">
<Grid RowDefinitions="44,44,44,44,44,44,*" RowSpacing="0">
<Button Grid.Row="0" Text="Next" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
<Button Grid.Row="1" Text="Next" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
<Button Grid.Row="2" Text="Next" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
<Button Grid.Row="3" Text="Next" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
<Button Grid.Row="4" Text="Next" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
<Button Grid.Row="5" Text="Next" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
</Grid>
</ContentPage>
Page2 layout:
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="NavigationTest.Page2"
NavigationPage.HasNavigationBar="False" BackgroundColor="White">
<Grid RowDefinitions="44,44,44,44,44,44,*" RowSpacing="0">
<Button Grid.Row="0" Text="Back" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
<Button Grid.Row="1" Text="Back" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
<Button Grid.Row="2" Text="Back" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
<Button Grid.Row="3" Text="Back" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
<Button Grid.Row="4" Text="Back" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
<Button Grid.Row="5" Text="Back" BackgroundColor="Blue" TextColor="White" Clicked="Button_Clicked" />
</Grid>
</ContentPage>
Button_Click event on Page1:
private async void Button_Clicked(object sender, EventArgs e)
{
await Navigation.PushAsync(new Page2(), false);
}
Button_Click event on Page2:
private async void Button_Clicked(object sender, EventArgs e)
{
await Navigation.PopAsync(false);
}
After using NavigationPage to transition from Page1 to Page2, return from Page2 to Page1.
Flickering occurs when returning from Page2 to Page1.
I tried transitioning using the same layout in Xamarin.Forms and .NET MAUI.
The video was tested on Android.
(As for iOS, the build environment has not been prepared, so it cannot be verified.)
[Xamarin.Forms]
Android.Emulator.-.pixel_2_-_api_30_5554.2023-03-10.11-06-22.mp4
[.NET MAUI]
Android.Emulator.-.pixel_2_-_api_30_5554.2023-03-10.11-08-34.mp4
No flickering in Xamarin.Forms but flickering in .NET MAUI.
This flickering makes users feel uncomfortable.
I would like to reduce this flickering if possible.
Any good ideas? Thank you.