.NET MAUI: Personalizando el Height de TitleView en Windows

Descripción de .NET MAUI

.NET MAUI es un framework multiplataforma de código abierto desarrollado por Microsoft. Con .NET MAUI, los desarrolladores pueden crear aplicaciones nativas para Android, iOS, macOS y Windows desde un solo código base. Esto proporciona una eficiencia significativa al permitir el desarrollo de aplicaciones para diferentes plataformas sin tener que mantener múltiples códigos.

Descripción del Problema

Durante el desarrollo de una aplicación con .NET MAUI para la plataforma Windows, es posible encontrarse con desafíos relacionados con la personalización del TitleView en el Shell. Específicamente, en Android, puedes ajustar el tamaño según tus necesidades, pero en Windows (y en iOS), el tamaño está limitado por la plataforma. Si el contenido del TitleView es demasiado grande, Windows lo recortará y agregará un botón de "más" con tres puntos para acceder al contenido adicional.

Por ejemplo: si tenemos el siguiente titleView

<Shell.TitleView>
    <Grid BackgroundColor="Blue" HeightRequest="90" RowDefinitions="*, auto">
        <Label Text="I am a title" TextColor="White" />

        <Label Grid.Row="1" Text="I am a sub title" TextColor="White" />
    </Grid>
</Shell.TitleView>

Por defecto este TitleView en windows se verá asi:

Captura de windows con el header compacto

Como veis, no se ve el segundo label, ya que windows recorta el header y nos muestra a la derecha un boton de "ver mas" que la expande.

Solución

Utilizando un handler, podemos acceder a las propiedades nativas y realizar ajustes para lograr la personalización deseada. En este caso, utiliza el siguiente código en MauiProgram:

ToolbarHandler.Mapper.Add("FixHeight", (handler, _) =>
{
    handler.PlatformView.IsOpen = true;
    handler.PlatformView.IsSticky = true;
    handler.PlatformView.OverflowButtonVisibility = Microsoft.UI.Xaml.Controls.CommandBarOverflowButtonVisibility.Collapsed;
});

• IsOpen: Expande el TitleView por defecto.

• IsSticky: Evita que se cierre automáticamente al hacer clic en cualquier parte de la aplicación.

• OverflowButtonVisibility: Oculta el botón de "más", ya que el TitleView estará siempre expandido según la configuración.

Con este handler, conseguiriamos que el header se quede siempre con el tamaño deseado y sin el dichoso boton de "ver mas" :

Captura de windows con el header expandido

Puedes ver el repositorio de ejemplo aqui: https://github.com/migueBarrera/MauiSampleSizeTitleView