barra de aplicaciones

Una barra de aplicaciones consta de una barra de herramientas y potencialmente de otras vistas. Exponer una o más acciones.

El principal beneficio de usar la barra de aplicaciones es poder personalizar todo. Opciones de personalización como:

• Altura de la barra de aplicaciones personalizada.
• Incluir cualquier contenido sin restricciones ni limitaciones (márgenes, tamaño, etc.).
• Barra de aplicaciones transparente.
• Etc

NOTA: AppBar es una vista multiplataforma que toma el control cuando la barra de navegación nativa alcanza sus límites, como agregar contenido personalizado, posicionamiento con diseños, etc.

En Xamarin.Forms, la barra de la aplicación se usa normalmente en la propiedad Shell.AppBar , que coloca la barra de la aplicación como un widget de altura fija en la parte superior de la pantalla.

API

A continuación, una lista con las propiedades y eventos de AppBar.

Propiedades

| Propiedad | Tipo | Descripción |
|----------|:-------------:|:-------------------:|
| Colocación | Ubicación de la barra de aplicaciones | La ubicación de AppBar (superior o inferior). |
| Altura de la barra | doble | Defina la altura de la barra de la aplicación. |
| BarFondo | Cepillo | Un pincel que proporciona el fondo. |
| Imagen de fondo de la barra | Fuente de la imagen | ImageSource que proporciona el fondo. |
| BarTextColor | Color | El color utilizado en los textos (título, etc.). |
| Icono de navegación | Fuente de la imagen | Un ImageSource que proporciona el icono de navegación (botón Atrás, etc.). |
| Título del botón Atrás | cadena | Defina el título del botón Atrás de la barra de la aplicación. |
| Color del borde | Color | El color del borde de la barra de aplicaciones. |
| Grosor del borde | Espesor | El ancho del borde de la barra de aplicaciones en cada lado. |
| Familia de fuentes | cadena | La familia de fuentes utilizada en los textos de la barra de aplicaciones. |
| Atributos de fuente | Atributos de fuente | Los atributos de fuente utilizados en los textos de la barra de la aplicación. |
| Tamaño de fuente | doble | El tamaño de fuente utilizado en los textos de la barra de la aplicación. |
| Vista del título | Ver | Muestre cualquier vista de Xamarin.Forms en la barra de la aplicación. |
| AtrásComando | IComando | Comando ejecutado navegando hacia atrás. |
| BackCommandParameter | objeto | El parámetro de comando utilizado para navegar hacia atrás. |

Eventos

| Evento | Descripción |
|----------|:-------------------:|
| Retrocedido | Evento que se genera cuando el usuario navega hacia atrás. |

Escenarios

Veamos algunos ejemplos que cubren escenarios comunes.

Barra de aplicaciones sencilla

Veamos un ejemplo básico:

<Shell>
     <Shell.AppBar>
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

Barra de aplicaciones personalizada

Personalización de la apariencia usando una barra transparente con una altura personalizada y contenido personalizado (TitleView).

<Shell>
     <Shell.AppBar>
        <AppBar  
            BarHeight="120"
            BarBackgroundColor="Transparent">
            <AppBar.TitleView>
            ...
            </AppBar.TitleView>
        </AppBar>
     </Shell.AppBar>
    ...
</Shell>

Colocación

Una barra de aplicaciones superior (ubicación predeterminada) muestra la navegación y las acciones en la parte superior de las pantallas móviles.

<Shell>
     <Shell.AppBar
          Placement="Top">
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

Una barra de aplicaciones inferior muestra la navegación y las acciones en la parte inferior de las pantallas móviles.

<Shell>
     <Shell.AppBar
          Placement="Bottom">
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

Uso de estilos

Puede personalizar la apariencia del contenido de la pestaña, la tira de pestañas, el elemento de la pestaña, etc. usando estilos XAML o CSS .

Usando XAML:

<Style
    x:Key="AppBarStyle"
    TargetType="AppBar">
    <Setter
        Property="BarHeight"
        Value="120" />
    <Setter
        Property="BarBackgroundColor"
        Value="Transparent" />
</Style>

Usando CSS:

.appBarStyle {
  background: transparent;
  height: 120px;
}

Dificultad : Media

Más información

Basado en https://github.com/xamarin/Xamarin.Forms/issues/10774