Compartir a través de

Translucidez de la barra de NavigationPage en iOS

  • Artículo

Esta .NET Multi-platform App UI (.NET MAUI) específica de la plataforma iOS se usa para cambiar la transparencia de la barra de navegación a NavigationPage, y se consume en XAML configurando la propiedad adjunta NavigationPage.IsNavigationBarTranslucent a un valor boolean:

<NavigationPage ...
                xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
                BackgroundColor="Blue"
                ios:NavigationPage.IsNavigationBarTranslucent="true">
  ...
</NavigationPage>

Como alternativa, se puede consumir desde C# mediante la API fluida:

using Microsoft.Maui.Controls.PlatformConfiguration;
using Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;
...

// Assume the app has a single window
(App.Current.Windows[0].Page as Microsoft.Maui.Controls.NavigationPage).BackgroundColor = Colors.Blue;
(App.Current.Windows[0].Page as Microsoft.maui.Controls.NavigationPage).On<iOS>().EnableTranslucentNavigationBar();

El método NavigationPage.On<iOS> especifica que esta plataforma específica solo se ejecutará en iOS. El método NavigationPage.EnableTranslucentNavigationBar, en el espacio de nombres Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific, se usa para hacer translúcida la barra de navegación. Además, la clase NavigationPage del espacio de nombres Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific también tiene un método DisableTranslucentNavigationBar que restaura la barra de navegación a su estado predeterminado, y un método SetIsNavigationBarTranslucent que se puede usar para alternar la transparencia de la barra de navegación llamando al método IsNavigationBarTranslucent:

// Assume the app has a single window
(App.Current.Windows[0].Page as Microsoft.Maui.Controls.NavigationPage)
  .On<iOS>()
  .SetIsNavigationBarTranslucent(!(App.Current.Windows[0].Page as Microsoft.Maui.Controls.NavigationPage).On<iOS>().IsNavigationBarTranslucent());

El resultado es que se puede cambiar la transparencia de la barra de navegación:

Translucent Navigation Bar Platform-Specific.