FullScreen app

Question

FullScreen app

Jassim Al Rahma 1,616

Hi, In iOS, How can I make app use the full screen including the space in the below screenshot? Another question, does it apply to Android as well? WhatsApp Image 2023-04-05 at 19.34.07

Thanks, Jassim

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-04-06T07:20:25.4366667+00:00
The part you circled is not safe area for iOS. By default, MAUI apps automatically position page content on an area of the screen that is safe for all devices. For more details, please see Disable the safe area layout guide on iOS - .NET MAUI | Microsoft Learn
And there is a navigation bar that contains the status bar, I'm not sure if you want to hide the navigation bar. You could create an empty MAUI template project, then set MainPage Shell.NavBarIsVisible="False" and Page.UseSafeArea="False" to check if this is the excepted behavior you want. If not, would you mind describing the detailed excepted behavior/appearance?

<ContentPage 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" ios:Page.UseSafeArea="False" x:Class="FullScreenSample.MainPage" Shell.NavBarIsVisible="False"> <ScrollView BackgroundColor="Yellow" > ...
Jassim Al Rahma 1,616 Reputation points

2023-04-06T14:37:57.97+00:00

but how can I have an image as a background just like the screenshot?
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-04-07T08:02:43.77+00:00
You can try to set the height and width of image be same as the screen's height and width.

BgImage.HeightRequest = DeviceDisplay.Current.MainDisplayInfo.Height; BgImage.WidthRequest = DeviceDisplay.Current.MainDisplayInfo.Width;
Jassim Al Rahma 1,616 Reputation points

2023-04-07T10:56:38.4433333+00:00

Did not work

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Microsoft External Staff

Setting like the following code doesn't work, right? Would you mind sharing more about how it doesn't work?

<ContentPage 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"
             ios:Page.UseSafeArea="False"
             x:Class="FullScreenSample.MainPage"
             Shell.NavBarIsVisible="False">

   <Image x:Name ="BgImage" BackgroundColor="Yellow"... >

BgImage.HeightRequest = DeviceDisplay.Current.MainDisplayInfo.Height; BgImage.WidthRequest = DeviceDisplay.Current.MainDisplayInfo.Width;

1 answer

Your answer

Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-04-06T07:20:25.4366667+00:00

The part you circled is not safe area for iOS. By default, MAUI apps automatically position page content on an area of the screen that is safe for all devices. For more details, please see Disable the safe area layout guide on iOS - .NET MAUI | Microsoft Learn
And there is a navigation bar that contains the status bar, I'm not sure if you want to hide the navigation bar. You could create an empty MAUI template project, then set MainPage Shell.NavBarIsVisible="False" and Page.UseSafeArea="False" to check if this is the excepted behavior you want. If not, would you mind describing the detailed excepted behavior/appearance?

<ContentPage 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" ios:Page.UseSafeArea="False" x:Class="FullScreenSample.MainPage" Shell.NavBarIsVisible="False"> <ScrollView BackgroundColor="Yellow" > ...
Jassim Al Rahma 1,616 Reputation points

2023-04-06T14:37:57.97+00:00

but how can I have an image as a background just like the screenshot?
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-04-07T08:02:43.77+00:00

You can try to set the height and width of image be same as the screen's height and width.

BgImage.HeightRequest = DeviceDisplay.Current.MainDisplayInfo.Height; BgImage.WidthRequest = DeviceDisplay.Current.MainDisplayInfo.Width;
Jassim Al Rahma 1,616 Reputation points

2023-04-07T10:56:38.4433333+00:00

Did not work
Wenyan Zhang (Shanghai Wicresoft Co,.Ltd.) 36,436 Reputation points Microsoft External Staff

2023-04-10T05:55:34.6366667+00:00

Setting like the following code doesn't work, right? Would you mind sharing more about how it doesn't work?

<ContentPage 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" ios:Page.UseSafeArea="False" x:Class="FullScreenSample.MainPage" Shell.NavBarIsVisible="False"> <Image x:Name ="BgImage" BackgroundColor="Yellow"... > BgImage.HeightRequest = DeviceDisplay.Current.MainDisplayInfo.Height; BgImage.WidthRequest = DeviceDisplay.Current.MainDisplayInfo.Width;

Answer 1

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.

Comments have been turned off. Learn more

Share via

FullScreen app

1 answer

Your answer